From 2937d6b847ed680b7f5a508653703a1ca48b0fb4 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 13 Mar 2024 15:19:38 +0100 Subject: [PATCH] inline `optimizeCss` in leaf packages Instead of introducing a custom `@tailwindcss/optimize` package --- packages/@tailwindcss-cli/package.json | 2 +- .../src/commands/build/index.ts | 26 +++++++++++- packages/@tailwindcss-optimize/README.md | 40 ------------------- packages/@tailwindcss-optimize/package.json | 39 ------------------ .../@tailwindcss-optimize/src/index.test.ts | 32 --------------- packages/@tailwindcss-optimize/src/index.ts | 25 ------------ packages/@tailwindcss-optimize/tsconfig.json | 3 -- packages/@tailwindcss-postcss/package.json | 2 +- packages/@tailwindcss-postcss/src/index.ts | 26 +++++++++++- packages/@tailwindcss-vite/package.json | 2 +- packages/@tailwindcss-vite/src/index.ts | 26 +++++++++++- packages/tailwindcss/package.json | 4 +- packages/tailwindcss/src/test-utils/run.ts | 26 +++++++++++- packages/tailwindcss/tests/ui.spec.ts | 2 +- pnpm-lock.yaml | 40 +++++++------------ 15 files changed, 121 insertions(+), 174 deletions(-) delete mode 100644 packages/@tailwindcss-optimize/README.md delete mode 100644 packages/@tailwindcss-optimize/package.json delete mode 100644 packages/@tailwindcss-optimize/src/index.test.ts delete mode 100644 packages/@tailwindcss-optimize/src/index.ts delete mode 100644 packages/@tailwindcss-optimize/tsconfig.json diff --git a/packages/@tailwindcss-cli/package.json b/packages/@tailwindcss-cli/package.json index 0efa4c16d494..0f45742bfa60 100644 --- a/packages/@tailwindcss-cli/package.json +++ b/packages/@tailwindcss-cli/package.json @@ -30,8 +30,8 @@ }, "dependencies": { "@parcel/watcher": "^2.4.1", - "@tailwindcss/optimize": "workspace:^", "@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 d0c89719b57f..f739dd7fa836 100644 --- a/packages/@tailwindcss-cli/src/commands/build/index.ts +++ b/packages/@tailwindcss-cli/src/commands/build/index.ts @@ -1,6 +1,6 @@ import watcher from '@parcel/watcher' -import { optimizeCss } from '@tailwindcss/optimize' 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' @@ -254,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-optimize/README.md b/packages/@tailwindcss-optimize/README.md deleted file mode 100644 index 95ec9d87ddcc..000000000000 --- a/packages/@tailwindcss-optimize/README.md +++ /dev/null @@ -1,40 +0,0 @@ -

- - - - - Tailwind CSS - - -

- -

- A utility-first CSS framework for rapidly building custom user interfaces. -

- -

- Build Status - Total Downloads - Latest Release - License -

- ---- - -## Documentation - -For full documentation, visit [tailwindcss.com](https://tailwindcss.com). - -## Community - -For help, discussion about best practices, or any other conversation that would benefit from being searchable: - -[Discuss Tailwind CSS on GitHub](https://github.com/tailwindcss/tailwindcss/discussions) - -For chatting with others using the framework: - -[Join the Tailwind CSS Discord Server](https://discord.gg/7NF8GNe) - -## Contributing - -If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindcss/tailwindcss/blob/next/.github/CONTRIBUTING.md) **before submitting a pull request**. diff --git a/packages/@tailwindcss-optimize/package.json b/packages/@tailwindcss-optimize/package.json deleted file mode 100644 index 99f2dadb507a..000000000000 --- a/packages/@tailwindcss-optimize/package.json +++ /dev/null @@ -1,39 +0,0 @@ -{ - "name": "@tailwindcss/optimize", - "version": "4.0.0-alpha.8", - "license": "MIT", - "repository": { - "type": "git", - "url": "git+https://github.com/tailwindlabs/tailwindcss.git", - "directory": "packages/@tailwindcss-optimize" - }, - "bugs": "https://github.com/tailwindlabs/tailwindcss/issues", - "homepage": "https://tailwindcss.com", - "scripts": { - "lint": "tsc --noEmit", - "build": "tsup-node ./src/index.ts --format esm,cjs --dts --cjsInterop --splitting --minify --clean", - "dev": "pnpm run build -- --watch" - }, - "files": [ - "dist/" - ], - "exports": { - ".": { - "types": "./src/index.ts", - "require": "./dist/index.js", - "import": "./src/index.ts" - } - }, - "publishConfig": { - "provenance": true, - "access": "public", - ".": { - "types": "./dist/index.d.ts", - "require": "./dist/index.js", - "import": "./dist/index.mjs" - } - }, - "dependencies": { - "lightningcss": "^1.24.0" - } -} diff --git a/packages/@tailwindcss-optimize/src/index.test.ts b/packages/@tailwindcss-optimize/src/index.test.ts deleted file mode 100644 index 23ce3eec6b6f..000000000000 --- a/packages/@tailwindcss-optimize/src/index.test.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { expect, it } from 'vitest' -import { optimizeCss } from '.' - -let css = String.raw - -it('should optimize the CSS', () => { - expect( - optimizeCss(css` - .foo { - color: white; - } - `), - ).toMatchInlineSnapshot(` - ".foo { - color: #fff; - } - " - `) -}) - -it('should optimize and minify the CSS', () => { - expect( - optimizeCss( - css` - .foo { - color: white; - } - `, - { minify: true }, - ), - ).toMatchInlineSnapshot(`".foo{color:#fff}"`) -}) diff --git a/packages/@tailwindcss-optimize/src/index.ts b/packages/@tailwindcss-optimize/src/index.ts deleted file mode 100644 index 91ef728e5fd0..000000000000 --- a/packages/@tailwindcss-optimize/src/index.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Features, transform } from 'lightningcss' - -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-optimize/tsconfig.json b/packages/@tailwindcss-optimize/tsconfig.json deleted file mode 100644 index 6ae022f65bf0..000000000000 --- a/packages/@tailwindcss-optimize/tsconfig.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": "../tsconfig.base.json", -} diff --git a/packages/@tailwindcss-postcss/package.json b/packages/@tailwindcss-postcss/package.json index ee3f7b479197..71f3aa518333 100644 --- a/packages/@tailwindcss-postcss/package.json +++ b/packages/@tailwindcss-postcss/package.json @@ -29,8 +29,8 @@ } }, "dependencies": { - "@tailwindcss/optimize": "workspace:^", "@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 395bca5199b0..6ccaff3f0bd8 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -1,6 +1,6 @@ -import { optimizeCss } from '@tailwindcss/optimize' 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 } from 'tailwindcss' @@ -151,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 7a094c90b04d..4598790210a5 100644 --- a/packages/@tailwindcss-vite/package.json +++ b/packages/@tailwindcss-vite/package.json @@ -28,8 +28,8 @@ } }, "dependencies": { - "@tailwindcss/optimize": "workspace:^", "@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 e356d0a6fe35..f3eb187906e8 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -1,5 +1,5 @@ -import { optimizeCss } from '@tailwindcss/optimize' import { IO, Parsing, scanFiles } from '@tailwindcss/oxide' +import { Features, transform } from 'lightningcss' import path from 'path' import { compile } from 'tailwindcss' import type { Plugin, Update, ViteDevServer } from 'vite' @@ -182,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 ea2ecba77052..ebcb49c7df1c 100644 --- a/packages/tailwindcss/package.json +++ b/packages/tailwindcss/package.json @@ -59,8 +59,8 @@ "utilities.css" ], "devDependencies": { - "@tailwindcss/optimize": "workspace:^", "@tailwindcss/oxide": "workspace:^", - "@types/node": "^20.10.8" + "@types/node": "^20.10.8", + "lightningcss": "^1.24.0" } } diff --git a/packages/tailwindcss/src/test-utils/run.ts b/packages/tailwindcss/src/test-utils/run.ts index cb4b3e3b4989..d360f2eaaed7 100644 --- a/packages/tailwindcss/src/test-utils/run.ts +++ b/packages/tailwindcss/src/test-utils/run.ts @@ -1,4 +1,4 @@ -import { optimizeCss } from '@tailwindcss/optimize' +import { Features, transform } from 'lightningcss' import { compile } from '..' export function compileCss(css: string, candidates: string[] = []) { @@ -8,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 aa6526d22a91..a28f64001a6a 100644 --- a/packages/tailwindcss/tests/ui.spec.ts +++ b/packages/tailwindcss/tests/ui.spec.ts @@ -1,9 +1,9 @@ import { expect, test, type Page } from '@playwright/test' -import { optimizeCss } from '@tailwindcss/optimize' import { IO, Parsing, scanFiles } from '@tailwindcss/oxide' import fs from 'fs' import path from 'path' import { compile } from '../src' +import { optimizeCss } from '../src/test-utils/run' const html = String.raw const css = String.raw diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 612b284b7873..1161f7e1e3f5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -100,12 +100,12 @@ importers: '@parcel/watcher': specifier: ^2.4.1 version: 2.4.1 - '@tailwindcss/optimize': - specifier: workspace:^ - version: link:../@tailwindcss-optimize '@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 @@ -134,12 +134,12 @@ importers: packages/@tailwindcss-postcss: dependencies: - '@tailwindcss/optimize': - specifier: workspace:^ - version: link:../@tailwindcss-optimize '@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) @@ -159,12 +159,12 @@ importers: packages/@tailwindcss-vite: dependencies: - '@tailwindcss/optimize': - specifier: workspace:^ - version: link:../@tailwindcss-optimize '@tailwindcss/oxide': specifier: workspace:^ version: link:../../oxide/crates/node + lightningcss: + specifier: ^1.24.0 + version: 1.24.0 tailwindcss: specifier: workspace:^ version: link:../tailwindcss @@ -174,19 +174,19 @@ 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: devDependencies: - '@tailwindcss/optimize': - specifier: workspace:^ - version: link:../@tailwindcss-optimize '@tailwindcss/oxide': specifier: workspace:^ version: link:../../oxide/crates/node '@types/node': specifier: ^20.10.8 version: 20.11.17 + lightningcss: + specifier: ^1.24.0 + version: 1.24.0 playgrounds/nextjs: dependencies: @@ -1892,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==} @@ -3066,7 +3065,6 @@ packages: cpu: [arm64] os: [darwin] requiresBuild: true - dev: false optional: true /lightningcss-darwin-x64@1.24.0: @@ -3075,7 +3073,6 @@ packages: cpu: [x64] os: [darwin] requiresBuild: true - dev: false optional: true /lightningcss-freebsd-x64@1.24.0: @@ -3084,7 +3081,6 @@ packages: cpu: [x64] os: [freebsd] requiresBuild: true - dev: false optional: true /lightningcss-linux-arm-gnueabihf@1.24.0: @@ -3093,7 +3089,6 @@ packages: cpu: [arm] os: [linux] requiresBuild: true - dev: false optional: true /lightningcss-linux-arm64-gnu@1.24.0: @@ -3102,7 +3097,6 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true - dev: false optional: true /lightningcss-linux-arm64-musl@1.24.0: @@ -3111,7 +3105,6 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true - dev: false optional: true /lightningcss-linux-x64-gnu@1.24.0: @@ -3120,7 +3113,6 @@ packages: cpu: [x64] os: [linux] requiresBuild: true - dev: false optional: true /lightningcss-linux-x64-musl@1.24.0: @@ -3129,7 +3121,6 @@ packages: cpu: [x64] os: [linux] requiresBuild: true - dev: false optional: true /lightningcss-win32-x64-msvc@1.24.0: @@ -3138,7 +3129,6 @@ packages: cpu: [x64] os: [win32] requiresBuild: true - dev: false optional: true /lightningcss@1.24.0: @@ -3156,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==} @@ -4473,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 @@ -4503,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: