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.

package.json

@@ -38,8 +38,6 @@
     "@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,12 +17,6 @@ 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
@@ -31,7 +25,7 @@ importers:
         version: 3.2.4(prettier@3.2.5)(typescript@5.3.3)
       tsup:
         specifier: ^8.0.1
-        version: 8.0.1(postcss@8.4.24)(typescript@5.3.3)
+        version: 8.0.1(typescript@5.3.3)
       turbo:
         specifier: ^1.12.4
         version: 1.12.4
@@ -3577,6 +3571,7 @@ 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==}
@@ -3617,8 +3612,9 @@ 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@8.4.24):
+  /postcss-load-config@4.0.2:
     resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
     engines: {node: '>= 14'}
     peerDependencies:
@@ -3631,12 +3627,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==}
@@ -3750,6 +3746,7 @@ packages:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
       pify: 2.3.0
+    dev: false
 
   /readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
@@ -4219,7 +4216,7 @@ packages:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
     dev: false
 
-  /tsup@8.0.1(postcss@8.4.24)(typescript@5.3.3):
+  /tsup@8.0.1(typescript@5.3.3):
     resolution: {integrity: sha512-hvW7gUSG96j53ZTSlT4j/KL0q1Q2l6TqGBFc6/mu/L46IoNWqLLUzLRLP1R8Q7xrJTmkDxxDoojV5uCVs1sVOg==}
     engines: {node: '>=18'}
     hasBin: true
@@ -4246,8 +4243,7 @@ packages:
       execa: 5.1.1
       globby: 11.1.0
       joycon: 3.1.1
-      postcss: 8.4.24
-      postcss-load-config: 4.0.2(postcss@8.4.24)
+      postcss-load-config: 4.0.2
       resolve-from: 5.0.0
       rollup: 4.9.6
       source-map: 0.8.0-beta.0

scripts/pre-publish-optimizations.mjs

@@ -1,7 +1,5 @@
-import fs from 'node:fs/promises'
+import fs from 'node:fs'
 import path from 'node:path'
-import postcss from 'postcss'
-import atImport from 'postcss-import'
 
 // 1. Performance optimization: Inline the contents of the
 //    `tailwindcss/index.css` file so that we don't require to handle imports at
@@ -9,12 +7,29 @@ import atImport from 'postcss-import'
 {
   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')
-  if (contents.includes('@import')) {
-    let inlined = await postcss()
-      .use(atImport())
-      .process(contents, { from: file })
-      .then((result) => result.css)
-    await fs.writeFile(file, inlined, 'utf-8')
+  let inlined = inline(file)
+  fs.writeFileSync(file, inlined, 'utf-8')
+
+  // Recursively inlines `@import` statements in the given file.
+  function inline(file) {
+    let contents = fs.readFileSync(file, 'utf-8')
+    if (!contents.includes('@import')) return contents
+
+    let dirname = path.dirname(file)
+
+    return contents.replace(/@import (["'])(.*?)\1(.*);/g, (_, _quote, importee, additional) => {
+      let contents = inline(path.resolve(dirname, importee)).trim()
+
+      if (additional.trim()) {
+        let layerMatch = /layer\((.*)\)/g.exec(additional)
+        if (layerMatch) {
+          return `@layer ${layerMatch[1]} {${contents}}`
+        }
+
+        return `@media (${additional.trim()}) {${contents}}`
+      }
+
+      return inline(path.resolve(dirname, importee))
+    })
   }
 }