fix: correct CSS variable names with no sets present

.gitignore

@@ -102,3 +102,6 @@ dist
 
 # TernJS port file
 .tern-port
+
+# Test output
+tests/__output

lib/css-sets-formatter.js

@@ -29,6 +29,9 @@ const formatter = ({ dictionary, platform, file, options }) => {
         })
       );
     }
+    else {
+      name = name.concat(token.path);
+    }
     resultAr.push(
       `  --${name.join("-")}: ${valueFormatter(token, platform, dictionary)};`
     );

tests/css-formatter.test.js

@@ -91,6 +91,7 @@ test("tokens without sets should still have names", () => {
   config.platforms.CSS.files[0].filter = (token) => {
     return !("sets" in token.attributes);
   };
+  delete config.platforms.CSS.files[0].options.sets;
   const sd = StyleDictionary.extend(config);
   sd.buildAllPlatforms();
   const result = fs.readFileSync(

tests/expected/multi-ref.css

@@ -1,5 +1,5 @@
 :root {
-  --background-color: var(--color-gray-100);
-  --light-gray: #EEEEEE;
-  --dark-gray: #111111;
+  --component-background-color: var(--color-gray-100);
+  --static-colors-light-gray: #EEEEEE;
+  --static-colors-dark-gray: #111111;
 }