purgecss - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

package.json

 {
   "name": "purgecss",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Remove unused css selectors.",
@@ -66,3 +66,5 @@ "main": "./lib/purgecss.js",
     "rollup-plugin-node-resolve": "^3.0.0",
-    "rollup-watch": "^4.3.1"
+    "rollup-plugin-uglify": "^2.0.1",
+    "rollup-watch": "^4.3.1",
+    "uglify-es": "^3.0.27"
   },
@@ -72,2 +74,2 @@ "engines": {
   }
-}
+}

README.md

@@ -52,3 +52,3 @@ # Purgecss
 import Purgecss from "purgecss"
-import purgeHtml from "purgecss-from-html"
+import purgeHtml from "purge-from-html"
 const purgeCss = new Purgecss({
@@ -167,2 +167,64 @@ content: ["**/*.html"],
 
+
+### Extractor
+
+Purgecss can be adapted to suit your need. If you want to purify exclusively html file, you might want
+to consider the _purge-from-html_ extractor.  
+Purgecss relies on extractors to get the list of selector used in a file.
+There are multiples types of files that can contains selectors such as html files, templating files like pug, or even javascript file.
+
+#### Using an extractor
+
+You can use an extractor by settings the extractors option in the purgecss config file.
+```js
+import purgeJs from "purgecss-from-js"
+import purgeHtml from "purge-from-html"
+
+const options = {
+    content: [],// files to extract the selectors from
+    css: [],// css
+    extractors: [
+        {
+            extractor: purgeJs,
+            extensions: ["js"]
+        },
+        {
+            extractor: purgeHtml,
+            extensions: ["html"]
+        }
+    ]
+}
+export default options
+```
+
+#### Default extractor
+
+Purgecss provides a default extractor that is working with all types of files but can be limited and not fit exactly the type of files that you are using.  
+The default extractor considers every word of a file as a selector.
+The default extractor has a few limitations:
+- Do not consider special characters such as `@`. 
+
+#### Legacy extractor
+
+The legacy extractor reproduces the behavior of _purifycss_. You can use the Legacy extractor by setting the option `legacy: true`.
+The legacy extractor has a few limitations:
+- Do not extract uppercase selector
+- Do not extract numbers
+
+#### Create an extractor
+
+An extractor is a simple class with one method. The method `extract` takes the content of a file as a string and return an array of selectors.
+By convention, the name of the npm package is `purge-from-[typefile]` (e.g. purge-from-pug). You can look at the list of extractor on npm by searching `purge-from`.
+
+```js
+
+class PurgeFromJs {
+    static extract(content) {
+        // return array of css selectors
+    }
+}
+
+```
+
+
 ### Differences with
@@ -169,0 +231,0 @@

rollup.config.js

@@ -6,2 +6,4 @@ import babel from "rollup-plugin-babel"
 import flow from "rollup-plugin-flow"
+import uglify from "rollup-plugin-uglify"
+import { minify } from "uglify-es"
 
@@ -20,5 +22,5 @@ export default {
     ],
-    plugins: [builtins(), resolve(), flow(), commonjs(), babel()],
+    plugins: [builtins(), resolve(), flow(), commonjs(), babel(), uglify({}, minify)],
     external: ["postcss", "postcss-selector-parser", "fs"],
     sourceMap: false
 }

src/Extractors/DefaultExtractor.js

 class DefaultExtractor {
     static extract(content) {
-        return content.split(/[^A-z0-9-]/g)
+        return content.match(/[A-z0-9-]+/g)
     }
@@ -5,0 +5,0 @@ }

src/index.js

@@ -42,3 +42,3 @@ // @flow
     /**
-     * 
+     * Load the configuration file from the path
      * @param {string} configFile Path of the config file
@@ -59,2 +59,6 @@ */
 
+    /**
+     * Verify that the purgecss options provided are valid
+     * @param {object} options Purgecss options
+     */
     checkOptions(options: Options) {
@@ -80,2 +84,5 @@ if (typeof options !== 'object') throw new TypeError(ERROR_OPTIONS_TYPE)
 
+    /**
+     * Main function that purge the css file
+     */
     purge() {
@@ -101,2 +108,7 @@ // Get selectors from content files
 
+    /**
+     * Extract the selectors present in the files using a purgecss extractor
+     * @param {array} files Array of files path or glob pattern 
+     * @param {array} extractors Array of extractors
+     */
     extractFileSelector(
@@ -143,2 +155,7 @@ files: Array<string>,
 
+    /**
+     * Use the extract function of the extractor to get the list of selectors
+     * @param {string} content Content (e.g: html file)
+     * @param {object} extractor Purgecss extractor use to extract the selector
+     */
     extractSelectors(content: string, extractor: Object): Set<string> {
@@ -158,2 +175,7 @@ let selectors = new Set()
 
+    /**
+     * Use postcss to walk through the css ast and remove unused css
+     * @param {string} css css to remove selectors from
+     * @param {*} selectors selectors used in content files
+     */
     getSelectorsCss(css: string, selectors: Set<string>) {
@@ -207,2 +229,6 @@ const root = postcss.parse(css)
 
+    /**
+     * Check if the node correspond to an empty css rule
+     * @param {object} node Node of postcss abstract syntax tree
+     */
     isRuleEmpty(node: Object) {
@@ -222,2 +248,7 @@ if (
 
+    /**
+     * Determine if the selector should be kept, based on the selectors found in the files
+     * @param {Set} selectorsInContent Set of css selectors found in the content files
+     * @param {Array} selectorsInRule Array of selectors 
+     */
     shouldKeepSelector(
@@ -224,0 +255,0 @@ selectorsInContent: Set<string>,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

297

increased by26.38%

Worsened metrics

Total package byte prevSize

447654

decreased by-34.93%

Dev dependency count

21

increased by10.53%

Lines of code

9038

decreased by-56.67%

Number of low quality alerts

2

increased by100%

No dependency changes