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
2025-12-08 21:36:08 +00:00 · 2024-03-13 17:25:16 +01:00 · 2024-03-13 17:25:16 +01:00 · 0ee3508179
commit 0ee3508179
parent 91fca13981
13 changed files with 141 additions and 62 deletions
--- a/CHANGELOG.md
+++ b/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
--- a/packages/@tailwindcss-cli/package.json
+++ b/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",
--- a/packages/@tailwindcss-cli/src/commands/build/index.ts
+++ b/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()
+}
--- a/packages/@tailwindcss-postcss/package.json
+++ b/packages/@tailwindcss-postcss/package.json
@ -30,6 +30,7 @@
  },
  "dependencies": {
    "@tailwindcss/oxide": "workspace:^",
+    "lightningcss": "^1.24.0",
    "postcss-import": "^16.0.0",
    "tailwindcss": "workspace:^"
  },
--- a/packages/@tailwindcss-postcss/src/index.ts
+++ b/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>
--- a/packages/@tailwindcss-vite/package.json
+++ b/packages/@tailwindcss-vite/package.json
@ -29,6 +29,7 @@
  },
  "dependencies": {
    "@tailwindcss/oxide": "workspace:^",
+    "lightningcss": "^1.24.0",
    "tailwindcss": "workspace:^"
  },
  "devDependencies": {
--- a/packages/@tailwindcss-vite/src/index.ts
+++ b/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()
+}
--- a/packages/tailwindcss/package.json
+++ b/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"
  }
 }
--- a/packages/tailwindcss/src/index.ts
+++ b/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()
--- a/packages/tailwindcss/src/test-utils/run.ts
+++ b/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()
+}
--- a/packages/tailwindcss/tests/ui.spec.ts
+++ b/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
--- a/playgrounds/vite/package.json
+++ b/playgrounds/vite/package.json
@ -7,18 +7,18 @@
    "dev": "bun --bun vite ./src --config ./vite.config.ts",
    "build": "bun --bun vite build ./src --outDir ../dist --config ./vite.config.ts --emptyOutDir"
  },
-  "devDependencies": {
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
-    "bun": "^1.0.26",
-    "vite": "^5.0.11",
-    "vite-plugin-handlebars": "^2.0.0"
-  },
  "dependencies": {
    "@tailwindcss/vite": "workspace:^",
    "tailwindcss": "workspace:^",
    "@vitejs/plugin-react": "^4.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "bun": "^1.0.26",
+    "vite": "^5.0.11",
+    "vite-plugin-handlebars": "^2.0.0"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -103,6 +103,9 @@ importers:
      '@tailwindcss/oxide':
        specifier: workspace:^
        version: link:../../oxide/crates/node
+      lightningcss:
+        specifier: ^1.24.0
+        version: 1.24.0
      mri:
        specifier: ^1.2.0
        version: 1.2.0
@ -123,11 +126,20 @@ importers:
        specifier: ^14.0.3
        version: 14.0.3

+  packages/@tailwindcss-optimize:
+    dependencies:
+      lightningcss:
+        specifier: ^1.24.0
+        version: 1.24.0
+
  packages/@tailwindcss-postcss:
    dependencies:
      '@tailwindcss/oxide':
        specifier: workspace:^
        version: link:../../oxide/crates/node
+      lightningcss:
+        specifier: ^1.24.0
+        version: 1.24.0
      postcss-import:
        specifier: ^16.0.0
        version: 16.0.0(postcss@8.4.24)
@ -150,6 +162,9 @@ importers:
      '@tailwindcss/oxide':
        specifier: workspace:^
        version: link:../../oxide/crates/node
+      lightningcss:
+        specifier: ^1.24.0
+        version: 1.24.0
      tailwindcss:
        specifier: workspace:^
        version: link:../tailwindcss
@ -159,13 +174,9 @@ importers:
        version: 20.11.17
      vite:
        specifier: ^5.0.11
-        version: 5.1.1(@types/node@20.11.17)
+        version: 5.1.1(@types/node@20.11.17)(lightningcss@1.24.0)

  packages/tailwindcss:
-    dependencies:
-      lightningcss:
-        specifier: ^1.24.0
-        version: 1.24.0
    devDependencies:
      '@tailwindcss/oxide':
        specifier: workspace:^
@ -173,6 +184,9 @@ importers:
      '@types/node':
        specifier: ^20.10.8
        version: 20.11.17
+      lightningcss:
+        specifier: ^1.24.0
+        version: 1.24.0

  playgrounds/nextjs:
    dependencies:
@ -1878,7 +1892,6 @@ packages:
    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
    engines: {node: '>=0.10'}
    hasBin: true
-    dev: false

  /diff-sequences@29.6.3:
    resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
@ -3052,7 +3065,6 @@ packages:
    cpu: [arm64]
    os: [darwin]
    requiresBuild: true
-    dev: false
    optional: true

  /lightningcss-darwin-x64@1.24.0:
@ -3061,7 +3073,6 @@ packages:
    cpu: [x64]
    os: [darwin]
    requiresBuild: true
-    dev: false
    optional: true

  /lightningcss-freebsd-x64@1.24.0:
@ -3070,7 +3081,6 @@ packages:
    cpu: [x64]
    os: [freebsd]
    requiresBuild: true
-    dev: false
    optional: true

  /lightningcss-linux-arm-gnueabihf@1.24.0:
@ -3079,7 +3089,6 @@ packages:
    cpu: [arm]
    os: [linux]
    requiresBuild: true
-    dev: false
    optional: true

  /lightningcss-linux-arm64-gnu@1.24.0:
@ -3088,7 +3097,6 @@ packages:
    cpu: [arm64]
    os: [linux]
    requiresBuild: true
-    dev: false
    optional: true

  /lightningcss-linux-arm64-musl@1.24.0:
@ -3097,7 +3105,6 @@ packages:
    cpu: [arm64]
    os: [linux]
    requiresBuild: true
-    dev: false
    optional: true

  /lightningcss-linux-x64-gnu@1.24.0:
@ -3106,7 +3113,6 @@ packages:
    cpu: [x64]
    os: [linux]
    requiresBuild: true
-    dev: false
    optional: true

  /lightningcss-linux-x64-musl@1.24.0:
@ -3115,7 +3121,6 @@ packages:
    cpu: [x64]
    os: [linux]
    requiresBuild: true
-    dev: false
    optional: true

  /lightningcss-win32-x64-msvc@1.24.0:
@ -3124,7 +3129,6 @@ packages:
    cpu: [x64]
    os: [win32]
    requiresBuild: true
-    dev: false
    optional: true

  /lightningcss@1.24.0:
@ -3142,7 +3146,6 @@ packages:
      lightningcss-linux-x64-gnu: 1.24.0
      lightningcss-linux-x64-musl: 1.24.0
      lightningcss-win32-x64-msvc: 1.24.0
-    dev: false

  /lilconfig@3.0.0:
    resolution: {integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==}
@ -4459,7 +4462,7 @@ packages:
      - terser
    dev: true

-  /vite@5.1.1(@types/node@20.11.17):
+  /vite@5.1.1(@types/node@20.11.17)(lightningcss@1.24.0):
    resolution: {integrity: sha512-wclpAgY3F1tR7t9LL5CcHC41YPkQIpKUGeIuT8MdNwNZr6OqOTLs7JX5vIHAtzqLWXts0T+GDrh9pN2arneKqg==}
    engines: {node: ^18.0.0 || >=20.0.0}
    hasBin: true
@ -4489,6 +4492,7 @@ packages:
    dependencies:
      '@types/node': 20.11.17
      esbuild: 0.19.12
+      lightningcss: 1.24.0
      postcss: 8.4.35
      rollup: 4.9.6
    optionalDependencies: