From 97f93639f476eed1372027a760bcbc9825f53d84 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 2 Sep 2022 09:34:57 -0400 Subject: [PATCH] Add prototype using `@parcel/css` for minification --- package.json | 4 +- src/cli-peer-dependencies.js | 4 +- src/cli.js | 85 ++++++++++++++++++++++++++---------- 3 files changed, 66 insertions(+), 27 deletions(-) diff --git a/package.json b/package.json index 0efcb12f0..2d1039285 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "scripts": { "preswcify": "npm run generate && rimraf lib", "swcify": "swc src --out-dir lib --copy-files", - "postswcify": "esbuild lib/cli-peer-dependencies.js --bundle --platform=node --outfile=peers/index.js", + "postswcify": "esbuild lib/cli-peer-dependencies.js --bundle --platform=node --outfile=peers/index.js --define:process.env.CSS_TRANSFORMER_WASM=false", "rebuild-fixtures": "npm run swcify && node -r @swc/register scripts/rebuildFixtures.js", "prepublishOnly": "npm install --force && npm run swcify", "style": "eslint .", @@ -42,12 +42,12 @@ "*.js" ], "devDependencies": { + "@parcel/css": "^1.11.2", "@swc/cli": "^0.1.57", "@swc/core": "^1.2.244", "@swc/jest": "^0.2.22", "@swc/register": "^0.1.10", "autoprefixer": "^10.4.8", - "cssnano": "^5.1.13", "esbuild": "^0.14.54", "eslint": "^8.21.0", "eslint-config-prettier": "^8.5.0", diff --git a/src/cli-peer-dependencies.js b/src/cli-peer-dependencies.js index 6b9f986aa..5324ec572 100644 --- a/src/cli-peer-dependencies.js +++ b/src/cli-peer-dependencies.js @@ -10,6 +10,6 @@ export function lazyAutoprefixer() { return require('autoprefixer') } -export function lazyCssnano() { - return require('cssnano') +export function lazyParcelCss() { + return require('@parcel/css') } diff --git a/src/cli.js b/src/cli.js index 52c3d08f6..bf3328b21 100644 --- a/src/cli.js +++ b/src/cli.js @@ -1,6 +1,6 @@ #!/usr/bin/env node -import { lazyPostcss, lazyPostcssImport, lazyCssnano, lazyAutoprefixer } from '../peers/index.js' +import { lazyPostcss, lazyPostcssImport, lazyParcelCss, lazyAutoprefixer } from '../peers/index.js' import chokidar from 'chokidar' import path from 'path' @@ -353,6 +353,65 @@ if (args['--help']) { run() +/// --- + +/** @type {import('@parcel/css')} */ +let parcelCss + +/** @returns {import('@parcel/css')} */ +function loadParcelCss() { + if (parcelCss) { + return parcelCss + } + + // Try to load a local version first + try { + return parcelCss = require('@parcel/css') + } catch {} + + return parcelCss = lazyParcelCss() +} + +/** + * + * @param {boolean} shouldMinify + * @param {import('postcss').Result} result + * @returns {import('postcss').Result} + */ +async function minifyCss(shouldMinify, result) { + if (! shouldMinify) { + return result + } + + let css = loadParcelCss() + let transformed + + try { + transformed = css.transform({ + filename: result.opts.from || 'input.css', + code: Buffer.from(result.css, 'utf-8'), + minify: true, + sourceMap: true, + sourceMap: !!result.map, + inputSourceMap: result.map ? result.map.toString() : undefined, + }) + } catch (err) { + console.error("Unable to minify CSS. Using unminified version instead.") + console.error(err) + + return result + } + + return Object.assign(result, { + css: transformed.code.toString('utf8'), + map: result.map ? Object.assign(result.map, { + toString() { + return transformed.map.toString() + } + }) : result.map, + }) +} + // --- function init() { @@ -626,17 +685,6 @@ async function build() { return lazyAutoprefixer() })(), - args['--minify'] && - (() => { - let options = { preset: ['default', { cssDeclarationSorter: false }] } - - // Try to load a local `cssnano` version first - try { - return require('cssnano') - } catch {} - - return lazyCssnano()(options) - })(), ].filter(Boolean) let postcss = loadPostcss() @@ -647,6 +695,7 @@ async function build() { return Promise.resolve() .then(() => (output ? fs.promises.mkdir(path.dirname(output), { recursive: true }) : null)) .then(() => processor.process(css, { ...postcssOptions, from: input, to: output })) + .then((result) => minifyCss(!!args['--minify'], result)) .then((result) => { if (!output) { return process.stdout.write(result.css) @@ -728,17 +777,6 @@ async function build() { return lazyAutoprefixer() })(), - args['--minify'] && - (() => { - let options = { preset: ['default', { cssDeclarationSorter: false }] } - - // Try to load a local `cssnano` version first - try { - return require('cssnano') - } catch {} - - return lazyCssnano()(options) - })(), ].filter(Boolean) async function rebuild(config) { @@ -785,6 +823,7 @@ async function build() { output ? fs.promises.mkdir(path.dirname(output), { recursive: true }) : null ) .then(() => processor.process(css, { from: input, to: output })) + .then((result) => minifyCss(!!args['--minify'], result)) .then(async (result) => { for (let message of result.messages) { if (message.type === 'dependency') {