@mapbox/postcss-html-filter - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

index.js

@@ -8,6 +8,8 @@ 'use strict';
 const postcssDiscardUnused = require('postcss-discard-unused');
+const pseudoElements = require('pseudo-elements');
 
-const removePseudos = selector => {
-  return selector.replace(/:not\([^)]*?\)|::?[-a-zA-Z]+/g, '');
-};
+const pseudoElementRegExp = new RegExp(
+  `::?(${pseudoElements().join('|')})`,
+  'g'
+);
 
@@ -26,3 +28,4 @@ const plugin = postcss.plugin('css-sieve', options => {
         // Pseudo-selectors are red herrings in Cheerio queries.
-        const pseudolessSelector = removePseudos(selector);
+        const pseudolessSelector = selector.replace(pseudoElementRegExp, '');
+
         if (!pseudolessSelector) {
@@ -29,0 +32,0 @@ cleanedSelectors.push(selector);

package.json

 {
   "name": "@mapbox/postcss-html-filter",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Filter CSS through HTML, removing selectors that do not apply to the HTML",
   "main": "index.js",
   "scripts": {
-    "format": "prettier --single-quote --write '{,lib/, test/}**/*.js'",
+    "precommit": "lint-staged",
+    "format": "prettier --single-quote --write '{,lib/**/,test/**/}*.js'",
     "lint": "eslint .",
@@ -35,9 +36,12 @@ "test-jest": "jest",
     "postcss-discard-empty": "^2.1.0",
-    "postcss-discard-unused": "^2.2.3"
+    "postcss-discard-unused": "^2.2.3",
+    "pseudo-elements": "^1.1.0"
   },
   "devDependencies": {
-    "postcss": "^6.0.0",
     "eslint": "^4.0.0",
     "eslint-plugin-node": "^5.0.0",
+    "husky": "^0.14.1",
     "jest": "^20.0.4",
+    "lint-staged": "^4.0.0",
+    "postcss": "^6.0.0",
     "prettier": "^1.4.4"
@@ -50,8 +54,6 @@ },
     "coverageReporters": [
-      "json",
-      "lcov",
       "text",
       "html"
     ],
-    "resetMocks": true,
+    "clearMocks": true,
     "roots": [
@@ -63,3 +65,10 @@ "./test"
     "node": ">=4"
+  },
+  "lint-staged": {
+    "**/*.js": [
+      "eslint",
+      "prettier --single-quote --write",
+      "git add"
+    ]
   }
 }

README.md

@@ -1,2 +0,2 @@
-# postcss-html-filter
+# @mapbox/postcss-html-filter
 
@@ -12,7 +12,17 @@ [![Build Status](https://travis-ci.org/mapbox/postcss-html-filter.svg?branch=master)](https://travis-ci.org/mapbox/postcss-html-filter)
 
-## Example
+## Installation
 
+```
+npm install @mapbox/postcss-html-filter
+```
+
+## Usage
+
+Follow the instructions for [your PostCSS runner](https://github.com/postcss/postcss#usage).
+
+This example uses PostCSS's Node API:
+
 ```js
 const postcss = require('postcss');
-const postcssHtmlFilter = require('postcss-html-filter');
+const postcssHtmlFilter = require('@mapbox/postcss-html-filter');
 const fs = require('fs');
@@ -30,13 +40,13 @@
 
+Type: `string`.
+**Required**.
+
 The HTML that you will use to filter your CSS.
 
-## Is this like [UnCSS](https://github.com/giakki/uncss)?
+## Details
 
-Kind of. This is essentially a simplified version of what UnCSS does.
-Instead of using PhantomJS or jsdom to load the page, try to size things, download resources, etc., this module address the core problem of filtering out CSS that is not used in some HTML.
-This is a low-level module that could be used within other, higher-level projects (e.g. ones that download resources).
+- Before checking if a selector applies to the HTML [pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) are stripped (e.g. `::before`, `::first-line`).
+  If the selector applies *without* them, we can assume that it also applies *with* them, and the selector should be kept.
+  [Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) (e.g. `:first-child`, `:not(a)`, `:nth-child(3)`) are passed to Cheerio, which interprets them correctly (using [css-select](https://github.com/fb55/css-select)).
 
-Another project that uses Cheerio to filter out unused CSS is [css-razor](https://github.com/tscanlin/css-razor).
-Another PostCSS plugin with similar aims is [usedcss](https://github.com/komachi/usedcss).
-
 ## Caveats
@@ -48,2 +58,13 @@
 
+## Is this like [UnCSS](https://github.com/giakki/uncss)?
+
+Kind of. This is essentially a simplified version of what UnCSS does.
+Instead of using PhantomJS or jsdom to load the page, size things, download resources, etc., this module only addresse the core problem of filtering out CSS that is not used in some HTML.
+This is a low-level module that could be used within other, higher-level projects (e.g. ones that download resources).
+
+## Similar projects
+
+- Another project that uses Cheerio to filter out unused CSS is [css-razor](https://github.com/tscanlin/css-razor).
+- Another PostCSS plugin with similar aims is [usedcss](https://github.com/komachi/usedcss).
+
 ## Development
@@ -50,0 +71,0 @@

test/test.js

@@ -19,3 +19,12 @@ 'use strict';
     expect(result.css).toMatchSnapshot();
+
+    // In the fixture, every non-comment line that should be kept must be
+    // suffixed with a /* keep */ comment.
+    result.css.split('\n').forEach(line => {
+      if (!line) return;
+      if (/\s*}\s*/.test(line)) return;
+      if (line.slice(0, 2) === '/*') return;
+      expect(line).toMatch(/\/\* keep \*\/$/);
+    });
   });
 });

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

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 package files

13

increased by8.33%

Lines of code

119

increased by45.12%

Number of lines in readme file

72

increased by41.18%

Worsened metrics

Total package byte prevSize

14537

decreased by-84.93%

Dependency count

6

increased by20%

Dev dependency count

7

increased by40%

Dependency changes

• + Addedpseudo-elements@^1.1.0

• + Addedpseudo-elements@1.1.0(transitive)