Inline @import rules in tailwindcss/index.css at publish time for better performance

.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 the `tailwindcss/index.css` contents at publish time ([#13233](https://github.com/tailwindlabs/tailwindcss/pull/13233))
 
 ## [4.0.0-alpha.9] - 2024-03-13
 
@@ -98,3 +100,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Move the CLI into a separate `@tailwindcss/cli` package ([#13095](https://github.com/tailwindlabs/tailwindcss/pull/13095))
 
 ## [4.0.0-alpha.1] - 2024-03-06
+

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

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