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 <jordan@cryptica.me>

* Update CHANGELOG.md

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

* run prettier

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

.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
 

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
 

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",

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

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')
+}