feat(css-variables-output)prefix css variables with frame name

Author: timhettler

bin/frameworks/filesystem/getFileContentAndPath.ts

@@ -119,7 +119,7 @@ const getTokenString = (
   const constAssertion = format === 'ts' ? ' as const;' : '';
 
   if (format === 'json') return getTokenStringJSON(file);
-  if (format === 'css') return getTokenStringCSS(file);
+  if (format === 'css') return getTokenStringCSS(file, name);
   if (dataType === 'enum') return getTokenStringEnum(file, name, exportString);
   return getTokenStringJS(file, name, exportString, constAssertion);
 };
@@ -134,13 +134,13 @@ function getTokenStringJSON(file: string | ProcessedToken) {
 /**
  * @description Return CSS variables token string
  */
-function getTokenStringCSS(file: string | ProcessedToken) {
+function getTokenStringCSS(file: string | ProcessedToken, name: string) {
   const contents: any = file;
   let css = ':root {\n';
 
   for (const key in contents) {
     const value = contents[key];
-    css += `  --${key}: ${value};\n`;
+    css += `  --${name}-${key}: ${value};\n`;
   }
 
   css += '}\n';

testdata/getFileContentAndPathOperation.ts

@@ -283,22 +283,22 @@ enum colors {
 export default colors;`;
 
 export const expectedCss = `:root {
-  --green3: rgba(111, 207, 151, 1);
-  --green2: rgba(39, 174, 96, 1);
-  --green1: rgba(33, 150, 83, 1);
-  --blue3: rgba(86, 204, 242, 1);
-  --blue2: rgba(45, 156, 219, 1);
-  --blue1: rgba(47, 128, 237, 1);
-  --yellow: rgba(242, 201, 76, 1);
-  --orange: rgba(242, 153, 74, 1);
-  --red: rgba(235, 87, 87, 1);
-  --neon: rgba(228, 255, 193, 1);
-  --gray5: rgba(242, 242, 242, 1);
-  --gray4: rgba(224, 224, 224, 1);
-  --gray3: rgba(189, 189, 189, 1);
-  --gray2: rgba(130, 130, 130, 1);
-  --gray1: rgba(79, 79, 79, 1);
-  --white: rgba(255, 255, 255, 1);
-  --black: rgba(51, 51, 51, 1);
+  --colors-green3: rgba(111, 207, 151, 1);
+  --colors-green2: rgba(39, 174, 96, 1);
+  --colors-green1: rgba(33, 150, 83, 1);
+  --colors-blue3: rgba(86, 204, 242, 1);
+  --colors-blue2: rgba(45, 156, 219, 1);
+  --colors-blue1: rgba(47, 128, 237, 1);
+  --colors-yellow: rgba(242, 201, 76, 1);
+  --colors-orange: rgba(242, 153, 74, 1);
+  --colors-red: rgba(235, 87, 87, 1);
+  --colors-neon: rgba(228, 255, 193, 1);
+  --colors-gray5: rgba(242, 242, 242, 1);
+  --colors-gray4: rgba(224, 224, 224, 1);
+  --colors-gray3: rgba(189, 189, 189, 1);
+  --colors-gray2: rgba(130, 130, 130, 1);
+  --colors-gray1: rgba(79, 79, 79, 1);
+  --colors-white: rgba(255, 255, 255, 1);
+  --colors-black: rgba(51, 51, 51, 1);
 }
 `;