revert: "fix(css): spread lightningcss options (#14024)" (#14209)

Author: ArnaudBarre

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

@@ -57,7 +57,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",

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/scripts/checkBuiltTypes.ts

@@ -17,9 +17,7 @@ const distDir = resolve(dir, '../dist')
 const pkgJson = JSON.parse(
   readFileSync(resolve(dir, '../package.json'), 'utf-8'),
 )
-const deps = new Set(
-  Object.keys(Object.assign(pkgJson.dependencies, pkgJson.peerDependencies)),
-)
+const deps = new Set(Object.keys(pkgJson.dependencies))
 
 type SpecifierError = {
   loc: SourceLocation | null | undefined

packages/vite/src/node/index.ts

@@ -74,7 +74,6 @@ export type {
 export type {
   CSSOptions,
   CSSModulesOptions,
-  LightningCSSOptions,
   PreprocessCSSResult,
   ResolvedCSSOptions,
 } from './plugins/css'
@@ -143,3 +142,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'

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

@@ -20,10 +20,10 @@ import type Sass from 'sass'
 import type Stylus from 'stylus'
 import type Less from 'less'
 import type { Alias } from 'dep-types/alias'
+import type { LightningCSSOptions } from 'dep-types/lightningcss'
 import type { TransformOptions } from 'esbuild'
 import { formatMessages, transform } from 'esbuild'
 import type { RawSourceMap } from '@ampproject/remapping'
-import type { BundleAsyncOptions, CustomAtRules } from 'lightningcss'
 import { getCodeWithSourcemap, injectSourcesContent } from '../server/sourcemap'
 import type { ModuleNode } from '../server/moduleGraph'
 import type { ResolveFn, ViteDevServer } from '../'
@@ -139,12 +139,6 @@ export type ResolvedCSSOptions = Omit<CSSOptions, 'lightningcss'> & {
   }
 }
 
-// remove options set by Vite
-export type LightningCSSOptions = Omit<
-  BundleAsyncOptions<CustomAtRules>,
-  'filename' | 'resolver' | 'minify' | 'sourceMap' | 'analyzeDependencies'
->
-
 export function resolveCSSOptions(
   options: CSSOptions | undefined,
 ): ResolvedCSSOptions | undefined {
@@ -2185,15 +2179,13 @@ async function compileLightningCSS(
     ? (await importLightningCSS()).transformStyleAttribute({
         filename,
         code: Buffer.from(src),
-        minify: config.isProduction && !!config.build.cssMinify,
         targets: config.css?.lightningcss?.targets,
+        minify: config.isProduction && !!config.build.cssMinify,
         analyzeDependencies: true,
-        visitor: config.css?.lightningcss?.visitor,
       })
     : await (
         await importLightningCSS()
       ).bundleAsync({
-        ...config.css?.lightningcss,
         filename,
         resolver: {
           read(filePath) {
@@ -2224,12 +2216,14 @@ async function compileLightningCSS(
             return id
           },
         },
+        targets: config.css?.lightningcss?.targets,
         minify: config.isProduction && !!config.build.cssMinify,
         sourceMap: config.css?.devSourcemap,
         analyzeDependencies: true,
         cssModules: cssModuleRE.test(id)
           ? config.css?.lightningcss?.cssModules ?? true
           : undefined,
+        drafts: config.css?.lightningcss?.drafts,
       })
 
   let css = res.code.toString()

packages/vite/src/types/lightningcss.d.ts

@@ -0,0 +1,23 @@
+import type {
+  CSSModulesConfig,
+  Drafts,
+  Features,
+  NonStandard,
+  PseudoClasses,
+  Targets,
+} from 'lightningcss'
+
+/**
+ * Options are spread, so you can also use options that are not typed here like
+ * visitor (not exposed because it would impact too much the bundle size)
+ */
+export type LightningCSSOptions = {
+  targets?: Targets
+  include?: Features
+  exclude?: Features
+  drafts?: Drafts
+  nonStandard?: NonStandard
+  pseudoClasses?: PseudoClasses
+  unusedSymbols?: string[]
+  cssModules?: CSSModulesConfig
+}