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 13a4640.

* 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>

Author: 3 people

.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

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