diff --git a/README.md b/README.md index c760f27..bae9c95 100644 --- a/README.md +++ b/README.md @@ -104,11 +104,6 @@ module.exports = { ⚠️ Note that you should _really_ **minify** and **purge** your app's CSS when building for production! -Recommendations: - -- Purge with `@fullhuman/postcss-purgecss`. -- Minify with `postcss-csso` - If you'd like to use the Tailwind config values in your custom CSS, you can install this Lookbook as an npm module and use its exported `defaultPostCssPlugins` function in a PostCSS setup (see "API" below). ### Configure diff --git a/lib/plugins/postcss-extract-media-query.js b/lib/plugins/postcss-extract-media-query.js index 25381b9..dbc7346 100644 --- a/lib/plugins/postcss-extract-media-query.js +++ b/lib/plugins/postcss-extract-media-query.js @@ -4,7 +4,7 @@ const fs = require('fs'); const path = require('path'); const postcss = require('postcss'); -const minify = require('postcss-csso'); +const minify = require('@csstools/postcss-minify'); const toKebabCase = (str) => str.toLowerCase().replace(/\s+/g, '-'); diff --git a/lib/postcss-plugins.js b/lib/postcss-plugins.js index 505b7e7..a0214cd 100644 --- a/lib/postcss-plugins.js +++ b/lib/postcss-plugins.js @@ -53,7 +53,7 @@ exports.defaultPlugins = ({ ...(bundle ? [ require('@fullhuman/postcss-purgecss')(purgeCssOpts), - require('postcss-csso'), + require('@csstools/postcss-minify'), ] : []), ]; diff --git a/package-lock.json b/package-lock.json index 82a6aa8..be1a4a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,9 +10,9 @@ "license": "UNLICENSED", "dependencies": { "@fullhuman/postcss-purgecss": "^6", + "@csstools/postcss-minify": "^2", "autoprefixer": "^10", "postcss-color-function": "^4", - "postcss-csso": "lookback/postcss-csso#fix/csso-container-queries", "postcss-import": "^16", "postcss-nested": "^6", "tailwindcss": "=2.0.2" @@ -29,6 +29,48 @@ "postcss": "^8" } }, + "node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.1.tgz", + "integrity": "sha512-UBqaiu7kU0lfvaP982/o3khfXccVlHPWp0/vwwiIgDF0GmqqqxoiXC/6FCjlS9u92f7CoEz6nXKQnrn1kIAkOw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@csstools/postcss-minify": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-minify/-/postcss-minify-2.0.1.tgz", + "integrity": "sha512-LcVHjHhI0DjMRzW73EHxICIgp1JNQV7H2ucTRZzxWOdWP+ODRz+bzcwo2HdtG7jvqMYKSpkxXhikhnYGFWMUxg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "dependencies": { + "@csstools/css-tokenizer": "^3.0.1" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, "node_modules/@fullhuman/postcss-purgecss": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-6.0.0.tgz", @@ -789,36 +831,11 @@ "ms": "^2.1.1" } }, - "node_modules/css-tree": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", - "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", - "dependencies": { - "mdn-data": "2.0.28", - "source-map-js": "^1.0.1" - }, - "engines": { - "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", - "npm": ">=7.0.0" - } - }, "node_modules/css-unit-converter": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz", "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==" }, - "node_modules/csso": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz", - "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", - "dependencies": { - "css-tree": "~2.2.0" - }, - "engines": { - "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", - "npm": ">=7.0.0" - } - }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -1585,11 +1602,6 @@ "node": ">=10" } }, - "node_modules/mdn-data": { - "version": "2.0.28", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", - "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==" - }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -2232,21 +2244,6 @@ "node": ">=4" } }, - "node_modules/postcss-csso": { - "version": "6.0.1", - "resolved": "git+ssh://git@github.com/lookback/postcss-csso.git#6cb7497ebb1c3788e2304267ac30b244f7809947", - "license": "MIT", - "dependencies": { - "csso": "^5.0.5" - }, - "engines": { - "node": "^12.20.0 || ^14.13.0 || >=15.0.0", - "npm": ">=7.0.0" - }, - "peerDependencies": { - "postcss": "^8.0.0" - } - }, "node_modules/postcss-functions": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz", @@ -3525,6 +3522,19 @@ } }, "dependencies": { + "@csstools/css-tokenizer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.1.tgz", + "integrity": "sha512-UBqaiu7kU0lfvaP982/o3khfXccVlHPWp0/vwwiIgDF0GmqqqxoiXC/6FCjlS9u92f7CoEz6nXKQnrn1kIAkOw==" + }, + "@csstools/postcss-minify": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-minify/-/postcss-minify-2.0.1.tgz", + "integrity": "sha512-LcVHjHhI0DjMRzW73EHxICIgp1JNQV7H2ucTRZzxWOdWP+ODRz+bzcwo2HdtG7jvqMYKSpkxXhikhnYGFWMUxg==", + "requires": { + "@csstools/css-tokenizer": "^3.0.1" + } + }, "@fullhuman/postcss-purgecss": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-6.0.0.tgz", @@ -4064,28 +4074,11 @@ } } }, - "css-tree": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", - "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", - "requires": { - "mdn-data": "2.0.28", - "source-map-js": "^1.0.1" - } - }, "css-unit-converter": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz", "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==" }, - "csso": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz", - "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", - "requires": { - "css-tree": "~2.2.0" - } - }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -4643,11 +4636,6 @@ "yallist": "^4.0.0" } }, - "mdn-data": { - "version": "2.0.28", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", - "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==" - }, "merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -5088,13 +5076,6 @@ } } }, - "postcss-csso": { - "version": "git+ssh://git@github.com/lookback/postcss-csso.git#6cb7497ebb1c3788e2304267ac30b244f7809947", - "from": "postcss-csso@lookback/postcss-csso#fix/csso-container-queries", - "requires": { - "csso": "^5.0.5" - } - }, "postcss-functions": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz", diff --git a/package.json b/package.json index b8f0dfe..cef1b3c 100644 --- a/package.json +++ b/package.json @@ -50,10 +50,10 @@ "postcss": "^8" }, "dependencies": { + "@csstools/postcss-minify": "^2", "@fullhuman/postcss-purgecss": "^6", "autoprefixer": "^10", "postcss-color-function": "^4", - "postcss-csso": "lookback/postcss-csso#fix/csso-container-queries", "postcss-import": "^16", "postcss-nested": "^6", "tailwindcss": "=2.0.2" diff --git a/postcss.config.js b/postcss.config.js index ef9ac1c..57f4ff8 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -3,7 +3,7 @@ const { defaultPlugins } = require('./lib/postcss-plugins'); const path = require('path'); const extractMediaQuery = require('./lib/plugins/postcss-extract-media-query'); const header = require('./lib/plugins/postcss-header'); -const csso = require('postcss-csso'); +const minify = require('@csstools/postcss-minify'); const extractDarkModeQueries = (dest, prod = false) => extractMediaQuery({ @@ -32,6 +32,6 @@ module.exports = (ctx) => ({ header({ header: `/*! ${ctx.file.basename} v${version} ${new Date().toISOString()} */`, }), - ...(ctx.env === 'production' ? [csso] : []), + ...(ctx.env === 'production' ? [minify] : []), ], }); diff --git a/postcss.config.sample.js b/postcss.config.sample.js index 827001c..644f625 100644 --- a/postcss.config.sample.js +++ b/postcss.config.sample.js @@ -1,43 +1,18 @@ -// A React/Preact centric PostCSS config for Lookbook - -// Default PostCSS plugins in able for the Lookbook to work const { defaultPostCssPlugins } = require('@lookback/lookbook'); -// Purge unused CSS from the final bundle -const purgecss = require('@fullhuman/postcss-purgecss'); -// Minify CSS -const csso = require('postcss-csso'); const BUNDLE = !!process.env.BUNDLE; -// Looking through all JSX files for selectors -// that are unused in the CSS, and removes the selectors from the final CSS -const purgeCssOpts = { - content: [ - './src/**/*.{tsx,ts}', - './node_modules/@lookback/component/build/**/*.js', - // other file paths to template/component code which is - // making use of Lookbook CSS classes. - ], - whitelistPatterns: [/flex-\d/, /flex-grow/, /flex-shrink/], - extractors: [ - { - extractor(content) { - // Matches Tailwind class names - return content.match(/[A-Za-z0-9-_:/]+/g) || []; - }, - - extensions: ['tsx', 'ts'], - }, - ], -}; - module.exports = { map: !BUNDLE && { inline: true, }, plugins: [ - ...defaultPostCssPlugins(), - // Purge unused selectors and minify CSS when bundling - ...(BUNDLE ? [purgecss(purgeCssOpts), csso] : []), + // Sending bundle: true to defaultPostCssPlugins() will: + // 1) Purge unused CSS rules. + // 2) Minify the full bundle. + // + // more plugins here.. + ...defaultPostCssPlugins({ bundle: BUNDLE }) + // .. and maybe here ], };