From 9fc5aa16a38196a3d21fb234b38c8bccee3b086f Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 13 Mar 2024 22:26:10 +0100 Subject: [PATCH] Inline the `tailwindcss/index.css` contents at publish time (#13233) * add `pre-publish-optimizations` script * handle `@import` ourselves This implementation is fairly simple right now, because we don't have to worry about resolving folders or modules since we don't use them. * pretty print index.css file * update changelog * Revert "handle `@import` ourselves" This reverts commit 13a46404c16ee67e4e1b7eaf58ae67321113eb07. * drop the `1.` * Update scripts/pre-publish-optimizations.mjs Co-authored-by: Jordan Pittman * Update CHANGELOG.md Co-authored-by: Adam Wathan * run prettier --------- Co-authored-by: Jordan Pittman Co-authored-by: Adam Wathan --- .github/workflows/release-oxide.yml | 3 +++ CHANGELOG.md | 4 +++- package.json | 2 ++ pnpm-lock.yaml | 20 ++++++++++++-------- scripts/pre-publish-optimizations.mjs | 21 +++++++++++++++++++++ 5 files changed, 41 insertions(+), 9 deletions(-) create mode 100644 scripts/pre-publish-optimizations.mjs diff --git a/.github/workflows/release-oxide.yml b/.github/workflows/release-oxide.yml index 94a7d90fb..a5e2f8463 100644 --- a/.github/workflows/release-oxide.yml +++ b/.github/workflows/release-oxide.yml @@ -219,6 +219,9 @@ jobs: cp bindings-x86_64-unknown-linux-gnu/* ./npm/linux-x64-gnu/ cp bindings-x86_64-unknown-linux-musl/* ./npm/linux-x64-musl/ + - name: Run pre-publish optimizations scripts + run: node ./scripts/pre-publish-optimizations.mjs + - name: Lock pre-release versions run: node ./scripts/lock-pre-release-versions.mjs diff --git a/CHANGELOG.md b/CHANGELOG.md index 09cd489ce..7568f65ec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Changed + +- Inline `@import` rules in `tailwindcss/index.css` at publish time for better performance ([#13233](https://github.com/tailwindlabs/tailwindcss/pull/13233)) ## [4.0.0-alpha.9] - 2024-03-13 diff --git a/package.json b/package.json index 6687e06db..a449c9d0a 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,8 @@ "@playwright/test": "^1.41.2", "@types/node": "^20.11.19", "@vitest/coverage-v8": "^1.2.1", + "postcss": "8.4.24", + "postcss-import": "^16.0.0", "prettier": "^3.2.5", "prettier-plugin-organize-imports": "^3.2.4", "tsup": "^8.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1161f7e1e..8b244a690 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,12 @@ importers: '@vitest/coverage-v8': specifier: ^1.2.1 version: 1.2.2(vitest@1.2.2) + postcss: + specifier: 8.4.24 + version: 8.4.24 + postcss-import: + specifier: ^16.0.0 + version: 16.0.0(postcss@8.4.24) prettier: specifier: ^3.2.5 version: 3.2.5 @@ -25,7 +31,7 @@ importers: version: 3.2.4(prettier@3.2.5)(typescript@5.3.3) tsup: specifier: ^8.0.1 - version: 8.0.1(typescript@5.3.3) + version: 8.0.1(postcss@8.4.24)(typescript@5.3.3) turbo: specifier: ^1.12.4 version: 1.12.4 @@ -3571,7 +3577,6 @@ packages: /pify@2.3.0: resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==} engines: {node: '>=0.10.0'} - dev: false /pirates@4.0.6: resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==} @@ -3612,9 +3617,8 @@ packages: postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.8 - dev: false - /postcss-load-config@4.0.2: + /postcss-load-config@4.0.2(postcss@8.4.24): resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==} engines: {node: '>= 14'} peerDependencies: @@ -3627,12 +3631,12 @@ packages: optional: true dependencies: lilconfig: 3.0.0 + postcss: 8.4.24 yaml: 2.3.4 dev: true /postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} - dev: false /postcss@8.4.24: resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==} @@ -3746,7 +3750,6 @@ packages: resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==} dependencies: pify: 2.3.0 - dev: false /readdirp@3.6.0: resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} @@ -4216,7 +4219,7 @@ packages: resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} dev: false - /tsup@8.0.1(typescript@5.3.3): + /tsup@8.0.1(postcss@8.4.24)(typescript@5.3.3): resolution: {integrity: sha512-hvW7gUSG96j53ZTSlT4j/KL0q1Q2l6TqGBFc6/mu/L46IoNWqLLUzLRLP1R8Q7xrJTmkDxxDoojV5uCVs1sVOg==} engines: {node: '>=18'} hasBin: true @@ -4243,7 +4246,8 @@ packages: execa: 5.1.1 globby: 11.1.0 joycon: 3.1.1 - postcss-load-config: 4.0.2 + postcss: 8.4.24 + postcss-load-config: 4.0.2(postcss@8.4.24) resolve-from: 5.0.0 rollup: 4.9.6 source-map: 0.8.0-beta.0 diff --git a/scripts/pre-publish-optimizations.mjs b/scripts/pre-publish-optimizations.mjs new file mode 100644 index 000000000..9f72de212 --- /dev/null +++ b/scripts/pre-publish-optimizations.mjs @@ -0,0 +1,21 @@ +import fs from 'node:fs/promises' +import path from 'node:path' +import postcss from 'postcss' +import atImport from 'postcss-import' +import prettier from 'prettier' + +// Performance optimization: Inline the contents of the `tailwindcss/index.css` +// file so that we don't need to handle imports at runtime. +{ + let __dirname = path.dirname(new URL(import.meta.url).pathname) + let file = path.resolve(__dirname, '../packages/tailwindcss/index.css') + let contents = await fs.readFile(file, 'utf-8') + let inlined = await prettier.format( + await postcss() + .use(atImport()) + .process(contents, { from: file }) + .then((result) => result.css), + { filepath: file }, + ) + await fs.writeFile(file, inlined, 'utf-8') +}