diff --git a/docs/CLI.md b/docs/CLI.md index 0ddfb701..2eae8d55 100644 --- a/docs/CLI.md +++ b/docs/CLI.md @@ -60,12 +60,12 @@ You can use the CLI with a [configuration file](configuration.md). Use `--config purgecss --config ./purgecss.config.js ``` -### --out +### --output By default, the CLI outputs the result in the console. If you wish to return the CSS as files, specify the directory to write the purified CSS files to. ```text -purgecss --css css/app.css --content src/index.html src/**/*.js --out build/css/ +purgecss --css css/app.css --content src/index.html src/**/*.js --output build/css/ ``` ### --whitelist diff --git a/docs/guides/react.md b/docs/guides/react.md index 3088e7b0..ed234d5e 100644 --- a/docs/guides/react.md +++ b/docs/guides/react.md @@ -47,7 +47,7 @@ Add the following code in **package.json** ```json "scripts": { - "postbuild": "purgecss --css build/static/css/*.css --content build/static/index.html build/static/js/*.js --out build/static/css" + "postbuild": "purgecss --css build/static/css/*.css --content build/static/index.html build/static/js/*.js --output build/static/css" }, ``` diff --git a/docs/plugins/webpack.md b/docs/plugins/webpack.md index c1199a31..256f8721 100644 --- a/docs/plugins/webpack.md +++ b/docs/plugins/webpack.md @@ -82,11 +82,11 @@ to filter out directories see the glob-all documentation [here](https://www.npmj ## Options -The options available in purgecss [Configuration](https://www.purgecss.com/configuration.html) are also available in the webpack plugin with the exception of css and content. +The options available in purgecss [Configuration](https://www.purgecss.com/configuration.html) are also available in the webpack plugin, with the exception of the `css` and `content` options. * #### paths -With the webpack plugin, you can specified the content that should be analyzed by purgecss with an array of filename. It can be html, pug, blade, ... files. You can use a module like `glob` or `glob-all` to easily get a list of files. +With the webpack plugin, you can specify the content that should be analyzed by purgecss by providing an array of filenames. These can be html, pug, blade, ... files. You can also use a module like `glob` or `glob-all` to easily get a list of files. ```js const PurgecssPlugin = require('purgecss-webpack-plugin') @@ -101,7 +101,7 @@ new PurgecssPlugin({ }) ``` -If you want to regenerate the paths list on every compilation (e.g. with `--watch`), then you can also pass a function: +If you want to regenerate the list of paths on every compilation (e.g. when using `--watch`), then you can also pass a function to the `paths` option as in the following example: ```js new PurgecssPlugin({ paths: () => glob.sync(`${PATHS.src}/**/*`, { nodir: true }) @@ -110,7 +110,7 @@ new PurgecssPlugin({ * #### only -You can specify entrypoints to the purgecss-webpack-plugin with the option only: +You can specify entrypoints to the purgecss-webpack-plugin with the option `only`: ```js new PurgecssPlugin({ @@ -121,13 +121,14 @@ new PurgecssPlugin({ * #### whitelist, whitelistPatterns and whitelistPatternsChildren -Similar as for the `paths` option, you also can define functions for the these options: +Similar as for the `paths` option, you can also define functions for the following options: ```js function collectWhitelist() { // do something to collect the whitelist return ['whitelisted']; } + function collectWhitelistPatterns() { // do something to collect the whitelist return [/^whitelisted-/]; @@ -148,4 +149,4 @@ new PurgecssPlugin({ * #### rejected -If `true` all removed selectors are added to the [Stats Data](https://webpack.js.org/api/stats/) as `purged`. +When this option is set to `true` all removed selectors are added to the [Stats Data](https://webpack.js.org/api/stats/) as `purged`. diff --git a/firebase.json b/firebase.json index 3c86cf7e..2f393b35 100644 --- a/firebase.json +++ b/firebase.json @@ -1,5 +1,6 @@ { "hosting": { + "cleanUrls": true, "public": "docs/.vuepress/dist", "ignore": [ "firebase.json", diff --git a/lerna.json b/lerna.json index 81881cd9..81870df9 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "packages": [ "packages/*" ], - "version": "2.0.5" + "version": "2.0.6" } diff --git a/package.json b/package.json index bb098ffa..f7695861 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "purgecss-webpack-plugin" ], "devDependencies": { - "@types/jest": "^24.0.18", + "@types/jest": "^25.1.0", "@types/node": "^13.1.0", "@vuepress/theme-default": "^1.2.0", "@wessberg/rollup-plugin-ts": "^1.1.65", @@ -19,7 +19,7 @@ "husky": "^4.0.0", "jest": "^24.9.0", "lerna": "^3.18.0", - "lint-staged": "^9.4.2", + "lint-staged": "^10.0.2", "prettier": "^1.19.0", "rollup": "^1.26.4", "rollup-plugin-node-resolve": "^5.2.0", diff --git a/packages/gulp-purgecss/package.json b/packages/gulp-purgecss/package.json index 618133f7..ef5d772f 100644 --- a/packages/gulp-purgecss/package.json +++ b/packages/gulp-purgecss/package.json @@ -1,6 +1,6 @@ { "name": "gulp-purgecss", - "version": "2.0.5", + "version": "2.0.6", "description": "Gulp plugin for purgecss", "author": "Ffloriel ", "homepage": "https://purgecss.com", @@ -37,7 +37,7 @@ "dependencies": { "glob": "^7.1.6", "plugin-error": "^1.0.1", - "purgecss": "^2.0.5", + "purgecss": "^2.0.6", "through2": "^3.0.1" }, "devDependencies": { diff --git a/packages/postcss-purgecss/package.json b/packages/postcss-purgecss/package.json index eabe1738..ae154109 100644 --- a/packages/postcss-purgecss/package.json +++ b/packages/postcss-purgecss/package.json @@ -1,6 +1,6 @@ { "name": "@fullhuman/postcss-purgecss", - "version": "2.0.5", + "version": "2.0.6", "description": "PostCSS plugin for PurgeCSS", "author": "FoundrySH ", "homepage": "https://github.com/FullHuman/purgecss#readme", @@ -27,6 +27,6 @@ }, "dependencies": { "postcss": "7.0.26", - "purgecss": "^2.0.5" + "purgecss": "^2.0.6" } } diff --git a/packages/purgecss-webpack-plugin/package.json b/packages/purgecss-webpack-plugin/package.json index 01c88749..7c1e2d4e 100644 --- a/packages/purgecss-webpack-plugin/package.json +++ b/packages/purgecss-webpack-plugin/package.json @@ -1,6 +1,6 @@ { "name": "purgecss-webpack-plugin", - "version": "2.0.5", + "version": "2.0.6", "description": "PurgeCSS plugin for webpack - Remove unused css", "author": "Ffloriel ", "homepage": "https://purgecss.com", @@ -36,7 +36,7 @@ "test": "echo \"Error: run tests from root\" && exit 1" }, "dependencies": { - "purgecss": "^2.0.5", + "purgecss": "^2.0.6", "webpack": "^4.41.2", "webpack-sources": "^1.4.3" }, diff --git a/packages/purgecss/__tests__/test_examples/whitelist/whitelist.css b/packages/purgecss/__tests__/test_examples/whitelist/whitelist.css index 08027892..2b9fe22b 100644 --- a/packages/purgecss/__tests__/test_examples/whitelist/whitelist.css +++ b/packages/purgecss/__tests__/test_examples/whitelist/whitelist.css @@ -20,4 +20,8 @@ button { .nav-red { background-color: red; -} \ No newline at end of file +} + +.random[data-v-test] { + color: green; +} diff --git a/packages/purgecss/__tests__/whitelist.test.ts b/packages/purgecss/__tests__/whitelist.test.ts index 8eb6cf8e..5e186512 100644 --- a/packages/purgecss/__tests__/whitelist.test.ts +++ b/packages/purgecss/__tests__/whitelist.test.ts @@ -9,12 +9,16 @@ describe("whitelist", () => { content: [`${root}whitelist/whitelist.html`], css: [`${root}whitelist/whitelist.css`], whitelist: ["random", "h1", "yep", "button"], - whitelistPatterns: [/nav-/] + whitelistPatterns: [/nav-/, /data-v-.*/] }); purgedCSS = resultsPurge[0].css; done(); }); + it("finds attr", () => { + expect(purgedCSS.includes("[data-v-test]")).toBe(true); + }); + it("finds random class", () => { expect(purgedCSS.includes(".random")).toBe(true); }); diff --git a/packages/purgecss/package.json b/packages/purgecss/package.json index 9a90a24f..444ebbb8 100644 --- a/packages/purgecss/package.json +++ b/packages/purgecss/package.json @@ -1,6 +1,6 @@ { "name": "purgecss", - "version": "2.0.5", + "version": "2.0.6", "description": "Remove unused css selectors", "author": "Ffloriel ", "homepage": "https://purgecss.com", diff --git a/packages/purgecss/src/index.ts b/packages/purgecss/src/index.ts index 37965ad8..ecc8f18e 100644 --- a/packages/purgecss/src/index.ts +++ b/packages/purgecss/src/index.ts @@ -705,21 +705,22 @@ class PurgeCSS { if (isInPseudoClass(selector)) return true; let isPresent = false; + for (const nodeSelector of selector.nodes) { + const val = + (nodeSelector.type === "attribute" && nodeSelector.attribute) || + nodeSelector.value; + // if the selector is whitelisted with children // returns true to keep all children selectors - if ( - nodeSelector.value && - this.isSelectorWhitelistedChildren(nodeSelector.value) - ) { + if (val && this.isSelectorWhitelistedChildren(val)) { return true; } // The selector is found in the internal and user-defined whitelist if ( - nodeSelector.value && - (CSS_WHITELIST.includes(nodeSelector.value) || - this.isSelectorWhitelisted(nodeSelector.value)) + val && + (CSS_WHITELIST.includes(val) || this.isSelectorWhitelisted(val)) ) { isPresent = true; continue; @@ -729,11 +730,12 @@ class PurgeCSS { case "attribute": // `value` is a dynamic attribute, highly used in input element // the choice is to always leave `value` as it can change based on the user - // idem for `checked`, `selected` - isPresent = - ["value", "checked", "selected"].includes(nodeSelector.attribute) - ? true - : isAttributeFound(nodeSelector, selectorsFromExtractor); + // idem for `checked`, `selected`, `open` + isPresent = ["value", "checked", "selected", "open"].includes( + nodeSelector.attribute + ) + ? true + : isAttributeFound(nodeSelector, selectorsFromExtractor); break; case "class": isPresent = isClassFound(nodeSelector, selectorsFromExtractor); @@ -747,9 +749,12 @@ class PurgeCSS { default: break; } + // selector is not in whitelist children or in whitelist // and it has not been found as an attribute/class/identifier/tag - if (!isPresent) return false; + if (!isPresent) { + return false; + } } return isPresent; }