Move optimizeCss to the packages where it's used (tailwindlabs#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

Author: RobinMalfait

CHANGELOG.md

@@ -7,16 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-### Fixed
-
-- Fix incorrect properties in line-clamp utilities ([#13220](https://github.com/tailwindlabs/tailwindcss/pull/13220))
-
 ### Added
 
 - Support `@theme reference { … }` for defining theme values without emitting variables ([#13222](https://github.com/tailwindlabs/tailwindcss/pull/13222))
+- Move `optimizeCss` to the packages where it's used ([#13230](https://github.com/tailwindlabs/tailwindcss/pull/13230))
 
 ### Fixed
 
+- Fix incorrect properties in line-clamp utilities ([#13220](https://github.com/tailwindlabs/tailwindcss/pull/13220))
 - Don't rely on existence of `--default-transition-*` variables in `transition-*` utilities ([#13219](https://github.com/tailwindlabs/tailwindcss/pull/13219))
 
 ## [4.0.0-alpha.8] - 2024-03-11

packages/@tailwindcss-cli/package.json

@@ -31,6 +31,7 @@
   "dependencies": {
     "@parcel/watcher": "^2.4.1",
     "@tailwindcss/oxide": "workspace:^",
+    "lightningcss": "^1.24.0",
     "mri": "^1.2.0",
     "picocolors": "^1.0.0",
     "postcss": "8.4.24",

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

@@ -1,11 +1,12 @@
 import watcher from '@parcel/watcher'
 import { IO, Parsing, scanDir, scanFiles, type ChangedContent } from '@tailwindcss/oxide'
+import { Features, transform } from 'lightningcss'
 import { existsSync } from 'node:fs'
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import postcss from 'postcss'
 import atImport from 'postcss-import'
-import { compile, optimizeCss } from 'tailwindcss'
+import { compile } from 'tailwindcss'
 import type { Arg, Result } from '../../utils/args'
 import {
   eprintln,
@@ -253,3 +254,27 @@ function handleImports(
       ),
     ])
 }
+
+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-postcss/package.json

@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@tailwindcss/oxide": "workspace:^",
+    "lightningcss": "^1.24.0",
     "postcss-import": "^16.0.0",
     "tailwindcss": "workspace:^"
   },

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

@@ -1,8 +1,9 @@
 import { scanDir } from '@tailwindcss/oxide'
 import fs from 'fs'
+import { Features, transform } from 'lightningcss'
 import postcss, { type AcceptedPlugin, type PluginCreator } from 'postcss'
 import postcssImport from 'postcss-import'
-import { compile, optimizeCss } from 'tailwindcss'
+import { compile } from 'tailwindcss'
 
 /**
  * A Map that can generate default values for keys that don't exist.
@@ -150,4 +151,28 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
   }
 }
 
+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 default Object.assign(tailwindcss, { postcss: true }) as PluginCreator<PluginOptions>

packages/@tailwindcss-vite/package.json

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@tailwindcss/oxide": "workspace:^",
+    "lightningcss": "^1.24.0",
     "tailwindcss": "workspace:^"
   },
   "devDependencies": {

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

@@ -1,6 +1,7 @@
 import { IO, Parsing, scanFiles } from '@tailwindcss/oxide'
+import { Features, transform } from 'lightningcss'
 import path from 'path'
-import { compile, optimizeCss } from 'tailwindcss'
+import { compile } from 'tailwindcss'
 import type { Plugin, Update, ViteDevServer } from 'vite'
 
 export default function tailwindcss(): Plugin[] {
@@ -181,3 +182,27 @@ export default function tailwindcss(): Plugin[] {
     },
   ] satisfies Plugin[]
 }
+
+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/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()
+}