happy-css-modules 3.0.0 → 3.0.1

package/src/locator/index.ts

@@ -4,14 +4,7 @@ import type { Resolver } from '../resolver/index.js';
 import { createDefaultResolver } from '../resolver/index.js';
 import { createDefaultTransformer, type Transformer } from '../transformer/index.js';
 import { unique, uniqueBy } from '../util.js';
-import {
-  getOriginalLocation,
-  generateLocalTokenNames,
-  parseAtImport,
-  type Location,
-  parseComposesDeclarationWithFromUrl,
-  collectNodes,
-} from './postcss.js';
+import { getOriginalLocation, generateLocalTokenNames, parseAtImport, type Location, collectNodes } from './postcss.js';
 
 export { collectNodes, type Location } from './postcss.js';
 
@@ -38,7 +31,7 @@ type CacheEntry = {
 
 /** The result of `Locator#load`. */
 export type LoadResult = {
-  /** The path of the file imported from the source file with `@import` or `composes`. */
+  /** The path of the file imported from the source file with `@import`. */
   dependencies: string[];
   /** The tokens exported by the source file. */
   tokens: Token[];
@@ -165,7 +158,7 @@ export class Locator {
 
     const tokens: Token[] = [];
 
-    const { atImports, classSelectors, composesDeclarations } = collectNodes(ast);
+    const { atImports, classSelectors } = collectNodes(ast);
 
     // Load imported sheets recursively.
     for (const atImport of atImports) {
@@ -195,20 +188,6 @@ export class Locator {
       });
     }
 
-    // Load imported tokens by the names recursively.
-    for (const composesDeclaration of composesDeclarations) {
-      const declarationDetail = parseComposesDeclarationWithFromUrl(composesDeclaration);
-      if (!declarationDetail) continue;
-      if (isIgnoredSpecifier(declarationDetail.from)) continue;
-      // eslint-disable-next-line no-await-in-loop
-      const from = await this.resolver(declarationDetail.from, { request: filePath });
-      // eslint-disable-next-line no-await-in-loop
-      const result = await this._load(from);
-      const externalTokens = result.tokens.filter((token) => declarationDetail.tokenNames.includes(token.name));
-      dependencies.push(from, ...result.dependencies);
-      tokens.push(...externalTokens);
-    }
-
     const result: LoadResult = {
       dependencies: unique(dependencies).filter((dep) => dep !== filePath),
       tokens: normalizeTokens(tokens),

package/src/locator/postcss.test.ts

@@ -1,18 +1,6 @@
 import dedent from 'dedent';
-import {
-  createRoot,
-  createClassSelectors,
-  createAtImports,
-  createComposesDeclarations,
-  createFixtures,
-} from '../test-util/util.js';
-import {
-  generateLocalTokenNames,
-  getOriginalLocation,
-  parseAtImport,
-  parseComposesDeclarationWithFromUrl,
-  collectNodes,
-} from './postcss.js';
+import { createRoot, createClassSelectors, createAtImports, createFixtures } from '../test-util/util.js';
+import { generateLocalTokenNames, getOriginalLocation, parseAtImport, collectNodes } from './postcss.js';
 
 describe('generateLocalTokenNames', () => {
   test('basic', async () => {
@@ -39,10 +27,6 @@ describe('generateLocalTokenNames', () => {
           .local_class_name_3 {}
         }
         :local(.local_class_name_4) {}
-        .composes_target {}
-        .composes {
-          composes: composes_target;
-        }
         `),
       ),
     ).toStrictEqual([
@@ -62,8 +46,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 () => {
@@ -236,23 +218,6 @@ describe('getOriginalLocation', () => {
       `{ 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(
@@ -280,23 +245,20 @@ test('collectNodes', () => {
     @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', () => {
@@ -315,32 +277,3 @@ test('parseAtImport', () => {
   expect(parseAtImport(atImports[3]!)).toBe('test.css');
   expect(parseAtImport(atImports[4]!)).toBe('test.css');
 });
-
-test('parseComposesDeclarationWithFromUrl', () => {
-  const composesDeclarations = createComposesDeclarations(
-    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")'. */
-    }
-    `),
-  );
-  expect(parseComposesDeclarationWithFromUrl(composesDeclarations[0]!)).toStrictEqual(undefined);
-  expect(parseComposesDeclarationWithFromUrl(composesDeclarations[1]!)).toStrictEqual(undefined);
-  expect(parseComposesDeclarationWithFromUrl(composesDeclarations[2]!)).toStrictEqual({
-    from: 'test.css',
-    tokenNames: ['a'],
-  });
-  expect(parseComposesDeclarationWithFromUrl(composesDeclarations[3]!)).toStrictEqual({
-    from: 'test.css',
-    tokenNames: ['a', 'b', 'c'],
-  });
-  expect(parseComposesDeclarationWithFromUrl(composesDeclarations[4]!)).toStrictEqual({
-    from: 'test.css',
-    tokenNames: ['from', 'from', 'from'], // do not deduplicate.
-  });
-});

package/src/locator/postcss.ts

@@ -54,9 +54,9 @@ export async function generateLocalTokenNames(ast: Root): Promise<string[]> {
     postcss
       .default()
       // postcss-modules collects tokens (i.e., includes external tokens) by following
-      // the dependencies specified in the @import and composes properties.
+      // the dependencies specified in the @import.
       // However, we do not want `generateLocalTokenNames` to return external tokens.
-      // So we remove the @import and composes properties beforehand.
+      // So we remove the @import beforehand.
       .use(removeDependenciesPlugin())
       .use(
         modules({
@@ -154,7 +154,6 @@ function isComposesDeclaration(node: Node): node is Declaration {
 type CollectNodesResult = {
   atImports: AtRule[];
   classSelectors: { rule: Rule; classSelector: ClassName }[];
-  composesDeclarations: Declaration[];
 };
 
 /**
@@ -164,7 +163,6 @@ type CollectNodesResult = {
 export function collectNodes(ast: Root): CollectNodesResult {
   const atImports: AtRule[] = [];
   const classSelectors: { rule: Rule; classSelector: ClassName }[] = [];
-  const composesDeclarations: Declaration[] = [];
   ast.walk((node) => {
     if (isAtImportNode(node)) {
       atImports.push(node);
@@ -183,11 +181,9 @@ export function collectNodes(ast: Root): CollectNodesResult {
           }
         });
       }).processSync(node);
-    } else if (isComposesDeclaration(node)) {
-      composesDeclarations.push(node);
     }
   });
-  return { atImports, classSelectors, composesDeclarations };
+  return { atImports, classSelectors };
 }
 
 /**
@@ -206,40 +202,3 @@ export function parseAtImport(atImport: AtRule): string | undefined {
   }
   return undefined;
 }
-
-/**
- * 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.
- */
-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) };
-}

package/src/test-util/util.ts

@@ -2,7 +2,7 @@ import { constants, mkdirSync, realpathSync, rmSync, writeFileSync } from 'fs';
 import { access } from 'fs/promises';
 import { tmpdir } from 'os';
 import { dirname, join, resolve } from 'path';
-import postcss, { type Root, type Rule, type AtRule, type Declaration } from 'postcss';
+import postcss, { type Root, type Rule, type AtRule } from 'postcss';
 import { type ClassName } from 'postcss-selector-parser';
 import { type Token, collectNodes, type Location } from '../locator/index.js';
 import { sleepSync } from '../util.js';
@@ -25,10 +25,6 @@ export function createClassSelectors(root: Root): { rule: Rule; classSelector: C
   return collectNodes(root).classSelectors;
 }
 
-export function createComposesDeclarations(root: Root): Declaration[] {
-  return collectNodes(root).composesDeclarations;
-}
-
 export function fakeToken(args: {
   name: Token['name'];
   originalLocations: { filePath?: Location['filePath']; start?: Location['start'] }[];

package/src/transformer/less-transformer.test.ts

@@ -23,8 +23,6 @@ test('handles less features', async () => {
         &_2 { dummy: ''; }
         .b_1();
         .b_2();
-        composes: a_1; // css module feature test (composes)
-        composes: c from './3.less'; // css module feature test (composes from other file)
       }
       `,
     '/test/2.less': dedent`
@@ -40,7 +38,7 @@ test('handles less features', async () => {
   // FIXME: The end position of 'a_2_2' is incorrect.
   expect(result).toMatchInlineSnapshot(`
     {
-      dependencies: ["<fixtures>/test/2.less", "<fixtures>/test/3.less"],
+      dependencies: ["<fixtures>/test/2.less"],
       tokens: [
         {
           name: "b_1",
@@ -72,12 +70,6 @@ test('handles less features', async () => {
             { filePath: "<fixtures>/test/1.less", start: { line: 7, column: 3 }, end: { line: 7, column: 8 } },
           ],
         },
-        {
-          name: "c",
-          originalLocations: [
-            { filePath: "<fixtures>/test/3.less", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
-          ],
-        },
       ],
     }
   `);

package/src/transformer/scss-transformer.test.ts

@@ -22,8 +22,6 @@ test('handles sass features', async () => {
         // sass feature test (nesting)
         .a_2_1 { dummy: ''; }
         &_2 { dummy: ''; }
-        composes: a_1; // css module feature test (composes)
-        composes: d from './4.scss'; // css module feature test (composes from other file)
       }
       `,
     '/test/2.scss': dedent`
@@ -46,7 +44,7 @@ test('handles sass features', async () => {
   // FIXME: The end position of 'a_2_2' is incorrect.
   expect(result).toMatchInlineSnapshot(`
     {
-      dependencies: ["<fixtures>/test/2.scss", "<fixtures>/test/3.scss", "<fixtures>/test/4.scss"],
+      dependencies: ["<fixtures>/test/2.scss", "<fixtures>/test/3.scss"],
       tokens: [
         {
           name: "b_1",
@@ -85,12 +83,6 @@ test('handles sass features', async () => {
             { filePath: "<fixtures>/test/1.scss", start: { line: 8, column: 3 }, end: { line: 8, column: 8 } },
           ],
         },
-        {
-          name: "d",
-          originalLocations: [
-            { filePath: "<fixtures>/test/4.scss", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
-          ],
-        },
       ],
     }
   `);

package/src/util.ts

@@ -66,7 +66,7 @@ export async function exists(path: string): Promise<boolean> {
 }
 
 export function isMatchByGlob(filePath: string, pattern: string, options: { cwd: string }): boolean {
-  return minimatch(filePath, join(options.cwd, pattern));
+  return minimatch(filePath, join(options.cwd, pattern), { windowsPathsNoEscape: true });
 }
 
 export function getPackageJson() {