De-duplicate lightningcss configuration

packages/@tailwindcss-cli/package.json

@@ -33,7 +33,6 @@
     "@tailwindcss/node": "workspace:*",
     "@tailwindcss/oxide": "workspace:*",
     "enhanced-resolve": "^5.18.1",
-    "lightningcss": "catalog:",
     "mri": "^1.2.0",
     "picocolors": "^1.1.1",
     "tailwindcss": "workspace:*"

packages/@tailwindcss-cli/src/commands/build/index.ts

@@ -2,10 +2,10 @@ import watcher from '@parcel/watcher'
 import { compile, env, Instrumentation } from '@tailwindcss/node'
 import { clearRequireCache } from '@tailwindcss/node/require-cache'
 import { Scanner, type ChangedContent } from '@tailwindcss/oxide'
-import { Features, transform } from 'lightningcss'
 import { existsSync, type Stats } from 'node:fs'
 import fs from 'node:fs/promises'
 import path from 'node:path'
+import { optimize } from '../../../../@tailwindcss-node/src'
 import type { Arg, Result } from '../../utils/args'
 import { Disposables } from '../../utils/disposables'
 import {
@@ -128,7 +128,7 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
     if (args['--minify'] || args['--optimize']) {
       if (css !== previous.css) {
         DEBUG && I.start('Optimize CSS')
-        let optimizedCss = optimizeCss(css, {
+        let optimizedCss = optimize(css, {
           file: args['--input'] ?? 'input.css',
           minify: args['--minify'] ?? false,
         })
@@ -430,39 +430,6 @@ async function createWatchers(dirs: string[], cb: (files: string[]) => void) {
   }
 }
 
-function optimizeCss(
-  input: string,
-  { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},
-) {
-  function optimize(code: Buffer | Uint8Array) {
-    return transform({
-      filename: file,
-      code,
-      minify,
-      sourceMap: false,
-      drafts: {
-        customMedia: true,
-      },
-      nonStandard: {
-        deepSelectorCombinator: true,
-      },
-      include: Features.Nesting | Features.MediaQueries,
-      exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark,
-      targets: {
-        safari: (16 << 16) | (4 << 8),
-        ios_saf: (16 << 16) | (4 << 8),
-        firefox: 128 << 16,
-        chrome: 111 << 16,
-      },
-      errorRecovery: true,
-    }).code
-  }
-
-  // Running Lightning CSS twice to ensure that adjacent rules are merged after
-  // nesting is applied. This creates a more optimized output.
-  return optimize(optimize(Buffer.from(input))).toString()
-}
-
 function watchDirectories(scanner: Scanner) {
   return [...new Set(scanner.normalizedSources.flatMap((globEntry) => globEntry.base))]
 }

packages/@tailwindcss-node/package.json

@@ -39,6 +39,7 @@
   "dependencies": {
     "enhanced-resolve": "^5.18.1",
     "jiti": "^2.4.2",
-    "tailwindcss": "workspace:*"
+    "tailwindcss": "workspace:*",
+    "lightningcss": "catalog:"
   }
 }

packages/@tailwindcss-node/src/index.cts

@@ -4,6 +4,7 @@ import * as env from './env'
 export * from './compile'
 export * from './instrumentation'
 export * from './normalize-path'
+export * from './optimize'
 export { env }
 
 // In Bun, ESM modules will also populate `require.cache`, so the module hook is

packages/@tailwindcss-node/src/index.ts

@@ -1,9 +1,10 @@
 import * as Module from 'node:module'
 import { pathToFileURL } from 'node:url'
 import * as env from './env'
-export { __unstable__loadDesignSystem, compile, compileAst, Features } from './compile'
+export * from './compile'
 export * from './instrumentation'
 export * from './normalize-path'
+export * from './optimize'
 export { env }
 
 // In Bun, ESM modules will also populate `require.cache`, so the module hook is

packages/@tailwindcss-node/src/optimize.ts

@@ -0,0 +1,40 @@
+import { Features, transform } from 'lightningcss'
+
+export function optimize(
+  input: string,
+  { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},
+): string {
+  function optimize(code: Buffer | Uint8Array) {
+    return transform({
+      filename: file,
+      code: code as any,
+      minify,
+      sourceMap: false,
+      drafts: {
+        customMedia: true,
+      },
+      nonStandard: {
+        deepSelectorCombinator: true,
+      },
+      include: Features.Nesting | Features.MediaQueries,
+      exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark,
+      targets: {
+        safari: (16 << 16) | (4 << 8),
+        ios_saf: (16 << 16) | (4 << 8),
+        firefox: 128 << 16,
+        chrome: 111 << 16,
+      },
+      errorRecovery: true,
+    }).code
+  }
+
+  // Running Lightning CSS twice to ensure that adjacent rules are merged after
+  // nesting is applied. This creates a more optimized output.
+  let out = optimize(optimize(Buffer.from(input))).toString()
+
+  // Work around an issue where the media query range syntax transpilation
+  // generates code that is invalid with `@media` queries level 3.
+  out = out.replaceAll(/\@media not \(/g, '@media not all and (')
+
+  return out
+}

packages/@tailwindcss-postcss/package.json

@@ -33,7 +33,6 @@
     "@alloc/quick-lru": "^5.2.0",
     "@tailwindcss/node": "workspace:*",
     "@tailwindcss/oxide": "workspace:*",
-    "lightningcss": "catalog:",
     "postcss": "^8.4.41",
     "tailwindcss": "workspace:*"
   },

packages/@tailwindcss-postcss/src/index.ts

@@ -1,8 +1,13 @@
 import QuickLRU from '@alloc/quick-lru'
-import { compileAst, env, Features, Instrumentation } from '@tailwindcss/node'
+import {
+  compileAst,
+  env,
+  Features,
+  Instrumentation,
+  optimize as optimizeCss,
+} from '@tailwindcss/node'
 import { clearRequireCache } from '@tailwindcss/node/require-cache'
 import { Scanner } from '@tailwindcss/oxide'
-import { Features as LightningCssFeatures, transform } from 'lightningcss'
 import fs from 'node:fs'
 import path, { relative } from 'node:path'
 import postcss, { type AcceptedPlugin, type PluginCreator } from 'postcss'
@@ -268,6 +273,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
               DEBUG && I.end('AST -> CSS')
 
               DEBUG && I.start('Lightning CSS')
+              // @ts-ignore
               let ast = optimizeCss(css, {
                 minify: typeof optimize === 'object' ? optimize.minify : true,
               })
@@ -308,43 +314,4 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
   }
 }
 
-function optimizeCss(
-  input: string,
-  { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},
-) {
-  function optimize(code: Buffer | Uint8Array) {
-    return transform({
-      filename: file,
-      code,
-      minify,
-      sourceMap: false,
-      drafts: {
-        customMedia: true,
-      },
-      nonStandard: {
-        deepSelectorCombinator: true,
-      },
-      include: LightningCssFeatures.Nesting | LightningCssFeatures.MediaRangeSyntax,
-      exclude:
-        LightningCssFeatures.LogicalProperties |
-        LightningCssFeatures.DirSelector |
-        LightningCssFeatures.LightDark,
-      targets: {
-        safari: (15 << 16) | (4 << 8),
-        ios_saf: (16 << 16) | (4 << 8),
-        firefox: 128 << 16,
-        chrome: 111 << 16,
-      },
-      errorRecovery: true,
-    }).code
-  }
-
-  let out = optimize(optimize(Buffer.from(input))).toString()
-  out = out.replaceAll(/\@media (\()?not /g, '@media $1not all and ')
-
-  // Running Lightning CSS twice to ensure that adjacent rules are merged after
-  // nesting is applied. This creates a more optimized output.
-  return out
-}
-
 export default Object.assign(tailwindcss, { postcss: true }) as PluginCreator<PluginOptions>

packages/@tailwindcss-vite/package.json

@@ -30,7 +30,6 @@
   "dependencies": {
     "@tailwindcss/node": "workspace:*",
     "@tailwindcss/oxide": "workspace:*",
-    "lightningcss": "catalog:",
     "tailwindcss": "workspace:*"
   },
   "devDependencies": {

packages/@tailwindcss-vite/src/index.ts

@@ -1,7 +1,6 @@
-import { compile, env, Features, Instrumentation, normalizePath } from '@tailwindcss/node'
+import { compile, env, Features, Instrumentation, normalizePath, optimize } from '@tailwindcss/node'
 import { clearRequireCache } from '@tailwindcss/node/require-cache'
 import { Scanner } from '@tailwindcss/oxide'
-import { Features as LightningCssFeatures, transform } from 'lightningcss'
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import type { Plugin, ResolvedConfig, ViteDevServer } from 'vite'
@@ -102,7 +101,7 @@ export default function tailwindcss(): Plugin[] {
         DEBUG && I.end('[@tailwindcss/vite] Generate CSS (build)')
 
         DEBUG && I.start('[@tailwindcss/vite] Optimize CSS')
-        generated = optimizeCss(generated, { minify })
+        generated = optimize(generated, { minify })
         DEBUG && I.end('[@tailwindcss/vite] Optimize CSS')
 
         return { code: generated }
@@ -127,42 +126,6 @@ function isPotentialCssRootFile(id: string) {
   return isCssFile
 }
 
-function optimizeCss(
-  input: string,
-  { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},
-) {
-  function optimize(code: Buffer | Uint8Array | any) {
-    return transform({
-      filename: file,
-      code,
-      minify,
-      sourceMap: false,
-      drafts: {
-        customMedia: true,
-      },
-      nonStandard: {
-        deepSelectorCombinator: true,
-      },
-      include: LightningCssFeatures.Nesting | LightningCssFeatures.MediaQueries,
-      exclude:
-        LightningCssFeatures.LogicalProperties |
-        LightningCssFeatures.DirSelector |
-        LightningCssFeatures.LightDark,
-      targets: {
-        safari: (16 << 16) | (4 << 8),
-        ios_saf: (16 << 16) | (4 << 8),
-        firefox: 128 << 16,
-        chrome: 111 << 16,
-      },
-      errorRecovery: true,
-    }).code
-  }
-
-  // Running Lightning CSS twice to ensure that adjacent rules are merged after
-  // nesting is applied. This creates a more optimized output.
-  return optimize(optimize(Buffer.from(input))).toString()
-}
-
 function idToPath(id: string) {
   return path.resolve(id.replace(/\?.*$/, ''))
 }

packages/tailwindcss/src/test-utils/run.ts

@@ -1,49 +1,18 @@
-import { Features, transform } from 'lightningcss'
 import { compile } from '..'
+import { optimize } from '../../../@tailwindcss-node/src/optimize'
 
 export async function compileCss(
   css: string,
   candidates: string[] = [],
   options: Parameters<typeof compile>[1] = {},
 ) {
   let { build } = await compile(css, options)
-  return optimizeCss(build(candidates)).trim()
+  return optimize(build(candidates)).trim()
 }
 
 export async function run(candidates: string[]) {
   let { build } = await compile('@tailwind utilities;')
-  return optimizeCss(build(candidates)).trim()
+  return optimize(build(candidates)).trim()
 }
 
-export function optimizeCss(
-  input: string,
-  { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},
-) {
-  function optimize(code: Buffer | Uint8Array) {
-    return transform({
-      filename: file,
-      code,
-      minify,
-      sourceMap: false,
-      drafts: {
-        customMedia: true,
-      },
-      nonStandard: {
-        deepSelectorCombinator: true,
-      },
-      include: Features.Nesting | Features.MediaQueries,
-      exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark,
-      targets: {
-        safari: (16 << 16) | (4 << 8),
-        ios_saf: (16 << 16) | (4 << 8),
-        firefox: 128 << 16,
-        chrome: 111 << 16,
-      },
-      errorRecovery: true,
-    }).code
-  }
-
-  // Running Lightning CSS twice to ensure that adjacent rules are merged after
-  // nesting is applied. This creates a more optimized output.
-  return optimize(optimize(Buffer.from(input))).toString()
-}
+export const optimizeCss = optimize