Move optimizeCss to the packages where it's used (#13230)

* add `@tailwindcss/optimize` as a separate package

* remove lightningcss from `tailwindcss`

* import `optimizeCss` from `@tailwindcss/optimize`

* ensure we use `src/` files in development

* move `devDependencies` after `dependencies`

Just for consistency

* inline `optimizeCss` in leaf packages

Instead of introducing a custom `@tailwindcss/optimize` package

* update changelog

* fix changelog

packages/tailwindcss/package.json

@@ -58,11 +58,9 @@
     "theme.css",
     "utilities.css"
   ],
-  "dependencies": {
-    "lightningcss": "^1.24.0"
-  },
   "devDependencies": {
     "@tailwindcss/oxide": "workspace:^",
-    "@types/node": "^20.10.8"
+    "@types/node": "^20.10.8",
+    "lightningcss": "^1.24.0"
   }
 }

packages/tailwindcss/src/index.ts

@@ -1,4 +1,3 @@
-import { Features, transform } from 'lightningcss'
 import { version } from '../package.json'
 import { WalkAction, comment, decl, rule, toCss, walk, type AstNode, type Rule } from './ast'
 import { compileCandidates } from './compile'
@@ -230,30 +229,6 @@ export function compile(css: string): {
   }
 }
 
-export function optimizeCss(
-  input: string,
-  { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},
-) {
-  return transform({
-    filename: file,
-    code: Buffer.from(input),
-    minify,
-    sourceMap: false,
-    drafts: {
-      customMedia: true,
-    },
-    nonStandard: {
-      deepSelectorCombinator: true,
-    },
-    include: Features.Nesting,
-    exclude: Features.LogicalProperties,
-    targets: {
-      safari: (16 << 16) | (4 << 8),
-    },
-    errorRecovery: true,
-  }).code.toString()
-}
-
 export function __unstable__loadDesignSystem(css: string) {
   // Find all `@theme` declarations
   let theme = new Theme()

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

@@ -1,4 +1,5 @@
-import { compile, optimizeCss } from '..'
+import { Features, transform } from 'lightningcss'
+import { compile } from '..'
 
 export function compileCss(css: string, candidates: string[] = []) {
   return optimizeCss(compile(css).build(candidates)).trim()
@@ -7,3 +8,27 @@ export function compileCss(css: string, candidates: string[] = []) {
 export function run(candidates: string[]) {
   return optimizeCss(compile('@tailwind utilities;').build(candidates)).trim()
 }
+
+export function optimizeCss(
+  input: string,
+  { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},
+) {
+  return transform({
+    filename: file,
+    code: Buffer.from(input),
+    minify,
+    sourceMap: false,
+    drafts: {
+      customMedia: true,
+    },
+    nonStandard: {
+      deepSelectorCombinator: true,
+    },
+    include: Features.Nesting,
+    exclude: Features.LogicalProperties,
+    targets: {
+      safari: (16 << 16) | (4 << 8),
+    },
+    errorRecovery: true,
+  }).code.toString()
+}

packages/tailwindcss/tests/ui.spec.ts

@@ -2,7 +2,8 @@ import { expect, test, type Page } from '@playwright/test'
 import { IO, Parsing, scanFiles } from '@tailwindcss/oxide'
 import fs from 'fs'
 import path from 'path'
-import { compile, optimizeCss } from '../src'
+import { compile } from '../src'
+import { optimizeCss } from '../src/test-utils/run'
 
 const html = String.raw
 const css = String.raw