happy-css-modules 3.0.0 → 3.1.0

package/src/locator/postcss.test.ts

@@ -1,17 +1,19 @@
 import dedent from 'dedent';
+import type { AtRule } from 'postcss';
 import {
   createRoot,
   createClassSelectors,
   createAtImports,
-  createComposesDeclarations,
   createFixtures,
+  createAtValues,
 } from '../test-util/util.js';
 import {
   generateLocalTokenNames,
-  getOriginalLocation,
+  getOriginalLocationOfClassSelector,
   parseAtImport,
-  parseComposesDeclarationWithFromUrl,
+  parseAtValue,
   collectNodes,
+  getOriginalLocationOfAtValue,
 } from './postcss.js';
 
 describe('generateLocalTokenNames', () => {
@@ -39,13 +41,11 @@ describe('generateLocalTokenNames', () => {
           .local_class_name_3 {}
         }
         :local(.local_class_name_4) {}
-        .composes_target {}
-        .composes {
-          composes: composes_target;
-        }
+        @value value: #BF4040;
         `),
       ),
     ).toStrictEqual([
+      'value',
       'basic',
       'cascading',
       'pseudo_class_1',
@@ -62,8 +62,6 @@ describe('generateLocalTokenNames', () => {
       'local_class_name_2',
       'local_class_name_3',
       'local_class_name_4',
-      'composes_target',
-      'composes',
     ]);
   });
   test('does not track styles imported by @import in other file because it is not a local token', async () => {
@@ -81,14 +79,18 @@ describe('generateLocalTokenNames', () => {
     ).toStrictEqual([]);
   });
   test('does not track styles imported by @value in other file because it is not a local token', async () => {
-    createFixtures({});
+    createFixtures({
+      '/test/1.css': dedent`
+      .a {}
+      `,
+    });
     expect(
       await generateLocalTokenNames(
         createRoot(`
-        @value something from "/test/1.css";
+        @value a from "/test/1.css";
         `),
       ),
-    ).toStrictEqual([]);
+    ).toStrictEqual(['a']);
   });
   test('does not track styles imported by composes in other file because it is not a local token', async () => {
     createFixtures({
@@ -108,14 +110,14 @@ describe('generateLocalTokenNames', () => {
   });
 });
 
-describe('getOriginalLocation', () => {
+describe('getOriginalLocationOfClassSelector', () => {
   test('basic', () => {
     const [basic] = createClassSelectors(
       createRoot(dedent`
       .basic {}
       `),
     );
-    expect(getOriginalLocation(basic!.rule, basic!.classSelector)).toMatchInlineSnapshot(
+    expect(getOriginalLocationOfClassSelector(basic!.rule, basic!.classSelector)).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 1, column: 1 }, end: { line: 1, column: 6 } }`,
     );
   });
@@ -127,10 +129,10 @@ describe('getOriginalLocation', () => {
       .cascading {}
       `),
     );
-    expect(getOriginalLocation(cascading_1!.rule, cascading_1!.classSelector)).toMatchInlineSnapshot(
+    expect(getOriginalLocationOfClassSelector(cascading_1!.rule, cascading_1!.classSelector)).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 1, column: 1 }, end: { line: 1, column: 10 } }`,
     );
-    expect(getOriginalLocation(cascading_2!.rule, cascading_2!.classSelector)).toMatchInlineSnapshot(
+    expect(getOriginalLocationOfClassSelector(cascading_2!.rule, cascading_2!.classSelector)).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 2, column: 1 }, end: { line: 2, column: 10 } }`,
     );
   });
@@ -143,13 +145,19 @@ describe('getOriginalLocation', () => {
       :not(.pseudo_class_3) {}
       `),
     );
-    expect(getOriginalLocation(pseudo_class_1!.rule, pseudo_class_1!.classSelector)).toMatchInlineSnapshot(
+    expect(
+      getOriginalLocationOfClassSelector(pseudo_class_1!.rule, pseudo_class_1!.classSelector),
+    ).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 1, column: 1 }, end: { line: 1, column: 15 } }`,
     );
-    expect(getOriginalLocation(pseudo_class_2!.rule, pseudo_class_2!.classSelector)).toMatchInlineSnapshot(
+    expect(
+      getOriginalLocationOfClassSelector(pseudo_class_2!.rule, pseudo_class_2!.classSelector),
+    ).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 2, column: 1 }, end: { line: 2, column: 15 } }`,
     );
-    expect(getOriginalLocation(pseudo_class_3!.rule, pseudo_class_3!.classSelector)).toMatchInlineSnapshot(
+    expect(
+      getOriginalLocationOfClassSelector(pseudo_class_3!.rule, pseudo_class_3!.classSelector),
+    ).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 3, column: 6 }, end: { line: 3, column: 20 } }`,
     );
   });
@@ -160,10 +168,14 @@ describe('getOriginalLocation', () => {
       .multiple_selector_1.multiple_selector_2 {}
       `),
     );
-    expect(getOriginalLocation(multiple_selector_1!.rule, multiple_selector_1!.classSelector)).toMatchInlineSnapshot(
+    expect(
+      getOriginalLocationOfClassSelector(multiple_selector_1!.rule, multiple_selector_1!.classSelector),
+    ).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 1, column: 1 }, end: { line: 1, column: 20 } }`,
     );
-    expect(getOriginalLocation(multiple_selector_2!.rule, multiple_selector_2!.classSelector)).toMatchInlineSnapshot(
+    expect(
+      getOriginalLocationOfClassSelector(multiple_selector_2!.rule, multiple_selector_2!.classSelector),
+    ).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 1, column: 21 }, end: { line: 1, column: 40 } }`,
     );
   });
@@ -175,10 +187,10 @@ describe('getOriginalLocation', () => {
       .combinator_1 + .combinator_2 {}
       `),
     );
-    expect(getOriginalLocation(combinator_1!.rule, combinator_1!.classSelector)).toMatchInlineSnapshot(
+    expect(getOriginalLocationOfClassSelector(combinator_1!.rule, combinator_1!.classSelector)).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 1, column: 1 }, end: { line: 1, column: 13 } }`,
     );
-    expect(getOriginalLocation(combinator_2!.rule, combinator_2!.classSelector)).toMatchInlineSnapshot(
+    expect(getOriginalLocationOfClassSelector(combinator_2!.rule, combinator_2!.classSelector)).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 1, column: 17 }, end: { line: 1, column: 29 } }`,
     );
   });
@@ -193,7 +205,7 @@ describe('getOriginalLocation', () => {
       }
       `),
     );
-    expect(getOriginalLocation(at_rule!.rule, at_rule!.classSelector)).toMatchInlineSnapshot(
+    expect(getOriginalLocationOfClassSelector(at_rule!.rule, at_rule!.classSelector)).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 3, column: 5 }, end: { line: 3, column: 12 } }`,
     );
   });
@@ -204,10 +216,14 @@ describe('getOriginalLocation', () => {
       .selector_list_1, .selector_list_2 {}
       `),
     );
-    expect(getOriginalLocation(selector_list_1!.rule, selector_list_1!.classSelector)).toMatchInlineSnapshot(
+    expect(
+      getOriginalLocationOfClassSelector(selector_list_1!.rule, selector_list_1!.classSelector),
+    ).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 1, column: 1 }, end: { line: 1, column: 16 } }`,
     );
-    expect(getOriginalLocation(selector_list_2!.rule, selector_list_2!.classSelector)).toMatchInlineSnapshot(
+    expect(
+      getOriginalLocationOfClassSelector(selector_list_2!.rule, selector_list_2!.classSelector),
+    ).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 1, column: 19 }, end: { line: 1, column: 34 } }`,
     );
   });
@@ -223,36 +239,27 @@ describe('getOriginalLocation', () => {
       :local(.local_class_name_4) {}
       `),
     );
-    expect(getOriginalLocation(local_class_name_1!.rule, local_class_name_1!.classSelector)).toMatchInlineSnapshot(
+    expect(
+      getOriginalLocationOfClassSelector(local_class_name_1!.rule, local_class_name_1!.classSelector),
+    ).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 1, column: 8 }, end: { line: 1, column: 26 } }`,
     );
-    expect(getOriginalLocation(local_class_name_2!.rule, local_class_name_2!.classSelector)).toMatchInlineSnapshot(
+    expect(
+      getOriginalLocationOfClassSelector(local_class_name_2!.rule, local_class_name_2!.classSelector),
+    ).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 3, column: 3 }, end: { line: 3, column: 21 } }`,
     );
-    expect(getOriginalLocation(local_class_name_3!.rule, local_class_name_3!.classSelector)).toMatchInlineSnapshot(
+    expect(
+      getOriginalLocationOfClassSelector(local_class_name_3!.rule, local_class_name_3!.classSelector),
+    ).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 4, column: 3 }, end: { line: 4, column: 21 } }`,
     );
-    expect(getOriginalLocation(local_class_name_4!.rule, local_class_name_4!.classSelector)).toMatchInlineSnapshot(
+    expect(
+      getOriginalLocationOfClassSelector(local_class_name_4!.rule, local_class_name_4!.classSelector),
+    ).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 6, column: 8 }, end: { line: 6, column: 26 } }`,
     );
   });
-  test('composes', () => {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    const [composes_target, composes] = createClassSelectors(
-      createRoot(dedent`
-      .composes_target {}
-      .composes {
-        composes: composes_target;
-      }
-      `),
-    );
-    expect(getOriginalLocation(composes_target!.rule, composes_target!.classSelector)).toMatchInlineSnapshot(
-      `{ filePath: "/test/test.css", start: { line: 1, column: 1 }, end: { line: 1, column: 16 } }`,
-    );
-    expect(getOriginalLocation(composes!.rule, composes!.classSelector)).toMatchInlineSnapshot(
-      `{ filePath: "/test/test.css", start: { line: 2, column: 1 }, end: { line: 2, column: 9 } }`,
-    );
-  });
   test('with_newline', () => {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const [with_newline_1, with_newline_2, with_newline_3] = createClassSelectors(
@@ -262,41 +269,63 @@ describe('getOriginalLocation', () => {
         + .with_newline_3, {}
       `),
     );
-    expect(getOriginalLocation(with_newline_1!.rule, with_newline_1!.classSelector)).toMatchInlineSnapshot(
+    expect(
+      getOriginalLocationOfClassSelector(with_newline_1!.rule, with_newline_1!.classSelector),
+    ).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 1, column: 1 }, end: { line: 1, column: 15 } }`,
     );
-    expect(getOriginalLocation(with_newline_2!.rule, with_newline_2!.classSelector)).toMatchInlineSnapshot(
+    expect(
+      getOriginalLocationOfClassSelector(with_newline_2!.rule, with_newline_2!.classSelector),
+    ).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 2, column: 1 }, end: { line: 2, column: 15 } }`,
     );
 
-    expect(getOriginalLocation(with_newline_3!.rule, with_newline_3!.classSelector)).toMatchInlineSnapshot(
+    expect(
+      getOriginalLocationOfClassSelector(with_newline_3!.rule, with_newline_3!.classSelector),
+    ).toMatchInlineSnapshot(
       `{ filePath: "/test/test.css", start: { line: 3, column: 5 }, end: { line: 3, column: 19 } }`,
     );
   });
 });
 
+test('getOriginalLocationOfAtValue', () => {
+  function tryGetOriginalLocationOfAtValue(atValue: AtRule) {
+    const parsed = parseAtValue(atValue);
+    if (parsed.type === 'valueDeclaration') {
+      return getOriginalLocationOfAtValue(atValue, parsed);
+    } else {
+      throw new Error('Unexpected type');
+    }
+  }
+  const [basic] = createAtValues(
+    createRoot(dedent`
+    @value basic: #000;
+    `),
+  );
+  expect(tryGetOriginalLocationOfAtValue(basic!)).toMatchInlineSnapshot(
+    `{ filePath: "/test/test.css", start: { line: 1, column: 8 }, end: { line: 1, column: 13 } }`,
+  );
+});
+
 test('collectNodes', () => {
   const ast = createRoot(dedent`
     @import;
     @import "test.css";
     @ignored;
-    .a { ignored: "ignored"; composes: a; }
-    .b { ignored: "ignored"; composes: b; }
+    .a { ignored: "ignored"; }
+    .b { ignored: "ignored"; }
     `);
 
-  const { atImports, classSelectors, composesDeclarations } = collectNodes(ast);
+  const { atImports, classSelectors } = collectNodes(ast);
 
   expect(atImports).toHaveLength(2);
   expect(atImports[0]!.toString()).toEqual('@import');
   expect(atImports[1]!.toString()).toEqual('@import "test.css"');
   expect(classSelectors).toHaveLength(2);
-  expect(classSelectors[0]!.rule.toString()).toEqual('.a { ignored: "ignored"; composes: a; }');
+  expect(classSelectors[0]!.rule.toString()).toEqual('.a { ignored: "ignored"; }');
   expect(classSelectors[0]!.classSelector.toString()).toEqual('.a');
-  expect(classSelectors[1]!.rule.toString()).toEqual('.b { ignored: "ignored"; composes: b; }');
+  expect(classSelectors[1]!.rule.toString()).toEqual('.b { ignored: "ignored"; }');
   expect(classSelectors[1]!.classSelector.toString()).toEqual('.b');
-  expect(composesDeclarations).toHaveLength(2);
-  expect(composesDeclarations[0]!.toString()).toEqual('composes: a');
-  expect(composesDeclarations[1]!.toString()).toEqual('composes: b');
 });
 
 test('parseAtImport', () => {
@@ -316,31 +345,44 @@ test('parseAtImport', () => {
   expect(parseAtImport(atImports[4]!)).toBe('test.css');
 });
 
-test('parseComposesDeclarationWithFromUrl', () => {
-  const composesDeclarations = createComposesDeclarations(
+test('parseAtValue', () => {
+  const atValues = createAtValues(
     createRoot(dedent`
-    .a {
-      composes: a;
-      composes: a b c;
-      composes: a from "test.css";
-      composes: a b c from "test.css";
-      composes: from from from from "test.css";
-      /* NOTE: CSS Modules do not support '... from url("test.css")'. */
-    }
+    @value basic: #000;
+    @value withoutColon #000;
+    @value empty:;
+    @value comment:/* comment */;
+    @value complex: (max-width: 599px);
+    @value import from "test.css";
+    @value import1, import2 from "test.css";
+    @value import as alias from "test.css";
+    /*
+     * NOTE: happy-css-modules intentionally does not support module specifier as variable.
+     * e.g. \`@value d, e from moduleName;\`
+     */
     `),
   );
-  expect(parseComposesDeclarationWithFromUrl(composesDeclarations[0]!)).toStrictEqual(undefined);
-  expect(parseComposesDeclarationWithFromUrl(composesDeclarations[1]!)).toStrictEqual(undefined);
-  expect(parseComposesDeclarationWithFromUrl(composesDeclarations[2]!)).toStrictEqual({
+  expect(parseAtValue(atValues[0]!)).toStrictEqual({ type: 'valueDeclaration', tokenName: 'basic' });
+  expect(parseAtValue(atValues[1]!)).toStrictEqual({ type: 'valueDeclaration', tokenName: 'withoutColon' });
+  expect(parseAtValue(atValues[2]!)).toStrictEqual({ type: 'valueDeclaration', tokenName: 'empty' });
+  expect(parseAtValue(atValues[3]!)).toStrictEqual({ type: 'valueDeclaration', tokenName: 'comment' });
+  expect(parseAtValue(atValues[4]!)).toStrictEqual({ type: 'valueDeclaration', tokenName: 'complex' });
+  expect(parseAtValue(atValues[5]!)).toStrictEqual({
+    type: 'valueImportDeclaration',
+    imports: [{ importedTokenName: 'import', localTokenName: 'import' }],
     from: 'test.css',
-    tokenNames: ['a'],
   });
-  expect(parseComposesDeclarationWithFromUrl(composesDeclarations[3]!)).toStrictEqual({
+  expect(parseAtValue(atValues[6]!)).toStrictEqual({
+    type: 'valueImportDeclaration',
+    imports: [
+      { importedTokenName: 'import1', localTokenName: 'import1' },
+      { importedTokenName: 'import2', localTokenName: 'import2' },
+    ],
     from: 'test.css',
-    tokenNames: ['a', 'b', 'c'],
   });
-  expect(parseComposesDeclarationWithFromUrl(composesDeclarations[4]!)).toStrictEqual({
+  expect(parseAtValue(atValues[7]!)).toStrictEqual({
+    type: 'valueImportDeclaration',
+    imports: [{ importedTokenName: 'import', localTokenName: 'alias' }],
     from: 'test.css',
-    tokenNames: ['from', 'from', 'from'], // do not deduplicate.
   });
 });

package/src/locator/postcss.ts

@@ -1,4 +1,4 @@
-import postcss, { type Rule, type AtRule, type Root, type Node, type Declaration, type Plugin } from 'postcss';
+import postcss, { type Rule, type AtRule, type Root, type Node } from 'postcss';
 import modules from 'postcss-modules';
 import selectorParser, { type ClassName } from 'postcss-selector-parser';
 import valueParser from 'postcss-value-parser';
@@ -26,40 +26,27 @@ export type Location =
       end: undefined;
     };
 
-function removeDependenciesPlugin(): Plugin {
-  return {
-    postcssPlugin: 'remove-dependencies',
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    AtRule(atRule) {
-      if (isAtImportNode(atRule) || isAtValueNode(atRule)) {
-        atRule.remove();
-      }
-    },
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    Declaration(declaration) {
-      if (isComposesDeclaration(declaration)) {
-        declaration.remove();
-      }
-    },
-  };
-}
-
 /**
  * Traverses a local token from the AST and returns its name.
  * @param ast The AST to traverse.
  * @returns The name of the local token.
  */
 export async function generateLocalTokenNames(ast: Root): Promise<string[]> {
+  class EmptyLoader {
+    async fetch(_file: string, _relativeTo: string, _depTrace: string): Promise<{ [key: string]: string }> {
+      // Return an empty object because we do not want to load external tokens in `generateLocalTokenNames`.
+      return Promise.resolve({});
+    }
+  }
   return new Promise((resolve, reject) => {
     postcss
       .default()
-      // postcss-modules collects tokens (i.e., includes external tokens) by following
-      // the dependencies specified in the @import and composes properties.
-      // However, we do not want `generateLocalTokenNames` to return external tokens.
-      // So we remove the @import and composes properties beforehand.
-      .use(removeDependenciesPlugin())
       .use(
         modules({
+          // `@import`, `@value`, and `composes` can read tokens from external files.
+          // However, we want to collect only local tokens. So we will fake that
+          // an empty token is exported from the external file.
+          Loader: EmptyLoader,
           getJSON: (_cssFileName, json) => {
             resolve(Object.keys(json));
           },
@@ -72,12 +59,12 @@ export async function generateLocalTokenNames(ast: Root): Promise<string[]> {
 }
 
 /**
- * Get the token's location on the source file.
+ * Get the original location of the class selector.
  * @param rule The rule node that contains the token.
  * @param classSelector The class selector node that contains the token.
- * @returns The token's location on the source file.
+ * @returns The original location of the class selector.
  */
-export function getOriginalLocation(rule: Rule, classSelector: ClassName): Location {
+export function getOriginalLocationOfClassSelector(rule: Rule, classSelector: ClassName): Location {
   // The node derived from `postcss.parse` always has `source` property. Therefore, this line is unreachable.
   if (rule.source === undefined || classSelector.source === undefined) throw new Error('Node#source is undefined');
   // The node derived from `postcss.parse` always has `start` and `end` property. Therefore, this line is unreachable.
@@ -127,6 +114,32 @@ export function getOriginalLocation(rule: Rule, classSelector: ClassName): Locat
   };
 }
 
+/**
+ * Get the original location of `@value`.
+ * @param atValue The `@value` rule.
+ * @returns The location of the `@value` rule.
+ */
+export function getOriginalLocationOfAtValue(atValue: AtRule, valueDeclaration: ValueDeclaration): Location {
+  // The node derived from `postcss.parse` always has `source` property. Therefore, this line is unreachable.
+  if (atValue.source === undefined) throw new Error('Node#source is undefined');
+  // The node derived from `postcss.parse` always has `start` and `end` property. Therefore, this line is unreachable.
+  if (atValue.source.start === undefined) throw new Error('Node#start is undefined');
+  if (atValue.source.end === undefined) throw new Error('Node#end is undefined');
+  if (atValue.source.input.file === undefined) throw new Error('Node#input.file is undefined');
+
+  return {
+    filePath: atValue.source.input.file,
+    start: {
+      line: atValue.source.start.line,
+      column: atValue.source.start.column + 7, // Add for `@value `
+    },
+    end: {
+      line: atValue.source.start.line,
+      column: atValue.source.start.column + 7 + valueDeclaration.tokenName.length, // Add for `@value ` and token name
+    },
+  };
+}
+
 function isAtRuleNode(node: Node): node is AtRule {
   return node.type === 'atrule';
 }
@@ -143,18 +156,10 @@ function isRuleNode(node: Node): node is Rule {
   return node.type === 'rule';
 }
 
-function isDeclaration(node: Node): node is Declaration {
-  return node.type === 'decl';
-}
-
-function isComposesDeclaration(node: Node): node is Declaration {
-  return isDeclaration(node) && node.prop === 'composes';
-}
-
 type CollectNodesResult = {
   atImports: AtRule[];
+  atValues: AtRule[];
   classSelectors: { rule: Rule; classSelector: ClassName }[];
-  composesDeclarations: Declaration[];
 };
 
 /**
@@ -163,11 +168,13 @@ 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"
@@ -183,11 +190,9 @@ export function collectNodes(ast: Root): CollectNodesResult {
           }
         });
       }).processSync(node);
-    } else if (isComposesDeclaration(node)) {
-      composesDeclarations.push(node);
     }
   });
-  return { atImports, classSelectors, composesDeclarations };
+  return { atImports, atValues, classSelectors };
 }
 
 /**
@@ -207,39 +212,77 @@ export function parseAtImport(atImport: AtRule): string | undefined {
   return undefined;
 }
 
+type ValueDeclaration = {
+  type: 'valueDeclaration';
+  tokenName: string;
+  // value: string; // unneeded
+};
+type ValueImportDeclaration = {
+  type: 'valueImportDeclaration';
+  imports: { importedTokenName: string; localTokenName: string }[];
+  from: string;
+};
+
+type ParsedAtValue = ValueDeclaration | ValueImportDeclaration;
+
+const matchImports = /^(.+?|\([\s\S]+?\))\s+from\s+("[^"]*"|'[^']*'|[\w-]+)$/u;
+const matchValueDefinition = /(?:\s+|^)([\w-]+):?(.*?)$/u;
+const matchImport = /^([\w-]+)(?:\s+as\s+([\w-]+))?/u;
+
 /**
- * Parse `composes` declaration with `from <url>`.
- * If the declaration is not found or do not have `from <url>`, return `undefined`.
- * @param composesDeclaration The `composes` declaration to parse.
- * @returns The information of the declaration.
+ * Parse the `@value` rule.
+ * Forked from https://github.com/css-modules/postcss-modules-values/blob/v4.0.0/src/index.js.
+ *
+ * @license
+ * ISC License (ISC)
+ * Copyright (c) 2015, Glen Maddern
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted,
+ * provided that the above copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING
+ * ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+ * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS,
+ * WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH
+ * THE USE OR PERFORMANCE OF THIS SOFTWARE.
  */
-export function parseComposesDeclarationWithFromUrl(
-  composesDeclaration: Declaration,
-): { from: string; tokenNames: string[] } | undefined {
-  // NOTE: `composes` property syntax is...
-  // - syntax: `composes: <class-name> [...<class-name>] [from <url>];`
-  // - variables:
-  //   - `<class-name>`: `<sting>`
-  //   - `<url>`: `<string>`
-  // - ref:
-  //   - https://github.com/css-modules/css-modules#composition
-  //   - https://github.com/css-modules/css-modules#composing-from-other-files
-  //   - https://github.com/css-modules/postcss-modules-extract-imports#specification
-
-  const nodes = valueParser(composesDeclaration.value).nodes;
-  if (nodes.length < 5) return undefined;
-
-  const classNamesOrSpaces = nodes.slice(0, -3);
-  const [from, , url] = nodes.slice(-3);
-
-  const classNames = classNamesOrSpaces.filter((node) => node.type === 'word');
-
-  // validate nodes
-  if (from === undefined) return undefined;
-  if (from.type !== 'word' || from.value !== 'from') return undefined;
-  if (url === undefined) return undefined;
-  if (url.type !== 'string') return undefined;
-  if (classNames.length === 0) return undefined;
-
-  return { from: url.value, tokenNames: classNames.map((node) => node.value) };
+export function parseAtValue(atValue: AtRule): ParsedAtValue {
+  const matchesForImports = atValue.params.match(matchImports);
+  if (matchesForImports) {
+    const [, aliases, path] = matchesForImports;
+
+    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+    if (aliases === undefined || path === undefined) throw new Error(`unreachable`);
+
+    const imports = aliases
+      .replace(/^\(\s*([\s\S]+)\s*\)$/u, '$1')
+      .split(/\s*,\s*/u)
+      .map((alias) => {
+        const tokens = matchImport.exec(alias);
+
+        if (tokens) {
+          const [, theirName, myName] = tokens;
+          if (theirName === undefined) throw new Error(`unreachable`);
+          return { importedTokenName: theirName, localTokenName: myName ?? theirName };
+        } else {
+          throw new Error(`@import statement "${alias}" is invalid!`);
+        }
+      });
+
+    // Remove quotes from the path.
+    // NOTE: This is a restriction unique to "happy-css-modules" and not a specification of CSS Modules.
+    const normalizedPath = path.replace(/^['"]|['"]$/gu, '');
+
+    return { type: 'valueImportDeclaration', imports, from: normalizedPath };
+  }
+
+  const matchesForValueDefinitions = `${atValue.params}${atValue.raws.between!}`.match(matchValueDefinition);
+  if (matchesForValueDefinitions) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [, key, value] = matchesForValueDefinitions;
+    if (key === undefined) throw new Error(`unreachable`);
+    return { type: 'valueDeclaration', tokenName: key };
+  }
+  // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+  throw new Error(`@value statement "${atValue.source!}" is invalid!`);
 }