create css-vars package and use it

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",

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",

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.

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)
+```

packages/css-vars/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@webstudio-is/css-vars",
+  "version": "0.1.0",
+  "description": "CSS vars utility",
+  "author": "Webstudio <github@webstudio.is>",
+  "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
+}

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<string>) => {
+  return `var(${variable}, ${fallbacks})`;
+};
+
+export const cssVars = { define, use };

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"
+  }
+}

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",

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<SVGSVGElement, IconProps>(
@@ -23,7 +26,7 @@ export const GearIcon = React.forwardRef<SVGSVGElement, IconProps>(
           strokeWidth={1.25}
           strokeLinecap="round"
           strokeLinejoin="round"
-          style={{ fill: "var(--gear-icon-fill, none)" }}
+          style={{ fill: cssVars.use(fillVar, "none") }}
         />
         <circle
           cx={8}