From 089f9da520dbec4ee4e5a09d50c2d9a8f10cdfea Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Sat, 3 Sep 2022 20:07:41 +0200 Subject: [PATCH] create css-vars package and use it --- .../asset-manager/asset-info-tigger.tsx | 7 +++-- apps/designer/package.json | 1 + packages/css-vars/LICENSE | 21 ++++++++++++++ packages/css-vars/README.md | 13 +++++++++ packages/css-vars/package.json | 29 +++++++++++++++++++ packages/css-vars/src/index.ts | 11 +++++++ packages/css-vars/tsconfig.json | 12 ++++++++ packages/icons/package.json | 3 +- packages/icons/src/gear.tsx | 7 +++-- 9 files changed, 99 insertions(+), 5 deletions(-) create mode 100644 packages/css-vars/LICENSE create mode 100644 packages/css-vars/README.md create mode 100644 packages/css-vars/package.json create mode 100644 packages/css-vars/src/index.ts create mode 100644 packages/css-vars/tsconfig.json diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx index b28ee96555..24b9f2be69 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx @@ -5,9 +5,12 @@ import { GearIcon, gearIconCssVars } from "@webstudio-is/icons"; import { AssetInfo } from "./asset-info"; import { PANEL_WIDTH } from "~/designer/shared/constants"; import { Asset } from "@webstudio-is/asset-uploader"; +import { cssVars } from "@webstudio-is/css-vars"; + +const triggerVisibilityVar = cssVars.define("trigger-visibility"); export const assetInfoTriggerCssVars = ({ show }: { show: boolean }) => ({ - "--asset-info-trigger-visibility": show ? "visible" : "hidden", + [triggerVisibilityVar]: show ? "visible" : "hidden", }); export const AssetInfoTrigger = ({ @@ -44,7 +47,7 @@ export const AssetInfoTrigger = ({ title="Options" onClick={() => setTooltipOpen(true)} css={{ - visibility: "var(--asset-info-trigger-visibility, hidden)", + visibility: cssVars.use(triggerVisibilityVar, "hidden"), position: "absolute", color: "$slate11", top: "$1", diff --git a/apps/designer/package.json b/apps/designer/package.json index 678b46e61d..c457ea1a8d 100644 --- a/apps/designer/package.json +++ b/apps/designer/package.json @@ -29,6 +29,7 @@ "@webstudio-is/icons": "*", "@webstudio-is/prisma-client": "*", "@webstudio-is/react-sdk": "*", + "@webstudio-is/css-vars": "*", "bson-objectid": "^2.0.2", "camelcase": "^6.3.0", "debug": "^4.3.4", diff --git a/packages/css-vars/LICENSE b/packages/css-vars/LICENSE new file mode 100644 index 0000000000..1f6edad9a7 --- /dev/null +++ b/packages/css-vars/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2022 Webstudio + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/css-vars/README.md b/packages/css-vars/README.md new file mode 100644 index 0000000000..a38dc09433 --- /dev/null +++ b/packages/css-vars/README.md @@ -0,0 +1,13 @@ +# CSS Vars utils + +This package helps you create uniquely named css variables as well as use them. + +## Example + +```ts +import { cssVars } from "css-vars"; + +const myVariable = cssVars.define("my-variable"); // --my-variable-0 + +cssVars.use(myVariable, "fallback"); // var(--my-variable-0, fallback) +``` diff --git a/packages/css-vars/package.json b/packages/css-vars/package.json new file mode 100644 index 0000000000..04de169738 --- /dev/null +++ b/packages/css-vars/package.json @@ -0,0 +1,29 @@ +{ + "name": "@webstudio-is/css-vars", + "version": "0.1.0", + "description": "CSS vars utility", + "author": "Webstudio ", + "homepage": "https://webstudio.is", + "scripts": { + "typecheck": "tsc --noEmit", + "checks": "yarn typecheck && yarn lint", + "dev": "tsup src/index.ts --format esm,cjs --watch --out-dir=lib", + "build": "rm -fr lib && tsc", + "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0" + }, + "dependencies": {}, + "devDependencies": { + "@webstudio-is/jest-config": "*", + "tsup": "^6.1.3", + "typescript": "^4.6.2" + }, + "main": "lib/index.js", + "types": "lib/index.d.ts", + "files": [ + "lib/*", + "README.md", + "!*.test.*" + ], + "license": "MIT", + "private": false +} diff --git a/packages/css-vars/src/index.ts b/packages/css-vars/src/index.ts new file mode 100644 index 0000000000..3244a60f2a --- /dev/null +++ b/packages/css-vars/src/index.ts @@ -0,0 +1,11 @@ +let counter = -1; + +const define = (name: string) => { + return `--${name}-${++counter}`; +}; + +const use = (variable: string, ...fallbacks: Array) => { + return `var(${variable}, ${fallbacks})`; +}; + +export const cssVars = { define, use }; diff --git a/packages/css-vars/tsconfig.json b/packages/css-vars/tsconfig.json new file mode 100644 index 0000000000..6b67ca9bbf --- /dev/null +++ b/packages/css-vars/tsconfig.json @@ -0,0 +1,12 @@ +// Extends can't use node's resolution rn https://github.com/dividab/tsconfig-paths/issues/209#issuecomment-1177261091 +{ + "extends": "../../node_modules/@webstudio-is/tsconfig/base.json", + "include": ["./src/**/*.ts"], + "compilerOptions": { + "module": "commonjs", + "target": "ES2020", + "strict": true, + "baseUrl": ".", + "outDir": "./lib" + } +} diff --git a/packages/icons/package.json b/packages/icons/package.json index e500e09f13..9ef9df0d2c 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -20,7 +20,8 @@ "react-dom": "^17.0.2" }, "dependencies": { - "@radix-ui/react-icons": "^1.1.0" + "@radix-ui/react-icons": "^1.1.0", + "@webstudio-is/css-vars": "*" }, "main": "lib/index.js", "types": "lib/index.d.ts", diff --git a/packages/icons/src/gear.tsx b/packages/icons/src/gear.tsx index 3609638bbe..f5f677fd5e 100644 --- a/packages/icons/src/gear.tsx +++ b/packages/icons/src/gear.tsx @@ -1,8 +1,11 @@ +import { cssVars } from "@webstudio-is/css-vars"; import * as React from "react"; import { IconProps } from "./types"; +const fillVar = cssVars.define("fill"); + export const gearIconCssVars = ({ fill }: { fill: string }) => ({ - "--gear-icon-fill": fill, + [fillVar]: fill, }); export const GearIcon = React.forwardRef( @@ -23,7 +26,7 @@ export const GearIcon = React.forwardRef( strokeWidth={1.25} strokeLinecap="round" strokeLinejoin="round" - style={{ fill: "var(--gear-icon-fill, none)" }} + style={{ fill: cssVars.use(fillVar, "none") }} />