Skip to content

Commit

Permalink
feat: added lightningcss support (#192)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexander-akait
alexander-akait committed Sep 9, 2022
1 parent a6b5ee6 commit 04a3347
Show file tree
Hide file tree
Showing 10 changed files with 2,018 additions and 1,506 deletions.
14 changes: 7 additions & 7 deletions README.md
View file
Expand Up @@ -231,11 +231,11 @@ Useful for using and testing unpublished versions or forks.

Possible options:

- CssMinimizerPlugin.cssnanoMinify
- CssMinimizerPlugin.cssoMinify
- CssMinimizerPlugin.cleanCssMinify
- CssMinimizerPlugin.esbuildMinify
- CssMinimizerPlugin.parcelCssMinify
- `CssMinimizerPlugin.cssnanoMinify`
- `CssMinimizerPlugin.cssoMinify`
- `CssMinimizerPlugin.cleanCssMinify`
- `CssMinimizerPlugin.esbuildMinify`
- `CssMinimizerPlugin.lightningCssMinify` (previously`CssMinimizerPlugin.parcelCssMinify`, the package was renamed, but we keep it for backward compatibility)
- `async (data, inputMap, minimizerOptions) => {return {code: "a{color: red}", map: "...", warnings: [], errors: []}}`

> **Warning**
Expand Down Expand Up @@ -558,7 +558,7 @@ module.exports = {
};
```

### Using custom minifier [@parcel/css](https://github.com/parcel-bundler/parcel-css)
### Using custom minifier [lightningcss](https://github.com/parcel-bundler/lightningcss), previously `@parcel/css`

**webpack.config.js**

Expand All @@ -570,7 +570,7 @@ module.exports = {
minimize: true,
minimizer: [
new CssMinimizerPlugin({
minify: CssMinimizerPlugin.parcelCssMinify,
minify: CssMinimizerPlugin.lightningCssMinify,
// Uncomment this line for options
// minimizerOptions: { targets: { ie: 11 }, drafts: { nesting: true } },
}),
Expand Down
3,189 changes: 1,721 additions & 1,468 deletions package-lock.json
View file

Large diffs are not rendered by default.

52 changes: 28 additions & 24 deletions package.json
View file
Expand Up @@ -56,53 +56,57 @@
},
"@parcel/css": {
"optional": true
},
"lightningcss": {
"optional": true
}
},
"dependencies": {
"cssnano": "^5.1.13",
"cssnano": "^5.1.8",
"jest-worker": "^27.5.1",
"postcss": "^8.4.16",
"postcss": "^8.4.13",
"schema-utils": "^4.0.0",
"serialize-javascript": "^6.0.0",
"source-map": "^0.6.1"
},
"devDependencies": {
"@babel/cli": "^7.18.10",
"@babel/core": "^7.18.13",
"@babel/preset-env": "^7.18.10",
"@commitlint/cli": "^17.1.2",
"@commitlint/config-conventional": "^17.1.0",
"@parcel/css": "^1.13.0",
"@babel/cli": "^7.17.10",
"@babel/core": "^7.17.12",
"@babel/preset-env": "^7.17.12",
"@commitlint/cli": "^17.0.0",
"@commitlint/config-conventional": "^17.0.0",
"@parcel/css": "^1.8.3",
"@types/clean-css": "^4.2.5",
"@types/csso": "^5.0.0",
"@types/serialize-javascript": "^5.0.2",
"@webpack-contrib/eslint-config-webpack": "^3.0.0",
"babel-jest": "^28.1.2",
"clean-css": "^5.3.1",
"babel-jest": "^28.1.0",
"clean-css": "^5.3.0",
"copy-webpack-plugin": "^9.1.0",
"cross-env": "^7.0.3",
"css-loader": "^6.7.1",
"cssnano-preset-simple": "^4.0.0",
"csso": "^5.0.5",
"del": "^6.1.1",
"del-cli": "^4.0.0",
"esbuild": "^0.14.54",
"eslint": "^8.23.0",
"csso": "^5.0.3",
"del": "^6.1.0",
"del-cli": "^5.0.0",
"esbuild": "^0.15.7",
"eslint": "^8.15.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"husky": "^8.0.1",
"jest": "^28.1.3",
"lint-staged": "^12.5.0",
"memfs": "^3.4.7",
"mini-css-extract-plugin": "^2.6.1",
"jest": "^28.1.0",
"lightningcss": "^1.14.0",
"lint-staged": "^12.4.1",
"memfs": "^3.4.1",
"mini-css-extract-plugin": "^2.6.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.7.1",
"sass": "^1.54.8",
"sass-loader": "^13.0.2",
"prettier": "^2.6.2",
"sass": "^1.51.0",
"sass-loader": "^13.0.0",
"standard-version": "^9.5.0",
"sugarss": "^4.0.1",
"typescript": "^4.8.2",
"webpack": "^5.74.0"
"typescript": "^4.6.4",
"webpack": "^5.72.1"
},
"keywords": [
"cssnano",
Expand Down
6 changes: 4 additions & 2 deletions src/index.js
View file
Expand Up @@ -12,10 +12,11 @@ const {
cleanCssMinify,
esbuildMinify,
parcelCssMinify,
lightningCssMinify,
} = require("./utils");

const schema = require("./options.json");
const { minify } = require("./minify");
const { minify: minifyWorker } = require("./minify");

/** @typedef {import("schema-utils/declarations/validate").Schema} Schema */
/** @typedef {import("webpack").Compiler} Compiler */
Expand Down Expand Up @@ -535,7 +536,7 @@ class CssMinimizerPlugin {
try {
result = await (getWorker
? getWorker().transform(serialize(options))
: minify(options));
: minifyWorker(options));
} catch (error) {
const hasSourceMap =
inputSourceMap && CssMinimizerPlugin.isSourceMap(inputSourceMap);
Expand Down Expand Up @@ -721,5 +722,6 @@ CssMinimizerPlugin.cssoMinify = cssoMinify;
CssMinimizerPlugin.cleanCssMinify = cleanCssMinify;
CssMinimizerPlugin.esbuildMinify = esbuildMinify;
CssMinimizerPlugin.parcelCssMinify = parcelCssMinify;
CssMinimizerPlugin.lightningCssMinify = lightningCssMinify;

module.exports = CssMinimizerPlugin;
54 changes: 50 additions & 4 deletions src/utils.js
View file
Expand Up @@ -306,16 +306,16 @@ async function esbuildMinify(input, sourceMap, minimizerOptions) {
? result.warnings.map((item) => {
return {
source: item.location && item.location.file,
// eslint-disable-next-line no-undefined
line:
item.location && item.location.line
? item.location.line
: undefined,
// eslint-disable-next-line no-undefined
: // eslint-disable-next-line no-undefined
undefined,
column:
item.location && item.location.column
? item.location.column
: undefined,
: // eslint-disable-next-line no-undefined
undefined,
plugin: item.pluginName,
message: `${item.text}${
item.detail ? `\nDetails:\n${item.detail}` : ""
Expand Down Expand Up @@ -347,6 +347,7 @@ async function esbuildMinify(input, sourceMap, minimizerOptions) {
};
}

// TODO remove in the next major release
/* istanbul ignore next */
/**
* @param {Input} input
Expand Down Expand Up @@ -391,11 +392,56 @@ async function parcelCssMinify(input, sourceMap, minimizerOptions) {
};
}

/* istanbul ignore next */
/**
* @param {Input} input
* @param {RawSourceMap | undefined} sourceMap
* @param {CustomOptions} minimizerOptions
* @return {Promise<MinimizedResult>}
*/
async function lightningCssMinify(input, sourceMap, minimizerOptions) {
const [[filename, code]] = Object.entries(input);
/**
* @param {Partial<import("lightningcss").TransformOptions>} [lightningCssOptions={}]
* @returns {import("lightningcss").TransformOptions}
*/
const buildLightningCssOptions = (lightningCssOptions = {}) => {
// Need deep copy objects to avoid https://github.com/terser/terser/issues/366
return {
minify: true,
...lightningCssOptions,
sourceMap: false,
filename,
code: Buffer.from(code),
};
};

// eslint-disable-next-line import/no-extraneous-dependencies, global-require
const lightningCss = require("lightningcss");

// Copy `esbuild` options
const lightningCssOptions = buildLightningCssOptions(minimizerOptions);

// Let `esbuild` generate a SourceMap
if (sourceMap) {
lightningCssOptions.sourceMap = true;
}

const result = await lightningCss.transform(lightningCssOptions);

return {
code: result.code.toString(),
// eslint-disable-next-line no-undefined
map: result.map ? JSON.parse(result.map.toString()) : undefined,
};
}

module.exports = {
throttleAll,
cssnanoMinify,
cssoMinify,
cleanCssMinify,
esbuildMinify,
parcelCssMinify,
lightningCssMinify,
};
3 changes: 3 additions & 0 deletions test/CssMinimizerPlugin.test.js
View file
Expand Up @@ -191,6 +191,7 @@ describe("CssMinimizerPlugin", () => {
CssMinimizerPlugin.buildWarning(
"Warning test.css:1:1",
"test.css",
// eslint-disable-next-line no-undefined
undefined,
new SourceMapConsumer(rawSourceMap)
)
Expand All @@ -199,6 +200,7 @@ describe("CssMinimizerPlugin", () => {
CssMinimizerPlugin.buildWarning(
"Warning test.css:1:1",
"test.css",
// eslint-disable-next-line no-undefined
undefined,
new SourceMapConsumer(rawSourceMap),
new RequestShortener("/example.com/www/js/")
Expand Down Expand Up @@ -483,6 +485,7 @@ describe("CssMinimizerPlugin", () => {
for (const assetName of Object.keys(assets)) {
const [, webpackHash] = assetName.match(/^.+?\.(.+?)\..+$/);
const { hashDigestLength, hashDigest, hashFunction } = output;
// eslint-disable-next-line global-require
const cryptoHash = require("webpack")
.util.createHash(hashFunction)
.update(readAsset(assetName, compiler, stats))
Expand Down
44 changes: 44 additions & 0 deletions test/__snapshots__/minify-option.test.js.snap
View file
Expand Up @@ -315,6 +315,50 @@ exports[`"minify" option should work with "CssMinimizerPlugin.esbuildMinify" min

exports[`"minify" option should work with "CssMinimizerPlugin.esbuildMinify" minifier: warning 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier and generate source maps #2: assets 1`] = `
Object {
"foo/foo.css": "body{color:red;font-weight:700}body a{text-align:center}
/*# sourceMappingURL=foo.css.map*/",
"foo/foo.css.map": "{\\"version\\":3,\\"file\\":\\"foo/foo.css\\",\\"mappings\\":\\"AAAA,+BCIE\\",\\"sources\\":[\\"webpack:///./sourcemap/bar.scss\\",\\"webpack:///./sourcemap/foo.scss\\"],\\"sourcesContent\\":[\\"body {\\\\n font-weight: bold;\\\\n}\\",\\"@import 'bar';\\\\n\\\\nbody {\\\\n color: red;\\\\n a {\\\\n text-align: center;\\\\n }\\\\n}\\"],\\"names\\":[],\\"sourceRoot\\":\\"\\"}",
}
`;

exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier and generate source maps #2: error 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier and generate source maps #2: warning 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier and generate source maps: assets 1`] = `
Object {
"foo.css": "body{color:red;font-weight:700}body a{text-align:center}
/*# sourceMappingURL=foo.css.map*/",
"foo.css.map": "{\\"version\\":3,\\"file\\":\\"foo.css\\",\\"mappings\\":\\"AAAA,+BCIE\\",\\"sources\\":[\\"webpack:///./sourcemap/bar.scss\\",\\"webpack:///./sourcemap/foo.scss\\"],\\"sourcesContent\\":[\\"body {\\\\n font-weight: bold;\\\\n}\\",\\"@import 'bar';\\\\n\\\\nbody {\\\\n color: red;\\\\n a {\\\\n text-align: center;\\\\n }\\\\n}\\"],\\"names\\":[],\\"sourceRoot\\":\\"\\"}",
}
`;

exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier and generate source maps: error 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier and generate source maps: warning 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier and options for "lightningcss": assets 1`] = `
Object {
"foo.css": "table.colortable td{text-align:center}table.colortable td.c{text-transform:uppercase}table.colortable td:first-child,table.colortable td:first-child+td{border:1px solid #000}table.colortable th{text-align:center;color:#fff;background:#000}.example{user-select:none;background:linear-gradient(#fff,#000);transition:all .5s;display:grid}",
}
`;

exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier and options for "lightningcss": error 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier and options for "lightningcss": warning 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier: assets 1`] = `
Object {
"foo.css": "body{color:red;font-weight:700}body a{text-align:center}",
}
`;

exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier: error 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier: warning 1`] = `Array []`;

exports[`"minify" option should work with "CssMinimizerPlugin.parcelCssMinify" minifier and generate source maps #2: assets 1`] = `
Object {
"foo/foo.css": "body{color:red;font-weight:700}body a{text-align:center}
Expand Down

0 comments on commit 04a3347

Please sign in to comment.