happy-css-modules 0.4.0 → 0.5.0

package/src/loader/postcss.ts

@@ -11,14 +11,20 @@ export type Position = {
   column: number;
 };
 
-/** The location of class selector. */
-export type Location = {
-  filePath: string;
-  /** The inclusive starting position of the node's source (compatible with postcss). */
-  start: Position;
-  /** The inclusive ending position of the node's source (compatible with postcss). */
-  end: Position;
-};
+/** The original location of class selector. If the original location is not found, all fields are `undefined`. */
+export type Location =
+  | {
+      filePath: string;
+      /** The inclusive starting position of the node's source (compatible with postcss). */
+      start: Position;
+      /** The inclusive ending position of the node's source (compatible with postcss). */
+      end: Position;
+    }
+  | {
+      filePath: undefined;
+      start: undefined;
+      end: undefined;
+    };
 
 function removeDependenciesPlugin(): Plugin {
   return {
@@ -80,49 +86,45 @@ export function getOriginalLocation(rule: Rule, classSelector: ClassName): Locat
   if (rule.source.end === undefined || classSelector.source.end === undefined) throw new Error('Node#end is undefined');
   if (rule.source.input.file === undefined) throw new Error('Node#input.file is undefined');
 
-  const start = {
+  const classSelectorStartPosition = {
     // The line is 1-based.
     line: rule.source.start.line + (classSelector.source.start.line - 1),
     // The column is 1-based.
     column: rule.source.start.column + (classSelector.source.start.column - 1),
   };
-  const end = {
-    line: start.line,
+  const classSelectorEndPosition = {
+    line: classSelectorStartPosition.line,
     // The column is inclusive.
-    column: start.column + classSelector.value.length,
+    column: classSelectorStartPosition.column + classSelector.value.length,
   };
-  let location = {
+  const classSelectorLocation = {
     filePath: rule.source.input.file,
-    start,
-    end,
+    start: classSelectorStartPosition,
+    end: classSelectorEndPosition,
   };
 
-  if (rule.source.input.map) {
-    const origin = rule.source.input.origin(
-      location.start.line,
-      // The column of `Input#origin` is 0-based. This behavior is undocumented and probably a postcss's bug.
-      // TODO: Open PR to postcss/postcss
-      location.start.column - 1,
-    );
-    if (origin === false) throw new Error('`Input#origin` returned false');
-    if (origin.file === undefined) throw new Error('`FilePosition#file` is undefined');
-
-    location = {
-      filePath: origin.file,
-      start: {
-        line: origin.line,
-        // The column of `Input#origin` is 0-based.
-        column: origin.column + 1,
-      },
-      end: {
-        line: origin.line,
-        // The column of `Input#origin` is 0-based. Also, the column of happy-css-modules is inclusive.
-        column: origin.column + 1 + (classSelector.value.length - 1),
-      },
-    };
-  }
+  if (!rule.source.input.map) return classSelectorLocation;
 
-  return location;
+  const classSelectorOrigin = rule.source.input.origin(
+    classSelectorLocation.start.line,
+    // The column of `Input#origin` is 0-based. This behavior is undocumented and probably a postcss's bug.
+    // TODO: Open PR to postcss/postcss
+    classSelectorLocation.start.column - 1,
+  );
+  if (classSelectorOrigin === false || classSelectorOrigin.file === undefined) {
+    return { filePath: undefined, start: undefined, end: undefined };
+  }
+  return {
+    filePath: classSelectorOrigin.file,
+    start: {
+      line: classSelectorOrigin.line,
+      column: classSelectorOrigin.column + 1,
+    },
+    end: {
+      line: classSelectorOrigin.line,
+      column: classSelectorOrigin.column + classSelector.value.length + 1,
+    },
+  };
 }
 
 function isAtRuleNode(node: Node): node is AtRule {

package/src/resolver/webpack-resolver.test.ts

@@ -2,7 +2,13 @@ import { createFixtures, getFixturePath } from '../test/util.js';
 import { createWebpackResolver } from './webpack-resolver.js';
 
 test('resolves specifier with css-loader mechanism', async () => {
-  const webpackResolver = createWebpackResolver();
+  const webpackResolver = createWebpackResolver({
+    cwd: getFixturePath('/'),
+    webpackResolveAlias: {
+      '@relative': 'test/alias-relative',
+      '@absolute': getFixturePath('/test/alias-absolute'),
+    },
+  });
   const request = getFixturePath('/test/1.css');
   createFixtures({
     '/node_modules/package-1/index.css': `.a {}`,
@@ -12,6 +18,8 @@ test('resolves specifier with css-loader mechanism', async () => {
     '/node_modules/package-4/style.css': `.a {}`,
     '/node_modules/@scoped/package-5/index.css': `.a {}`,
     '/node_modules/package-6/index.css': `.a {}`,
+    '/test/alias-relative/alias.css': `.a {}`,
+    '/test/alias-absolute/alias.css': `.a {}`,
   });
   expect(await webpackResolver('~package-1/index.css', { request })).toBe(
     getFixturePath('/node_modules/package-1/index.css'),
@@ -25,22 +33,43 @@ test('resolves specifier with css-loader mechanism', async () => {
   expect(await webpackResolver('package-6/index.css', { request })).toBe(
     getFixturePath('/node_modules/package-6/index.css'),
   );
+  expect(await webpackResolver('@relative/alias.css', { request })).toBe(
+    getFixturePath('/test/alias-relative/alias.css'),
+  );
+  expect(await webpackResolver('@absolute/alias.css', { request })).toBe(
+    getFixturePath('/test/alias-absolute/alias.css'),
+  );
 });
 
 test('resolves specifier with sass-loader mechanism', async () => {
-  const webpackResolver = createWebpackResolver({ sassLoadPaths: [getFixturePath('/test/styles')] });
+  const webpackResolver = createWebpackResolver({
+    cwd: getFixturePath('/'),
+    sassLoadPaths: ['test/load-paths-relative', getFixturePath('/test/load-paths-absolute')],
+    webpackResolveAlias: {
+      '@relative': 'test/alias-relative',
+      '@absolute': getFixturePath('/test/alias-absolute'),
+    },
+  });
   const request = getFixturePath('/test/1.scss');
   createFixtures({
     '/node_modules/package-1/index.scss': `.a {}`,
-    '/test/styles/load-paths.scss': `.a {}`,
+    '/test/load-paths-relative/load-paths-relative.scss': `.a {}`,
+    '/test/load-paths-absolute/load-paths-absolute.scss': `.a {}`,
     '/test/_partial-import.scss': `.a {}`,
+    '/test/alias-relative/alias.scss': `.a {}`,
+    '/test/alias-absolute/alias.scss': `.a {}`,
   });
   expect(await webpackResolver('~package-1/index.scss', { request })).toBe(
     getFixturePath('/node_modules/package-1/index.scss'),
   );
   expect(await webpackResolver('~package-1', { request })).toBe(getFixturePath('/node_modules/package-1/index.scss'));
   // ref: https://github.com/webpack-contrib/sass-loader/blob/bed9fb5799a90020d43f705ea405f85b368621d7/test/scss/import-include-paths.scss#L1
-  expect(await webpackResolver('load-paths', { request })).toBe(getFixturePath('/test/styles/load-paths.scss'));
+  expect(await webpackResolver('load-paths-relative', { request })).toBe(
+    getFixturePath('/test/load-paths-relative/load-paths-relative.scss'),
+  );
+  expect(await webpackResolver('load-paths-absolute', { request })).toBe(
+    getFixturePath('/test/load-paths-absolute/load-paths-absolute.scss'),
+  );
   // https://sass-lang.com/documentation/at-rules/import#partials
   // https://github.com/webpack-contrib/sass-loader/blob/0e9494074f69a6b6d47efea6c083a02a31a5ae84/test/sass/import-with-underscore.sass
   expect(await webpackResolver('partial-import', { request: getFixturePath('/test/1.scss') })).toBe(
@@ -49,14 +78,30 @@ test('resolves specifier with sass-loader mechanism', async () => {
   expect(await webpackResolver('test/partial-import', { request: getFixturePath('/test') })).toBe(
     getFixturePath('/test/_partial-import.scss'),
   );
+  expect(await webpackResolver('@relative/alias.scss', { request })).toBe(
+    getFixturePath('/test/alias-relative/alias.scss'),
+  );
+  expect(await webpackResolver('@absolute/alias.scss', { request })).toBe(
+    getFixturePath('/test/alias-absolute/alias.scss'),
+  );
 });
 
 test('resolves specifier with less-loader mechanism', async () => {
-  const webpackResolver = createWebpackResolver({ lessIncludePaths: [getFixturePath('/test/styles')] });
+  const webpackResolver = createWebpackResolver({
+    cwd: getFixturePath('/'),
+    lessIncludePaths: ['test/include-paths-relative', getFixturePath('/test/include-paths-absolute')],
+    webpackResolveAlias: {
+      '@relative': 'test/alias-relative',
+      '@absolute': getFixturePath('/test/alias-absolute'),
+    },
+  });
   const request = getFixturePath('/test/1.less');
   createFixtures({
     '/node_modules/package-1/index.less': `.a {}`,
-    '/test/styles/include-paths.less': `.a {}`,
+    '/test/include-paths-relative/include-paths-relative.less': `.a {}`,
+    '/test/include-paths-absolute/include-paths-absolute.less': `.a {}`,
+    '/test/alias-relative/alias.less': `.a {}`,
+    '/test/alias-absolute/alias.less': `.a {}`,
   });
   expect(await webpackResolver('~package-1/index.less', { request })).toBe(
     getFixturePath('/node_modules/package-1/index.less'),
@@ -65,5 +110,16 @@ test('resolves specifier with less-loader mechanism', async () => {
   // ref: https://github.com/webpack-contrib/less-loader/blob/81a0d27eb6d18e5dc550a60fc1007fdc77305b78/test/loader.test.js#L248-L253
   // ref: https://github.com/webpack-contrib/less-loader/blob/393147064672ace986ec84aca21f69f0ab819a9c/test/fixtures/import-paths.less#L1
   // ref: https://github.com/webpack-contrib/less-loader/blob/99d80bd290dae50375db6e17c5f56ec33754e258/test/helpers/getCodeFromLess.js#L47-L54
-  expect(await webpackResolver('include-paths', { request })).toBe(getFixturePath('/test/styles/include-paths.less'));
+  expect(await webpackResolver('include-paths-relative', { request })).toBe(
+    getFixturePath('/test/include-paths-relative/include-paths-relative.less'),
+  );
+  expect(await webpackResolver('include-paths-absolute', { request })).toBe(
+    getFixturePath('/test/include-paths-absolute/include-paths-absolute.less'),
+  );
+  expect(await webpackResolver('@relative/alias.less', { request })).toBe(
+    getFixturePath('/test/alias-relative/alias.less'),
+  );
+  expect(await webpackResolver('@absolute/alias.less', { request })).toBe(
+    getFixturePath('/test/alias-absolute/alias.less'),
+  );
 });

package/src/resolver/webpack-resolver.ts

@@ -1,25 +1,43 @@
-import { basename, dirname, join } from 'path';
+import { basename, dirname, join, resolve } from 'path';
 import enhancedResolve from 'enhanced-resolve';
 import { exists } from '../util.js';
 import type { Resolver } from './index.js';
 
 export type WebpackResolverOptions = {
+  /** Working directory path. */
+  cwd?: string | undefined;
   /**
-   * The option compatible with sass's `--load-path`. It is an array of absolute paths.
+   * The option compatible with sass's `--load-path`. It is an array of relative or absolute paths.
+   * @example ['src/styles']
    * @example ['/home/user/repository/src/styles']
    */
   sassLoadPaths?: string[] | undefined;
   /**
-   * The option compatible with less's `--include-path`. It is an array of absolute paths.
+   * The option compatible with less's `--include-path`. It is an array of relative or absolute paths.
+   * @example ['src/styles']
    * @example ['/home/user/repository/src/styles']
    */
   lessIncludePaths?: string[] | undefined;
+  /**
+   * The option compatible with webpack's `resolve.alias`. It is an object consisting of a pair of alias names and relative or absolute paths.
+   * @example { style: 'src/styles', '@': 'src' }
+   * @example { style: '/home/user/repository/src/styles', '@': '/home/user/repository/src' }
+   */
+  webpackResolveAlias?: Record<string, string> | undefined;
 };
 
 // TODO: Support `resolve.alias` for Node.js API
 export const createWebpackResolver: (webpackResolverOptions?: WebpackResolverOptions | undefined) => Resolver = (
   webpackResolverOptions,
 ) => {
+  const cwd = webpackResolverOptions?.cwd ?? process.cwd();
+  const sassLoadPaths = webpackResolverOptions?.sassLoadPaths?.map((path) => resolve(cwd, path));
+  const lessIncludePaths = webpackResolverOptions?.lessIncludePaths?.map((path) => resolve(cwd, path));
+  const webpackResolveAlias = webpackResolverOptions?.webpackResolveAlias
+    ? Object.fromEntries(
+        Object.entries(webpackResolverOptions?.webpackResolveAlias).map(([key, value]) => [key, resolve(cwd, value)]),
+      )
+    : undefined;
   /**
    * A resolver compatible with css-loader.
    *
@@ -33,6 +51,7 @@ export const createWebpackResolver: (webpackResolverOptions?: WebpackResolverOpt
     mainFiles: ['index', '...'],
     extensions: ['.css', '...'],
     preferRelative: true,
+    alias: webpackResolveAlias,
   });
 
   /**
@@ -48,7 +67,8 @@ export const createWebpackResolver: (webpackResolverOptions?: WebpackResolverOpt
     extensions: ['.sass', '.scss', '.css'],
     restrictions: [/\.((sa|sc|c)ss)$/i],
     preferRelative: true,
-    modules: ['node_modules', ...(webpackResolverOptions?.sassLoadPaths ?? [])],
+    alias: webpackResolveAlias,
+    modules: ['node_modules', ...(sassLoadPaths ?? [])],
   });
 
   /**
@@ -63,7 +83,8 @@ export const createWebpackResolver: (webpackResolverOptions?: WebpackResolverOpt
     mainFiles: ['index', '...'],
     extensions: ['.less', '.css'],
     preferRelative: true,
-    modules: ['node_modules', ...(webpackResolverOptions?.lessIncludePaths ?? [])],
+    alias: webpackResolveAlias,
+    modules: ['node_modules', ...(lessIncludePaths ?? [])],
   });
 
   // NOTE: In theory, `sassLoaderResolver` should only be used when the resolver is called from `sassTransformer`.

package/src/runner.test.ts

@@ -1,4 +1,6 @@
 import { readFile, writeFile } from 'fs/promises';
+import { randomUUID } from 'node:crypto';
+import { createRequire } from 'node:module';
 import { jest } from '@jest/globals';
 import chalk from 'chalk';
 import dedent from 'dedent';
@@ -7,6 +9,8 @@ import type { Watcher } from './runner.js';
 import { run } from './runner.js';
 import { createFixtures, exists, getFixturePath, waitForAsyncTask } from './test/util.js';
 
+const require = createRequire(import.meta.url);
+
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
@@ -87,9 +91,9 @@ test('returns an error if the file fails to process in non-watch mode', async ()
   // The error is logged to console.error.
   expect(consoleErrorSpy).toHaveBeenCalledTimes(2);
   // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-  expect(consoleErrorSpy).toHaveBeenNthCalledWith(1, chalk.red('[Error] ' + error.errors[0]));
+  expect(consoleErrorSpy).toHaveBeenNthCalledWith(1, chalk.red('[Error] ' + error.errors[0]!.stack));
   // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-  expect(consoleErrorSpy).toHaveBeenNthCalledWith(2, chalk.red('[Error] ' + error.errors[1]));
+  expect(consoleErrorSpy).toHaveBeenNthCalledWith(2, chalk.red('[Error] ' + error.errors[1].stack));
 
   // The valid files are emitted.
   expect(await exists(getFixturePath('/test/1.css.d.ts'))).toBe(true);
@@ -129,27 +133,53 @@ describe('handles external files', () => {
 });
 
 test('sassLoadPaths', async () => {
-  const sassLoadPaths = ['test/relative', getFixturePath('/test/absolute')];
+  const sassLoadPaths = ['test/relative'];
   createFixtures({
     '/test/1.scss': dedent`
     @import '2.scss';
-    @import '3.scss';
     `,
     '/test/relative/2.scss': `.a { dummy: ''; }`,
-    '/test/absolute/3.scss': `.b { dummy: ''; }`,
   });
   await run({ ...defaultOptions, sassLoadPaths }); // not throw
 });
 
 test('lessIncludePaths', async () => {
-  const lessIncludePaths = ['test/relative', getFixturePath('/test/absolute')];
+  const lessIncludePaths = ['test/relative'];
   createFixtures({
     '/test/1.less': dedent`
     @import '2.less';
-    @import '3.less';
     `,
     '/test/relative/2.less': `.a { dummy: ''; }`,
-    '/test/absolute/3.less': `.b { dummy: ''; }`,
   });
   await run({ ...defaultOptions, lessIncludePaths }); // not throw
 });
+
+test('webpackResolveAlias', async () => {
+  const webpackResolveAlias = { '@relative': 'test/relative' };
+  createFixtures({
+    '/test/1.less': dedent`
+    @import '@relative/2.less';
+    `,
+    '/test/relative/2.less': `.a { dummy: ''; }`,
+  });
+  await run({ ...defaultOptions, webpackResolveAlias }); // not throw
+});
+
+test('postcssConfig', async () => {
+  const uuid = randomUUID();
+  const 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 {}
+    `,
+  });
+  await run({ ...defaultOptions, postcssConfig }); // not throw
+});

package/src/runner.ts

@@ -9,7 +9,7 @@ import { emitGeneratedFiles } from './emitter/index.js';
 import { Loader } from './loader/index.js';
 import type { Resolver } from './resolver/index.js';
 import { createDefaultResolver } from './resolver/index.js';
-import { type Transformer } from './transformer/index.js';
+import { createDefaultTransformer, type Transformer } from './transformer/index.js';
 import { isMatchByGlob } from './util.js';
 
 const glob = util.promisify(_glob);
@@ -40,6 +40,19 @@ export interface RunnerOptions {
    * @example ['/home/user/repository/src/styles']
    */
   lessIncludePaths?: string[] | undefined;
+  /**
+   * The option compatible with webpack's `resolve.alias`. It is an object consisting of a pair of alias names and relative or absolute paths.
+   * @example { style: 'src/styles', '@': 'src' }
+   * @example { style: '/home/user/repository/src/styles', '@': '/home/user/repository/src' }
+   */
+  webpackResolveAlias?: Record<string, 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;
   /**
    * Silent output. Do not show "files written" messages.
    * @default false
@@ -61,9 +74,15 @@ export async function run(options: RunnerOptions): Promise<void>;
 export async function run(options: RunnerOptions): Promise<Watcher | void> {
   const cwd = options.cwd ?? process.cwd();
   const silent = options.silent ?? false;
-  const sassLoadPaths = options.sassLoadPaths?.map((path) => resolve(cwd, path));
-  const lessIncludePaths = options.lessIncludePaths?.map((path) => resolve(cwd, path));
-  const resolver = options.resolver ?? createDefaultResolver({ sassLoadPaths, lessIncludePaths });
+  const resolver =
+    options.resolver ??
+    createDefaultResolver({
+      cwd,
+      sassLoadPaths: options.sassLoadPaths,
+      lessIncludePaths: options.lessIncludePaths,
+      webpackResolveAlias: options.webpackResolveAlias,
+    });
+  const transformer = options.transformer ?? createDefaultTransformer({ cwd, postcssConfig: options.postcssConfig });
   const distOptions = options.outDir
     ? {
         rootDir: cwd, // TODO: support `--rootDir` option
@@ -71,7 +90,7 @@ export async function run(options: RunnerOptions): Promise<Watcher | void> {
       }
     : undefined;
 
-  const loader = new Loader({ transformer: options.transformer, resolver });
+  const loader = new Loader({ transformer, resolver });
   const isExternalFile = (filePath: string) => {
     return !isMatchByGlob(filePath, options.pattern, { cwd });
   };
@@ -92,8 +111,13 @@ export async function run(options: RunnerOptions): Promise<Watcher | void> {
         isExternalFile,
       });
     } catch (error) {
-      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-      console.error(chalk.red('[Error] ' + error));
+      if (error instanceof Error) {
+        // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+        console.error(chalk.red('[Error] ' + error.stack));
+      } else {
+        // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+        console.error(chalk.red('[Error] ' + error));
+      }
       throw error;
     }
   }

package/src/test/util.ts

@@ -31,18 +31,24 @@ export function createComposesDeclarations(root: Root): Declaration[] {
 
 export function fakeToken(args: {
   name: Token['name'];
-  originalLocations: { filePath?: Location['filePath']; start: Location['start'] }[];
+  originalLocations: { filePath?: Location['filePath']; start?: Location['start'] }[];
 }): Token {
   return {
     name: args.name,
-    originalLocations: args.originalLocations.map((location) => ({
-      filePath: location.filePath ?? getFixturePath('/test/1.css'),
-      start: location.start,
-      end: {
-        line: location.start.line,
-        column: location.start.column + args.name.length - 1,
-      },
-    })),
+    originalLocations: args.originalLocations.map((location) => {
+      if (location.filePath === undefined || location.start === undefined) {
+        return { filePath: undefined, start: undefined, end: undefined };
+      } else {
+        return {
+          filePath: location.filePath ?? getFixturePath('/test/1.css'),
+          start: location.start,
+          end: {
+            line: location.start.line,
+            column: location.start.column + args.name.length - 1,
+          },
+        };
+      }
+    }),
   };
 }
 

package/src/transformer/index.test.ts

@@ -0,0 +1,71 @@
+import { randomUUID } from 'node:crypto';
+import { createRequire } from 'node:module';
+import dedent from 'dedent';
+import { Loader } from '../loader/index.js';
+import { createFixtures, getFixturePath } from '../test/util.js';
+import { createDefaultTransformer } from './index.js';
+
+const require = createRequire(import.meta.url);
+
+const cwd = getFixturePath('/');
+const loader = new Loader({ transformer: createDefaultTransformer({ cwd }) });
+
+test('processes .scss with scss transformer', async () => {
+  createFixtures({
+    '/test/1.scss': dedent`
+    .a {
+      // scss feature test (nesting)
+      .a_1 { dummy: ''; }
+    }
+    `,
+  });
+  const result = await loader.load(getFixturePath('/test/1.scss'));
+  expect(result.tokens.map((token) => token.name)).toStrictEqual(['a', 'a_1']);
+});
+
+test('processes .less with less transformer', async () => {
+  createFixtures({
+    '/test/1.less': dedent`
+    .a {
+      // less feature test (nesting)
+      .a_1 { dummy: ''; }
+    }
+    `,
+  });
+  const result = await loader.load(getFixturePath('/test/1.less'));
+  expect(result.tokens.map((token) => token.name)).toStrictEqual(['a', 'a_1']);
+});
+
+test('processes .css with postcss transformer if postcssrc is found', async () => {
+  // if postcssrc is not found
+  const loader1 = new Loader({ transformer: createDefaultTransformer() });
+  createFixtures({
+    '/test/1.css': dedent`
+    $prefix: foo;
+    .$(prefix)_bar {}
+    `,
+  });
+  const result1 = await loader1.load(getFixturePath('/test/1.css'));
+  expect(result1.tokens.map((token) => token.name)).toStrictEqual(['$(prefix)']);
+
+  // if postcssrc is found
+  const uuid = randomUUID();
+  const loader2 = new Loader({
+    transformer: createDefaultTransformer({ 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 result2 = await loader2.load(getFixturePath('/test/1.css'));
+  expect(result2.tokens.map((token) => token.name)).toStrictEqual(['foo_bar']);
+});

package/src/transformer/index.ts

@@ -1,5 +1,7 @@
 import type { StrictlyResolver } from '../loader/index.js';
 import { createLessTransformer } from './less-transformer.js';
+import type { PostcssTransformerOptions } from './postcss-transformer.js';
+import { createPostcssTransformer } from './postcss-transformer.js';
 import { createScssTransformer } from './scss-transformer.js';
 
 /**
@@ -36,16 +38,22 @@ export const handleImportError = (packageName: string) => (e: unknown) => {
   throw e;
 };
 
-export const createDefaultTransformer: () => Transformer = () => {
+export type DefaultTransformerOptions = PostcssTransformerOptions;
+
+export const createDefaultTransformer: (defaultTransformerOptions?: DefaultTransformerOptions) => Transformer = (
+  defaultTransformerOptions,
+) => {
   const scssTransformer = createScssTransformer();
   const lessTransformer = createLessTransformer();
+  const postcssTransformer = createPostcssTransformer(defaultTransformerOptions);
   return async (source, options) => {
     if (options.from.endsWith('.scss')) {
       return scssTransformer(source, options);
     } else if (options.from.endsWith('.less')) {
       return lessTransformer(source, options);
+    } else {
+      // TODO: Support multi-stage transformations by sass and less.
+      return postcssTransformer(source, options);
     }
-    // TODO: support postcss
-    return false;
   };
 };

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

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