support @value

Co-authored-by: "Sam A. Horvath-Hunt" <[email protected]>
mizdra · May 18, 2024 · 202546c · 202546c
1 parent 02312ed
commit 202546c
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/packages/happy-css-modules/src/locator/index.ts b/packages/happy-css-modules/src/locator/index.ts
@@ -165,7 +165,7 @@ export class Locator {
 
     const tokens: Token[] = [];
 
-    const { atImports, classSelectors, composesDeclarations } = collectNodes(ast);
+    const { atImports, atValues, classSelectors, composesDeclarations } = collectNodes(ast);
 
     // Load imported sheets recursively.
     for (const atImport of atImports) {
@@ -209,6 +209,17 @@ export class Locator {
       tokens.push(...externalTokens);
     }
 
+    for (const atValue of atValues) {
+      const name = atValue.params.slice(0, atValue.params.indexOf(':'));
+      if (!localTokenNames.includes(name)) continue;
+
+      tokens.push({
+        name,
+        // TODO: `getOriginalLocation` expects a `ClassName`.
+        originalLocations: [],
+      });
+    }
+
     const result: LoadResult = {
       dependencies: unique(dependencies).filter((dep) => dep !== filePath),
       tokens: normalizeTokens(tokens),

diff --git a/packages/happy-css-modules/src/locator/postcss.test.ts b/packages/happy-css-modules/src/locator/postcss.test.ts
@@ -43,9 +43,11 @@ describe('generateLocalTokenNames', () => {
         .composes {
           composes: composes_target;
         }
+        @value atvalue: foo;
         `),
       ),
     ).toStrictEqual([
+      'atvalue',
       'basic',
       'cascading',
       'pseudo_class_1',

diff --git a/packages/happy-css-modules/src/locator/postcss.ts b/packages/happy-css-modules/src/locator/postcss.ts
@@ -31,7 +31,7 @@ function removeDependenciesPlugin(): Plugin {
     postcssPlugin: 'remove-dependencies',
     // eslint-disable-next-line @typescript-eslint/naming-convention
     AtRule(atRule) {
-      if (isAtImportNode(atRule) || isAtValueNode(atRule)) {
+      if (isAtImportNode(atRule) || isAtValueImport(atRule)) {
         atRule.remove();
       }
     },
@@ -139,6 +139,10 @@ function isAtValueNode(node: Node): node is AtRule {
   return isAtRuleNode(node) && node.name === 'value';
 }
 
+function isAtValueImport(node: Node): node is AtRule {
+  return isAtValueNode(node) && !node.params.includes(':');
+}
+
 function isRuleNode(node: Node): node is Rule {
   return node.type === 'rule';
 }
@@ -153,6 +157,7 @@ function isComposesDeclaration(node: Node): node is Declaration {
 
 type CollectNodesResult = {
   atImports: AtRule[];
+  atValues: AtRule[];
   classSelectors: { rule: Rule; classSelector: ClassName }[];
   composesDeclarations: Declaration[];
 };
@@ -163,11 +168,14 @@ type CollectNodesResult = {
  */
 export function collectNodes(ast: Root): CollectNodesResult {
   const atImports: AtRule[] = [];
+  const atValues: AtRule[] = [];
   const classSelectors: { rule: Rule; classSelector: ClassName }[] = [];
   const composesDeclarations: Declaration[] = [];
   ast.walk((node) => {
     if (isAtImportNode(node)) {
       atImports.push(node);
+    } else if (isAtValueNode(node)) {
+      atValues.push(node);
     } else if (isRuleNode(node)) {
       // In `rule.selector` comes the following string:
       // 1. ".foo"
@@ -187,7 +195,7 @@ export function collectNodes(ast: Root): CollectNodesResult {
       composesDeclarations.push(node);
     }
   });
-  return { atImports, classSelectors, composesDeclarations };
+  return { atImports, atValues, classSelectors, composesDeclarations };
 }
 
 /**