test: more through tests for css options and postcss config

packages/playground/assets/__tests__/assets.spec.ts

@@ -9,7 +9,7 @@ const assetMatch = isBuild
 const iconMatch = isBuild ? `/foo/icon.png` : `icon.png`
 
 test('should have no 404s', () => {
-  pageLogs.forEach((msg) => {
+  browserLogs.forEach((msg) => {
     expect(msg).not.toMatch('404')
   })
 })

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

@@ -35,6 +35,14 @@ test('css import from js', async () => {
   await untilUpdated(() => getColor(atImport), 'blue')
 })
 
+test('postcss config', async () => {
+  const imported = await page.$('.postcss .nesting')
+  expect(await getColor(imported)).toBe('pink')
+
+  editFile('imported.css', (code) => code.replace('color: pink', 'color: red'))
+  await untilUpdated(() => getColor(imported), 'red')
+})
+
 test('sass', async () => {
   const imported = await page.$('.sass')
   const atImport = await page.$('.sass-at-import')
@@ -42,7 +50,9 @@ test('sass', async () => {
   expect(await getColor(imported)).toBe('orange')
   expect(await getColor(atImport)).toBe('olive')
 
-  editFile('sass.scss', (code) => code.replace('color: orange', 'color: red'))
+  editFile('sass.scss', (code) =>
+    code.replace('color: $injectedColor', 'color: red')
+  )
   await untilUpdated(() => getColor(imported), 'red')
 
   editFile('sass-at-import.scss', (code) =>
@@ -54,6 +64,13 @@ test('sass', async () => {
 test('css modules', async () => {
   const imported = await page.$('.modules')
   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(
+    /.mod-module__apply-color___[\w-]{5}/
+  )
+
   editFile('mod.module.css', (code) =>
     code.replace('color: turquoise', 'color: red')
   )
@@ -63,6 +80,10 @@ test('css modules', async () => {
 test('css modules w/ sass', async () => {
   const imported = await page.$('.modules-sass')
   expect(await getColor(imported)).toBe('orangered')
+  expect(await imported.getAttribute('class')).toMatch(
+    /.mod-module__apply-color___[\w-]{5}/
+  )
+
   editFile('mod.module.scss', (code) =>
     code.replace('color: orangered', 'color: blue')
   )

packages/playground/css/imported.css

@@ -9,4 +9,10 @@ pre {
   width: 300px;
   padding: 1em 1.5em;
   border-radius: 10px;
+}
+
+.postcss {
+  .nesting {
+    color: pink;
+  }
 }

packages/playground/css/index.html

@@ -12,6 +12,10 @@
 <p>Imported css string:</p>
 <pre class="imported-css"></pre>
 
+<p class="postcss">
+  <span class="nesting">PostCSS nesting plugin: this should be pink</span>
+</p>
+
 <p class="sass">sass: This should be orange</p>
 <p class="sass-at-import">@import from SASS: This should be olive</p>
 <p>Imported SASS string:</p>

packages/playground/css/package.json

@@ -6,5 +6,8 @@
     "dev": "vite",
     "build": "vite build",
     "debug": "node --inspect-brk ../../vite/bin/vite"
+  },
+  "devDependencies": {
+    "postcss-nested": "^5.0.3"
   }
 }

packages/playground/css/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('postcss-nested')]
+}

packages/playground/css/sass.scss

@@ -1,5 +1,6 @@
 @import './sass-at-import.scss';
 
 .sass {
-  color: orange;
+  /* injected via vite.config.js */
+  color: $injectedColor;
 }

packages/playground/css/vite.config.js

@@ -0,0 +1,15 @@
+/**
+ * @type {import('vite').UserConfig}
+ */
+module.exports = {
+  css: {
+    modules: {
+      generateScopedName: '[name]__[local]___[hash:base64:5]'
+    },
+    preprocessorOptions: {
+      scss: {
+        additionalData: `$injectedColor: orange;`
+      }
+    }
+  }
+}

packages/playground/hmr/__tests__/hmr.spec.ts

@@ -8,9 +8,9 @@ test('should render', async () => {
 
 if (!isBuild) {
   test('should connect', async () => {
-    expect(pageLogs.length).toBe(2)
-    expect(pageLogs.some((msg) => msg.match('connected'))).toBe(true)
-    pageLogs.length = 0
+    expect(browserLogs.length).toBe(2)
+    expect(browserLogs.some((msg) => msg.match('connected'))).toBe(true)
+    browserLogs.length = 0
   })
 
   test('self accept', async () => {
@@ -19,24 +19,24 @@ if (!isBuild) {
     editFile('hmr.js', (code) => code.replace('const foo = 1', 'const foo = 2'))
     await untilUpdated(() => el.textContent(), '2')
 
-    expect(pageLogs).toMatchObject([
+    expect(browserLogs).toMatchObject([
       'foo was: 1',
       '(self-accepting 1) foo is now: 2',
       '(self-accepting 2) foo is now: 2',
       '[vite] hot updated: /hmr.js'
     ])
-    pageLogs.length = 0
+    browserLogs.length = 0
 
     editFile('hmr.js', (code) => code.replace('const foo = 2', 'const foo = 3'))
     await untilUpdated(() => el.textContent(), '3')
 
-    expect(pageLogs).toMatchObject([
+    expect(browserLogs).toMatchObject([
       'foo was: 2',
       '(self-accepting 1) foo is now: 3',
       '(self-accepting 2) foo is now: 3',
       '[vite] hot updated: /hmr.js'
     ])
-    pageLogs.length = 0
+    browserLogs.length = 0
   })
 
   test('accept dep', async () => {
@@ -47,7 +47,7 @@ if (!isBuild) {
     )
     await untilUpdated(() => el.textContent(), '2')
 
-    expect(pageLogs).toMatchObject([
+    expect(browserLogs).toMatchObject([
       '(dep) foo was: 1',
       '(dep) foo from dispose: 1',
       '(single dep) foo is now: 2',
@@ -56,14 +56,14 @@ if (!isBuild) {
       '(multi deps) nested foo is now: 1',
       '[vite] hot updated: /hmrDep.js via /hmr.js'
     ])
-    pageLogs.length = 0
+    browserLogs.length = 0
 
     editFile('hmrDep.js', (code) =>
       code.replace('const foo = 2', 'const foo = 3')
     )
     await untilUpdated(() => el.textContent(), '3')
 
-    expect(pageLogs).toMatchObject([
+    expect(browserLogs).toMatchObject([
       '(dep) foo was: 2',
       '(dep) foo from dispose: 2',
       '(single dep) foo is now: 3',
@@ -72,7 +72,7 @@ if (!isBuild) {
       '(multi deps) nested foo is now: 1',
       '[vite] hot updated: /hmrDep.js via /hmr.js'
     ])
-    pageLogs.length = 0
+    browserLogs.length = 0
   })
 
   test('nested dep propagation', async () => {
@@ -83,7 +83,7 @@ if (!isBuild) {
     )
     await untilUpdated(() => el.textContent(), '2')
 
-    expect(pageLogs).toMatchObject([
+    expect(browserLogs).toMatchObject([
       '(dep) foo was: 3',
       '(dep) foo from dispose: 3',
       '(single dep) foo is now: 3',
@@ -92,14 +92,14 @@ if (!isBuild) {
       '(multi deps) nested foo is now: 2',
       '[vite] hot updated: /hmrDep.js via /hmr.js'
     ])
-    pageLogs.length = 0
+    browserLogs.length = 0
 
     editFile('hmrNestedDep.js', (code) =>
       code.replace('const foo = 2', 'const foo = 3')
     )
     await untilUpdated(() => el.textContent(), '3')
 
-    expect(pageLogs).toMatchObject([
+    expect(browserLogs).toMatchObject([
       '(dep) foo was: 3',
       '(dep) foo from dispose: 3',
       '(single dep) foo is now: 3',
@@ -108,6 +108,6 @@ if (!isBuild) {
       '(multi deps) nested foo is now: 3',
       '[vite] hot updated: /hmrDep.js via /hmr.js'
     ])
-    pageLogs.length = 0
+    browserLogs.length = 0
   })
 }

packages/playground/html/__tests__/html.spec.ts

@@ -67,7 +67,8 @@ describe('main', () => {
 
 describe('nested', () => {
   beforeAll(async () => {
-    await page.goto(testURL + '/nested/')
+    // viteTestUrl is globally injected in scripts/jestPerTestSetup.ts
+    await page.goto(viteTestUrl + '/nested/')
   })
 
   testPage(true)

packages/playground/testEnv.d.ts

@@ -3,7 +3,8 @@ import { Page } from 'playwright-chromium'
 declare global {
   // injected by the custom jest env in scripts/jestEnv.js
   const page: Page
-  const pageLogs: string[]
-  const testURL: string
-  const __viteTestDir__: string
+
+  // injected in scripts/jestPerTestSetup.ts
+  const browserLogs: string[]
+  const viteTestUrl: string
 }

packages/playground/vue/__tests__/vue.spec.ts

@@ -1,4 +1,10 @@
-import { editFile, getColor, isBuild, untilUpdated } from 'testUtils'
+import {
+  browserLogs,
+  editFile,
+  getColor,
+  isBuild,
+  untilUpdated
+} from 'testUtils'
 
 test('should render', async () => {
   expect(await page.textContent('h1')).toMatch('Vue SFCs')
@@ -68,7 +74,7 @@ describe('template asset reference', () => {
     : '/assets/asset.png'
 
   test('should not 404', () => {
-    pageLogs.forEach((msg) => {
+    browserLogs.forEach((msg) => {
       expect(msg).not.toMatch('404')
     })
   })

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

@@ -24,7 +24,9 @@ import { Logger } from '../logger'
 // const debug = createDebugger('vite:css')
 
 export interface CSSOptions {
-  // https://github.com/css-modules/postcss-modules
+  /**
+   * https://github.com/css-modules/postcss-modules
+   */
   modules?: CSSModulesOptions | false
   preprocessorOptions?: Record<string, any>
 }
@@ -36,6 +38,9 @@ export interface CSSModulesOptions {
     | string
     | ((name: string, filename: string, css: string) => string)
   hashPrefix?: string
+  /**
+   * default: 'camelCaseOnly'
+   */
   localsConvention?: 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly'
 }
 

scripts/jestPerTestSetup.ts

@@ -15,7 +15,7 @@ let server: ViteDevServer | http.Server
 let tempDir: string
 let err: Error
 
-const logs = ((global as any).pageLogs = [])
+const logs = ((global as any).browserLogs = [])
 const onConsole = (msg) => {
   logs.push(msg.text())
 }
@@ -57,11 +57,11 @@ beforeAll(async () => {
       if (!isBuildTest) {
         server = await (await createServer(options)).listen()
         // use resolved port from server
-        const url = ((global as any).testURL = `http://localhost:${server.config.server.port}`)
+        const url = ((global as any).viteTestUrl = `http://localhost:${server.config.server.port}`)
         await page.goto(url)
       } else {
         await build(options)
-        const url = ((global as any).testURL = await startStaticServer())
+        const url = ((global as any).viteTestUrl = await startStaticServer())
         await page.goto(url)
       }
     }

yarn.lock

@@ -4655,6 +4655,13 @@ postcss-modules@^4.0.0:
     postcss-modules-values "^4.0.0"
     string-hash "^1.1.1"
 
+postcss-nested@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.3.tgz#2f46d77a06fc98d9c22344fd097396f5431386db"
+  integrity sha512-R2LHPw+u5hFfDgJG748KpGbJyTv7Yr33/2tIMWxquYuHTd9EXu27PYnKi7BxMXLtzKC0a0WVsqHtd7qIluQu/g==
+  dependencies:
+    postcss-selector-parser "^6.0.4"
+
 postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3"