happy-css-modules 0.4.0 → 0.5.0

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

@@ -0,0 +1,188 @@
+import { randomUUID } from 'node:crypto';
+import { createRequire } from 'node:module';
+import { jest } from '@jest/globals';
+import dedent from 'dedent';
+import { Loader } from '../loader/index.js';
+import { createFixtures, getFixturePath } from '../test/util.js';
+import { createPostcssTransformer } from './postcss-transformer.js';
+
+const cwd = getFixturePath('/');
+const require = createRequire(import.meta.url);
+
+// NOTE: postcss-load-config caches the configuration file using the path as a key.
+// Therefore, change the path for each test case so that a new configuration file is always used.
+
+test('handles postcss features', async () => {
+  const uuid = randomUUID();
+  const loader = new Loader({
+    transformer: createPostcssTransformer({
+      cwd,
+      postcssConfig: `${uuid}/postcss.config.js`,
+    }),
+  });
+  createFixtures({
+    [`/${uuid}/postcss.config.js`]: dedent`
+    module.exports = {
+      plugins: [
+        require('${require.resolve('postcss-simple-vars')}'),
+      ],
+    };
+    `,
+    '/test/1.css': dedent`
+    $prefix: foo;
+    .$(prefix)_bar {}
+    `,
+  });
+  const result = await loader.load(getFixturePath('/test/1.css'));
+
+  expect(result).toMatchInlineSnapshot(`
+    {
+      dependencies: [],
+      tokens: [
+        {
+          name: "foo_bar",
+          originalLocations: [
+            { filePath: "<fixtures>/test/1.css", start: { line: 2, column: 1 }, end: { line: 2, column: 8 } },
+          ],
+        },
+      ],
+    }
+  `);
+});
+
+test('tracks dependencies that have been pre-bundled by postcss compiler', async () => {
+  const uuid = randomUUID();
+  const loader = new Loader({
+    transformer: createPostcssTransformer({
+      cwd,
+      postcssConfig: `${uuid}/postcss.config.js`,
+    }),
+  });
+  const loadSpy = jest.spyOn(loader, 'load');
+  createFixtures({
+    [`/${uuid}/postcss.config.js`]: dedent`
+    module.exports = {
+      plugins: [
+        require('${require.resolve('postcss-import')}'),
+      ],
+    };
+    `,
+    '/test/1.css': dedent`
+    @import './2.css';
+    @import './3.css';
+    `,
+    '/test/2.css': ``,
+    '/test/3.css': `@import './4.css'`,
+    '/test/4.css': ``,
+  });
+  const result = await loader.load(getFixturePath('/test/1.css'));
+
+  // The files imported using @import are pre-bundled by the compiler.
+  // Therefore, `Loader#load` is not called to process other files.
+  expect(loadSpy).toBeCalledTimes(1);
+  expect(loadSpy).toHaveBeenNthCalledWith(1, getFixturePath('/test/1.css'));
+
+  // The files pre-bundled by the compiler are also included in `result.dependencies`
+  expect(result.dependencies).toStrictEqual(['/test/2.css', '/test/3.css', '/test/4.css'].map(getFixturePath));
+});
+
+test('resolves specifier using resolver', async () => {
+  const uuid = randomUUID();
+  const loader = new Loader({
+    transformer: createPostcssTransformer({
+      cwd,
+      postcssConfig: `${uuid}/postcss.config.js`,
+    }),
+  });
+  createFixtures({
+    [`/${uuid}/postcss.config.js`]: dedent`
+    module.exports = {
+      plugins: [
+        // When using postcss-import, the resolver of happy-css-modules is ignored.
+        // Therefore, we test here without postcss-import.
+        // require('${require.resolve('postcss-import')}'),
+      ],
+    };
+    `,
+    '/test/1.css': dedent`
+    @import 'package';
+    `,
+    '/node_modules/package/index.css': `.a {}`,
+  });
+  const result = await loader.load(getFixturePath('/test/1.css'));
+  expect(result.dependencies).toStrictEqual(['/node_modules/package/index.css'].map(getFixturePath));
+});
+
+test('ignores http(s) protocol file', async () => {
+  const uuid = randomUUID();
+  const loader = new Loader({
+    transformer: createPostcssTransformer({
+      cwd,
+      postcssConfig: `${uuid}/postcss.config.js`,
+    }),
+  });
+  createFixtures({
+    [`/${uuid}/postcss.config.js`]: dedent`
+    module.exports = {
+      plugins: [
+        // When using postcss-import, the resolver of happy-css-modules is ignored.
+        // Therefore, we test here without postcss-import.
+        // require('${require.resolve('postcss-import')}'),
+      ],
+    };
+    `,
+    '/test/1.css': dedent`
+    @import 'http://example.com/path/http.css';
+    @import 'https://example.com/path/https.css';
+    `,
+  });
+  const result = await loader.load(getFixturePath('/test/1.css'));
+  expect(result.dependencies).toStrictEqual([]);
+});
+
+test('returns false if postcssrc is not found', async () => {
+  const uuid = randomUUID();
+  const transformer = createPostcssTransformer({
+    cwd,
+    postcssConfig: `${uuid}/postcss.config.js`,
+  });
+  createFixtures({
+    '/test/1.css': dedent`
+    @import 'http://example.com/path/http.css';
+    @import 'https://example.com/path/https.css';
+    `,
+  });
+  expect(
+    await transformer('', {
+      from: getFixturePath('/test/1.css'),
+      isIgnoredSpecifier: () => false,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      resolver: jest.fn() as any,
+    }),
+  ).toBe(false);
+});
+
+test('searches config from cwd if postcssConfig option is missing', async () => {
+  const uuid = randomUUID();
+  const cwd = `/${uuid}`;
+  const loader = new Loader({
+    transformer: createPostcssTransformer({
+      cwd: getFixturePath(cwd),
+    }),
+  });
+  createFixtures({
+    [`/${uuid}/postcss.config.js`]: dedent`
+    module.exports = {
+      plugins: [
+        require('${require.resolve('postcss-simple-vars')}'),
+      ],
+    };
+    `,
+    '/test/1.css': dedent`
+    $prefix: foo;
+    .$(prefix)_bar {}
+    `,
+  });
+  const result = await loader.load(getFixturePath('/test/1.css'));
+  expect(result.tokens.map((token) => token.name)).toStrictEqual(['foo_bar']);
+});

package/src/transformer/postcss-transformer.ts

@@ -0,0 +1,57 @@
+import { createRequire } from 'node:module';
+import { resolve } from 'node:path';
+import { default as postcss, type Message } from 'postcss';
+import type { Result } from 'postcss-load-config';
+import type { Transformer } from '../index.js';
+
+const require = createRequire(import.meta.url);
+
+const postcssrc: typeof import('postcss-load-config') = require('postcss-load-config');
+
+//ref: https://github.com/postcss/postcss-import#dependency-message-support
+interface DependencyMessage extends Message {
+  type: 'dependency';
+  file: string;
+  parent: string;
+}
+function isDependencyMessage(message: Message): message is DependencyMessage {
+  return message.type === 'dependency';
+}
+
+export type PostcssTransformerOptions = {
+  cwd?: string | undefined;
+  /**
+   * The option compatible with postcss's `--config`. It is a relative or absolute path.
+   * @example '.'
+   * @example 'postcss.config.js'
+   * @example '/home/user/repository/src'
+   */
+  postcssConfig?: string | undefined;
+};
+
+export const createPostcssTransformer: (postcssTransformerOptions?: PostcssTransformerOptions) => Transformer = (
+  postcssTransformerOptions,
+) => {
+  const cwd = postcssTransformerOptions?.cwd ?? process.cwd();
+  const configSearchPath = postcssTransformerOptions?.postcssConfig
+    ? resolve(cwd, postcssTransformerOptions?.postcssConfig)
+    : cwd;
+  return async (source, options) => {
+    // NOTE: postcss-load-config cache the configuration file so is is not reloaded.
+    const postcssConfig: Result | undefined = await postcssrc({ cwd }, configSearchPath).catch((e) => {
+      if (e instanceof Error && e.message.includes('No PostCSS Config found')) return undefined;
+      throw e;
+    });
+    if (postcssConfig === undefined) return false;
+
+    const result = await postcss(postcssConfig.plugins).process(source, {
+      ...postcssConfig.options,
+      from: options.from,
+      map: { inline: false, absolute: true },
+    });
+
+    const dependencies = result.messages.filter(isDependencyMessage).map((message) => message.file);
+
+    return { css: result.css, map: result.map, dependencies };
+  };
+};

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

@@ -51,44 +51,44 @@ test('handles sass features', async () => {
         {
           name: "b_1",
           originalLocations: [
-            { filePath: "<fixtures>/test/2.scss", start: { line: 1, column: 1 }, end: { line: 1, column: 3 } },
+            { filePath: "<fixtures>/test/2.scss", start: { line: 1, column: 1 }, end: { line: 1, column: 4 } },
           ],
         },
         {
           name: "c",
           originalLocations: [
-            { filePath: "<fixtures>/test/3.scss", start: { line: 1, column: 1 }, end: { line: 1, column: 1 } },
+            { filePath: "<fixtures>/test/3.scss", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
           ],
         },
         {
           name: "a_1",
           originalLocations: [
-            { filePath: "<fixtures>/test/1.scss", start: { line: 3, column: 1 }, end: { line: 3, column: 3 } },
+            { filePath: "<fixtures>/test/1.scss", start: { line: 3, column: 1 }, end: { line: 3, column: 4 } },
           ],
         },
         {
           name: "a_2",
           originalLocations: [
-            { filePath: "<fixtures>/test/1.scss", start: { line: 4, column: 1 }, end: { line: 4, column: 3 } },
-            { filePath: "<fixtures>/test/1.scss", start: { line: 7, column: 3 }, end: { line: 7, column: 5 } },
+            { filePath: "<fixtures>/test/1.scss", start: { line: 4, column: 1 }, end: { line: 4, column: 4 } },
+            { filePath: "<fixtures>/test/1.scss", start: { line: 7, column: 3 }, end: { line: 7, column: 6 } },
           ],
         },
         {
           name: "a_2_1",
           originalLocations: [
-            { filePath: "<fixtures>/test/1.scss", start: { line: 7, column: 3 }, end: { line: 7, column: 7 } },
+            { filePath: "<fixtures>/test/1.scss", start: { line: 7, column: 3 }, end: { line: 7, column: 8 } },
           ],
         },
         {
           name: "a_2_2",
           originalLocations: [
-            { filePath: "<fixtures>/test/1.scss", start: { line: 8, column: 3 }, end: { line: 8, column: 7 } },
+            { 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: 1 } },
+            { filePath: "<fixtures>/test/4.scss", start: { line: 1, column: 1 }, end: { line: 1, column: 2 } },
           ],
         },
       ],

package/src/transformer/scss-transformer.ts

@@ -3,41 +3,39 @@
 // Therefore, the workaround is now disabled. See
 // https://github.com/mizdra/happy-css-modules/issues/65#issuecomment-1229471950 for more information.
 
-import type { LegacyResult } from 'sass';
-import type { Transformer, TransformerOptions } from './index.js';
+import type { LegacyOptions, LegacyResult } from 'sass';
+import type { Transformer } from './index.js';
 import { handleImportError } from './index.js';
 
-async function renderSass(sass: typeof import('sass'), source: string, options: TransformerOptions) {
-  return new Promise<LegacyResult>((resolve, reject) => {
-    sass.render(
-      {
-        data: source,
-        file: options.from,
-        outFile: 'DUMMY', // Required for sourcemap output.
-        sourceMap: true,
-        importer: (url, prev, done) => {
-          options
-            .resolver(url, { request: prev })
-            .then((resolved) => done({ file: resolved }))
-            .catch((e) => done(e));
-        },
-      },
-      (exception, result) => {
-        if (exception) {
-          reject(exception);
-        } else {
-          resolve(result!);
-        }
-      },
-    );
-  });
+// For some reason, `util.promisify` does not work. Therefore, use the original promisify.
+function promisifySassRender(sass: typeof import('sass')) {
+  return async (options: LegacyOptions<'async'>) => {
+    return new Promise<LegacyResult>((resolve, reject) => {
+      sass.render(options, (exception, result) => {
+        if (exception) reject(exception);
+        else resolve(result!);
+      });
+    });
+  };
 }
 
 export const createScssTransformer: () => Transformer = () => {
   let sass: typeof import('sass');
   return async (source, options) => {
     sass ??= (await import('sass').catch(handleImportError('sass'))).default;
-    const result = await renderSass(sass, source, options);
+    const render = promisifySassRender(sass);
+    const result = await render({
+      data: source,
+      file: options.from,
+      outFile: 'DUMMY', // Required for sourcemap output.
+      sourceMap: true,
+      importer: (url, prev, done) => {
+        options
+          .resolver(url, { request: prev })
+          .then((resolved) => done({ file: resolved }))
+          .catch((e) => done(e));
+      },
+    });
     return { css: result.css.toString(), map: result.map!.toString(), dependencies: result.stats.includedFiles };
   };
 };