feat(css): add support for Lightning CSS (#12807)

.eslintrc.cjs

@@ -135,7 +135,11 @@ module.exports = defineConfig({
       },
     },
     {
-      files: ['packages/vite/src/types/**', '*.spec.ts'],
+      files: [
+        'packages/vite/src/types/**',
+        'packages/vite/scripts/**',
+        '*.spec.ts',
+      ],
       rules: {
         'n/no-extraneous-import': 'off',
       },

packages/vite/api-extractor.json

@@ -5,6 +5,8 @@
 
   "mainEntryPointFilePath": "./temp/node/index.d.ts",
 
+  "bundledPackages": ["lightningcss"],
+
   "dtsRollup": {
     "enabled": true,
     "untrimmedFilePath": "",

packages/vite/package.json

@@ -56,7 +56,7 @@
     "build-types": "run-s build-types-temp build-types-pre-patch build-types-roll build-types-post-patch build-types-check",
     "build-types-temp": "tsc --emitDeclarationOnly --outDir temp/node -p src/node",
     "build-types-pre-patch": "tsx scripts/prePatchTypes.ts",
-    "build-types-roll": "api-extractor run && rimraf temp",
+    "build-types-roll": "tsx scripts/api-extractor.ts run && rimraf temp",
     "build-types-post-patch": "tsx scripts/postPatchTypes.ts",
     "build-types-check": "tsx scripts/checkBuiltTypes.ts && tsc --project tsconfig.check.json",
     "typecheck": "tsc --noEmit",
@@ -108,6 +108,7 @@
     "http-proxy": "^1.18.1",
     "json-stable-stringify": "^1.0.2",
     "launch-editor-middleware": "^2.6.0",
+    "lightningcss": "^1.21.0",
     "magic-string": "^0.30.0",
     "micromatch": "^4.0.5",
     "mlly": "^1.3.0",
@@ -139,6 +140,7 @@
     "sass": "*",
     "stylus": "*",
     "sugarss": "*",
+    "lightningcss": "^1.21.0",
     "terser": "^5.4.0"
   },
   "peerDependenciesMeta": {
@@ -157,6 +159,9 @@
     "sugarss": {
       "optional": true
     },
+    "lightningcss": {
+      "optional": true
+    },
     "terser": {
       "optional": true
     }

packages/vite/rollup.config.ts

@@ -160,6 +160,7 @@ function createNodeConfig(isProduction: boolean) {
     },
     external: [
       'fsevents',
+      'lightningcss',
       ...Object.keys(pkg.dependencies),
       ...(isProduction ? [] : Object.keys(pkg.devDependencies)),
     ],

packages/vite/scripts/api-extractor.ts

@@ -0,0 +1,25 @@
+import { Extractor, ExtractorConfig } from '@microsoft/api-extractor'
+
+const result = Extractor.invoke(
+  ExtractorConfig.loadFileAndPrepare('./api-extractor.json'),
+  {
+    messageCallback: (message) => {
+      const ignore = () => {
+        // @ts-expect-error TS requires to use the const enum, which is not available as the named export in tsx
+        message.logLevel = 'none'
+      }
+      if (message.sourceFilePath?.includes('lightningcss')) {
+        ignore()
+      }
+      if (message.messageId === 'ae-forgotten-export') {
+        if (message.sourceFilePath?.endsWith('/src/types/lightningcss.d.ts')) {
+          // We only expose LightningCSS types via prefixed types to avoid
+          // having confusing name like "Targets" in Vite types
+          ignore()
+        }
+      }
+    },
+  },
+)
+
+if (!result.succeeded) process.exit(1)

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

@@ -3,7 +3,12 @@ import path from 'node:path'
 import { describe, expect, test, vi } from 'vitest'
 import { resolveConfig } from '../../config'
 import type { InlineConfig } from '../../config'
-import { cssPlugin, cssUrlRE, hoistAtRules } from '../../plugins/css'
+import {
+  convertTargets,
+  cssPlugin,
+  cssUrlRE,
+  hoistAtRules,
+} from '../../plugins/css'
 
 describe('search css url function', () => {
   test('some spaces before it', () => {
@@ -237,3 +242,19 @@ async function createCssPluginTransform(
     },
   }
 }
+
+describe('convertTargets', () => {
+  test('basic cases', () => {
+    expect(convertTargets('es2018')).toStrictEqual({
+      chrome: 4128768,
+      edge: 5177344,
+      firefox: 3801088,
+      safari: 786432,
+      opera: 3276800,
+    })
+    expect(convertTargets(['safari13.1', 'ios13', 'node14'])).toStrictEqual({
+      ios_saf: 851968,
+      safari: 852224,
+    })
+  })
+})

packages/vite/src/node/build.ts

@@ -130,9 +130,9 @@ export interface BuildOptions {
   /**
    * Override CSS minification specifically instead of defaulting to `build.minify`,
    * so you can configure minification for JS and CSS separately.
-   * @default minify
+   * @default 'esbuild'
    */
-  cssMinify?: boolean
+  cssMinify?: boolean | 'esbuild' | 'lightningcss'
   /**
    * If `true`, a separate sourcemap file will be created. If 'inline', the
    * sourcemap will be appended to the resulting output file as data URI.

packages/vite/src/node/config.ts

@@ -21,7 +21,11 @@ import type { ResolvedServerOptions, ServerOptions } from './server'
 import { resolveServerOptions } from './server'
 import type { PreviewOptions, ResolvedPreviewOptions } from './preview'
 import { resolvePreviewOptions } from './preview'
-import type { CSSOptions } from './plugins/css'
+import {
+  type CSSOptions,
+  type ResolvedCSSOptions,
+  resolveCSSOptions,
+} from './plugins/css'
 import {
   asyncFlatten,
   createDebugger,
@@ -326,7 +330,10 @@ export interface InlineConfig extends UserConfig {
 }
 
 export type ResolvedConfig = Readonly<
-  Omit<UserConfig, 'plugins' | 'assetsInclude' | 'optimizeDeps' | 'worker'> & {
+  Omit<
+    UserConfig,
+    'plugins' | 'css' | 'assetsInclude' | 'optimizeDeps' | 'worker'
+  > & {
     configFile: string | undefined
     configFileDependencies: string[]
     inlineConfig: InlineConfig
@@ -349,6 +356,7 @@ export type ResolvedConfig = Readonly<
       alias: Alias[]
     }
     plugins: readonly Plugin[]
+    css: ResolvedCSSOptions | undefined
     esbuild: ESBuildOptions | false
     server: ResolvedServerOptions
     build: ResolvedBuildOptions
@@ -672,6 +680,7 @@ export async function resolveConfig(
     mainConfig: null,
     isProduction,
     plugins: userPlugins,
+    css: resolveCSSOptions(config.css),
     esbuild:
       config.esbuild === false
         ? false

packages/vite/src/node/index.ts

@@ -76,6 +76,7 @@ export type {
   CSSOptions,
   CSSModulesOptions,
   PreprocessCSSResult,
+  ResolvedCSSOptions,
 } from './plugins/css'
 export type { JsonOptions } from './plugins/json'
 export type { TransformOptions as EsbuildTransformOptions } from 'esbuild'
@@ -143,3 +144,4 @@ export type { Terser } from 'dep-types/terser'
 export type { RollupCommonJSOptions } from 'dep-types/commonjs'
 export type { RollupDynamicImportVarsOptions } from 'dep-types/dynamicImportVars'
 export type { Matcher, AnymatchPattern, AnymatchFn } from 'dep-types/anymatch'
+export type { LightningCSSOptions } from 'dep-types/lightningcss'