feat(css): support css module compose/from path resolution

packages/playground/css/__tests__/css.spec.ts

@@ -152,6 +152,69 @@ test('css modules', async () => {
   await untilUpdated(() => getColor(imported), 'red')
 })
 
+test('css modules composes/from path resolving', async () => {
+  const imported = await page.$('.path-resolved-modules-css')
+  expect(await getColor(imported)).toBe('turquoise')
+
+  // check if the generated CSS module class name is indeed using the
+  // format specified in vite.config.js
+  expect(await imported.getAttribute('class')).toMatch(
+    /.composed-module__apply-color___[\w-]{5}/
+  )
+
+  expect(await imported.getAttribute('class')).toMatch(
+    /.composes-path-resolving-module__path-resolving-css___[\w-]{5}/
+  )
+
+  // @todo HMR is not working on this situation.
+  // editFile('composed.module.css', (code) =>
+  //   code.replace('color: turquoise', 'color: red')
+  // )
+  // await untilUpdated(() => getColor(imported), 'red')
+})
+
+test('sass modules composes/from path resolving', async () => {
+  const imported = await page.$('.path-resolved-modules-sass')
+  expect(await getColor(imported)).toBe('orangered')
+
+  // check if the generated CSS module class name is indeed using the
+  // format specified in vite.config.js
+  expect(await imported.getAttribute('class')).toMatch(
+    /.composed-module__apply-color___[\w-]{5}/
+  )
+
+  expect(await imported.getAttribute('class')).toMatch(
+    /.composes-path-resolving-module__path-resolving-sass___[\w-]{5}/
+  )
+
+  // @todo HMR is not working on this situation.
+  // editFile('composed.module.scss', (code) =>
+  //   code.replace('color: orangered', 'color: red')
+  // )
+  // await untilUpdated(() => getColor(imported), 'red')
+})
+
+test('less modules composes/from path resolving', async () => {
+  const imported = await page.$('.path-resolved-modules-less')
+  expect(await getColor(imported)).toBe('blue')
+
+  // check if the generated CSS module class name is indeed using the
+  // format specified in vite.config.js
+  expect(await imported.getAttribute('class')).toMatch(
+    /.composed-module__apply-color___[\w-]{5}/
+  )
+
+  expect(await imported.getAttribute('class')).toMatch(
+    /.composes-path-resolving-module__path-resolving-less___[\w-]{5}/
+  )
+
+  // @todo HMR is not working on this situation.
+  // editFile('composed.module.scss', (code) =>
+  //   code.replace('color: orangered', 'color: red')
+  // )
+  // await untilUpdated(() => getColor(imported), 'red')
+})
+
 test('css modules w/ sass', async () => {
   const imported = await page.$('.modules-sass')
   expect(await getColor(imported)).toBe('orangered')

packages/playground/css/composed.module.css

@@ -0,0 +1,3 @@
+.apply-color {
+  color: turquoise;
+}

packages/playground/css/composed.module.less

@@ -0,0 +1,3 @@
+.apply-color {
+  color: blue;
+}

packages/playground/css/composed.module.scss

@@ -0,0 +1,3 @@
+.apply-color {
+  color: orangered;
+}

packages/playground/css/composes-path-resolving.module.css

@@ -0,0 +1,11 @@
+.path-resolving-css {
+  composes: apply-color from '@/composed.module.css';
+}
+
+.path-resolving-sass {
+  composes: apply-color from '@/composed.module.scss';
+}
+
+.path-resolving-less {
+  composes: apply-color from '@/composed.module.less';
+}

packages/playground/css/index.html

@@ -68,6 +68,18 @@ <h1>CSS</h1>
   <p>Imported SASS module:</p>
   <pre class="modules-sass-code"></pre>
 
+  <p>Imported compose/from CSS/SASS module:</p>
+  <p class="path-resolved-modules-css">
+    CSS modules composes path resolving: this should be turquoise
+  </p>
+  <p class="path-resolved-modules-sass">
+    CSS modules composes path resolving: this should be orangered
+  </p>
+  <p class="path-resolved-modules-less">
+    CSS modules composes path resolving: this should be blue
+  </p>
+  <pre class="path-resolved-modules-code"></pre>
+
   <p class="css-dep">
     @import dependency w/ style enrtrypoints: this should be purple
   </p>

packages/playground/css/main.js

@@ -18,6 +18,21 @@ import sassMod from './mod.module.scss'
 document.querySelector('.modules-sass').classList.add(sassMod['apply-color'])
 text('.modules-sass-code', JSON.stringify(sassMod, null, 2))
 
+import composesPathResolvingMod from './composes-path-resolving.module.css'
+document
+  .querySelector('.path-resolved-modules-css')
+  .classList.add(...composesPathResolvingMod['path-resolving-css'].split(' '))
+document
+  .querySelector('.path-resolved-modules-sass')
+  .classList.add(...composesPathResolvingMod['path-resolving-sass'].split(' '))
+document
+  .querySelector('.path-resolved-modules-less')
+  .classList.add(...composesPathResolvingMod['path-resolving-less'].split(' '))
+text(
+  '.path-resolved-modules-code',
+  JSON.stringify(composesPathResolvingMod, null, 2)
+)
+
 import './dep.css'
 import './glob-dep.css'
 

packages/vite/package.json

@@ -111,7 +111,7 @@
     "periscopic": "^2.0.3",
     "postcss-import": "^14.0.2",
     "postcss-load-config": "^3.0.0",
-    "postcss-modules": "^4.1.3",
+    "postcss-modules": "^4.2.2",
     "resolve.exports": "^1.0.2",
     "rollup-plugin-license": "^2.5.0",
     "selfsigned": "^1.10.11",

packages/vite/src/node/__tests__/plugins/css.spec.ts

@@ -1,4 +1,7 @@
-import { cssUrlRE } from '../../plugins/css'
+import { cssUrlRE, cssPlugin } from '../../plugins/css'
+import { resolveConfig } from '../../config'
+import fs from 'fs'
+import path from 'path'
 
 describe('search css url function', () => {
   test('some spaces before it', () => {
@@ -41,3 +44,73 @@ describe('search css url function', () => {
     ).toBe(true)
   })
 })
+
+describe('css path resolutions', () => {
+  const mockedProjectPath = path.join(process.cwd(), '/foo/bar/project')
+  const mockedBarCssRelativePath = '/css/bar.module.css'
+  const mockedFooCssRelativePath = '/css/foo.module.css'
+
+  test('cssmodule compose/from path resolutions', async () => {
+    const config = await resolveConfig(
+      {
+        resolve: {
+          alias: [
+            {
+              find: '@',
+              replacement: mockedProjectPath
+            }
+          ]
+        }
+      },
+      'serve'
+    )
+
+    const { transform, buildStart } = cssPlugin(config)
+
+    await buildStart.call({})
+
+    const mockFs = jest
+      .spyOn(fs, 'readFile')
+      // @ts-ignore jest.spyOn not recognize overrided `fs.readFile` definition.
+      .mockImplementationOnce((p, encoding, callback) => {
+        expect(p).toBe(path.join(mockedProjectPath, mockedBarCssRelativePath))
+        expect(encoding).toBe('utf-8')
+        callback(
+          null,
+          Buffer.from(`
+.bar {
+  display: block;
+  background: #f0f;
+}
+      `)
+        )
+      })
+
+    const { code } = await transform.call(
+      {
+        addWatchFile() {
+          return
+        }
+      },
+      `
+.foo {
+  position: fixed;
+  composes: bar from '@${mockedBarCssRelativePath}';
+}
+    `,
+      path.join(mockedProjectPath, mockedFooCssRelativePath)
+    )
+
+    expect(code).toBe(`
+._bar_soicv_2 {
+  display: block;
+  background: #f0f;
+}
+._foo_sctn3_2 {
+  position: fixed;
+}
+    `)
+
+    mockFs.mockReset()
+  })
+})

packages/vite/src/node/plugins/css.ts

@@ -516,6 +516,12 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
   }
 }
 
+function getCssResolversKeys(
+  resolvers: CSSAtImportResolvers
+): Array<keyof CSSAtImportResolvers> {
+  return Object.keys(resolvers) as unknown as Array<keyof CSSAtImportResolvers>
+}
+
 async function compileCSS(
   id: string,
   code: string,
@@ -641,6 +647,16 @@ async function compileCSS(
           if (modulesOptions && typeof modulesOptions.getJSON === 'function') {
             modulesOptions.getJSON(cssFileName, _modules, outputFileName)
           }
+        },
+        async resolve(id: string) {
+          for (const key of getCssResolversKeys(atImportResolvers)) {
+            const resolved = await atImportResolvers[key](id)
+            if (resolved) {
+              return path.resolve(resolved)
+            }
+          }
+
+          return id
         }
       })
     )