diff --git a/package.json b/package.json index a449c9d0a..6687e06db 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8b244a690..1161f7e1e 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/scripts/pre-publish-optimizations.mjs b/scripts/pre-publish-optimizations.mjs index 4fa4ca09c..dadbac013 100644 --- a/scripts/pre-publish-optimizations.mjs +++ b/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)) + }) } }