From 0ee3508179966a767b7802a7262bb9d4ce2221da Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 13 Mar 2024 17:25:16 +0100 Subject: [PATCH] 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 --- CHANGELOG.md | 6 +-- packages/@tailwindcss-cli/package.json | 1 + .../src/commands/build/index.ts | 27 ++++++++++++- packages/@tailwindcss-postcss/package.json | 1 + packages/@tailwindcss-postcss/src/index.ts | 27 ++++++++++++- packages/@tailwindcss-vite/package.json | 1 + packages/@tailwindcss-vite/src/index.ts | 27 ++++++++++++- packages/tailwindcss/package.json | 6 +-- packages/tailwindcss/src/index.ts | 25 ------------ packages/tailwindcss/src/test-utils/run.ts | 27 ++++++++++++- packages/tailwindcss/tests/ui.spec.ts | 3 +- playgrounds/vite/package.json | 14 +++---- pnpm-lock.yaml | 38 ++++++++++--------- 13 files changed, 141 insertions(+), 62 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ed85eb376..f44d17f02 100644 --- 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 diff --git a/packages/@tailwindcss-cli/package.json b/packages/@tailwindcss-cli/package.json index 58b2439dd..0f45742bf 100644 --- 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", diff --git a/packages/@tailwindcss-cli/src/commands/build/index.ts b/packages/@tailwindcss-cli/src/commands/build/index.ts index e4f65055e..f739dd7fa 100644 --- 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() +} diff --git a/packages/@tailwindcss-postcss/package.json b/packages/@tailwindcss-postcss/package.json index e8b3c7d0b..71f3aa518 100644 --- 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:^" }, diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index fbaeb0bd8..6ccaff3f0 100644 --- 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 diff --git a/packages/@tailwindcss-vite/package.json b/packages/@tailwindcss-vite/package.json index 1558b8b99..459879021 100644 --- 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": { diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index 64cfa3036..f3eb18790 100644 --- 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() +} diff --git a/packages/tailwindcss/package.json b/packages/tailwindcss/package.json index 68529f0b8..ebcb49c7d 100644 --- 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" } } diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index 9e019c924..34a095584 100644 --- 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() diff --git a/packages/tailwindcss/src/test-utils/run.ts b/packages/tailwindcss/src/test-utils/run.ts index 039560482..d360f2eaa 100644 --- 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() +} diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts index f16736f66..a28f64001 100644 --- 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 diff --git a/playgrounds/vite/package.json b/playgrounds/vite/package.json index 48f7bae60..0e9157623 100644 --- 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" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c869e9925..1161f7e1e 100644 --- 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: