V5: faster, more detailed, browser-compatible (#208)

- Drop support for Node 8 and 10 ([Node.js releases](https://nodejs.org/en/about/releases/))
- Rename all metrics ending on `.share` to `.ratio`
- Rename `stylesheets` to `stylesheet`
- Remove `stylesheets.browserhacks`
- Remove `stylesheets.cohesion` (now `rules.selectors.mean`)
- Remove `atrules.documents`
- Remove `atrules.mediaqueries.browserhacks`
- Add `atrules.keyframes.prefixed`
- Drop `atrules.namespace.*`
- Drop `atrules.page.*`
- Drop `atrules.supports.browserhacks.*`
- Remove `stylesheets.simplicity`(now `rules.selectors.mean`)
- Add `rules.selectors.mean/median/mode/etc`
- Add `rules.declarations.mea/median/mode`
- Remove `selectors.js.*`
- Add `selectors.specificity.*`
- Add `selectors.complexity.*`
- Remove `selectors.browserhacks.*`
- Remove `values.total`
- Remove `values.browserhacks.*`
- Remove `values.colors.duplicate.*`

Closes #207, #206, #200, #184, #183, #181, #148, #142, #129, #121, #83, #59

Author: bartveneman

.github/workflows/release.yml

@@ -1,7 +1,7 @@
 # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
 # For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
 
-name: Node.js Package
+name: Publish
 on:
   release:
     types: [created]
@@ -11,9 +11,9 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       # Setup .npmrc file to publish to npm
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
-          node-version: '12.x'
+          node-version: '16.x'
           registry-url: https://registry.npmjs.org/
       - run: npm ci
       - run: npm publish

.github/workflows/test.yml

@@ -10,30 +10,23 @@ on:
     branches: [master]
 
 jobs:
-  build:
+  test:
+    name: Unit tests
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x]
+        node-version:
+          - 12.20.0
+          - 14.13.0
+          - 16
 
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
+          cache: "npm"
       - run: npm ci
       - run: npm test
-        env:
-          CI: true
-      - name: Coveralls
-        uses: coverallsapp/github-action@master
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          parallel: true
-      - name: Coveralls Finished
-        uses: coverallsapp/github-action@master
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          parallel-finished: true

.gitignore

@@ -2,3 +2,4 @@ node_modules
 .nyc_output
 coverage
 .DS_Store
+dist

benchmark/benchmark.js

@@ -0,0 +1,39 @@
+import benchmark from 'benchmark'
+import byteSize from './format-filesize.js'
+import { analyze as analyzeCss } from '../dist/analyzer.js'
+import * as fs from 'fs'
+const files = [
+  ['bol-com-20190617', 'Bol.com'],
+  ['bootstrap-5.0.0', 'Bootstrap 5.0.0'],
+  ['css-tricks-20190319', 'CSS-Tricks'],
+  ['facebook-20190319', 'Facebook.com'],
+  ['github-20210501', 'GitHub.com'],
+  ['gazelle-20210905', 'Gazelle.nl'],
+  ['lego-20190617', 'Lego.com'],
+  ['smashing-magazine-20190319', 'Smashing Magazine.com'],
+  ['trello-20190617', 'Trello.com']
+]
+
+const suite = new benchmark.Suite()
+let maxLen = -1
+
+files.forEach(([, name]) => {
+  if (name.length > maxLen) {
+    maxLen = name.length
+  }
+})
+
+files.forEach(([filename, name]) => {
+  const css = fs.readFileSync(`./src/__fixtures__/${filename}.css`, 'utf-8')
+  const fileSize = byteSize(css.length)
+  suite.add(`${name.padEnd(maxLen + 2)} (${fileSize.padStart(6)})`, () => analyzeCss(css))
+})
+
+console.log('Running benchmark on /dist/analyzer.js:')
+suite
+  .on('cycle', event => {
+    const name = event.target.name
+    const ops = event.target.hz.toFixed(2).padStart(6)
+    console.log(`${name}: ${ops} ops/sec`)
+  })
+  .run()

benchmark/format-filesize.js

@@ -0,0 +1,19 @@
+"use strict";
+
+const BYTE_UNITS = ["B", "kB", "MB"];
+
+export default (number) => {
+  if (number < 1) {
+    return String(number) + " " + BYTE_UNITS[0];
+  }
+
+  const exponent = Math.min(
+    Math.floor(Math.log10(number) / 3),
+    BYTE_UNITS.length - 1
+  );
+  number = Number((number / Math.pow(1000, exponent)).toPrecision(3));
+
+  const unit = BYTE_UNITS[exponent];
+
+  return String(number) + " " + unit;
+};

benchmark/parse-analyze-ratio.js

@@ -0,0 +1,42 @@
+import byteSize from './format-filesize.js'
+import { analyze as analyzeCss } from '../dist/analyzer.js'
+import * as fs from 'fs'
+const files = [
+  ['bol-com-20190617', 'Bol.com'],
+  ['bootstrap-5.0.0', 'Bootstrap 5.0.0'],
+  ['css-tricks-20190319', 'CSS-Tricks'],
+  ['facebook-20190319', 'Facebook.com'],
+  ['github-20210501', 'GitHub.com'],
+  ['gazelle-20210905', 'Gazelle.nl'],
+  ['lego-20190617', 'Lego.com'],
+  ['smashing-magazine-20190319', 'Smashing Magazine.com'],
+  ['trello-20190617', 'Trello.com']
+]
+
+let maxLen = -1
+
+files.forEach(([, name]) => {
+  if (name.length > maxLen) {
+    maxLen = name.length
+  }
+})
+
+console.log('Running benchmark on /dist/analyzer.js:')
+const header = `${'File'.padEnd(maxLen + 2)} | ${'Size'.padEnd(6)} |  total | parse | Analyze        |`
+console.log(''.padEnd(header.length, '='))
+console.log(header)
+console.log(''.padEnd(header.length, '='))
+
+files.forEach(([filename, name]) => {
+  const css = fs.readFileSync(`./src/__fixtures__/${filename}.css`, 'utf-8')
+  const fileSize = byteSize(css.length).padStart(6)
+  const result = analyzeCss(css)
+
+  name = name.padEnd(maxLen + 2)
+  const parseTime = String(result.__meta__.parseTime).padStart(3)
+  const analyzeTime = String(result.__meta__.analyzeTime).padStart(4)
+  const totalTime = String(result.__meta__.total).padStart(4)
+  const analyzeRatio = (analyzeTime / totalTime * 100).toFixed(1)
+
+  console.log(`${name} | ${fileSize} | ${totalTime}ms | ${parseTime}ms | ${analyzeTime}ms (${analyzeRatio}%) |`)
+})

benchmark/readme.md

@@ -0,0 +1,36 @@
+# Benchmarks
+
+## Analyzing
+
+`node benchmark/benchmark.js`
+
+```
+Bol.com                 (468 kB):   8.88 ops/sec
+Bootstrap 5.0.0         (195 kB):  21.81 ops/sec
+CSS-Tricks              (195 kB):  21.14 ops/sec
+Facebook.com            (268 kB):  13.28 ops/sec
+GitHub.com              (514 kB):  10.28 ops/sec
+Gazelle.nl              (972 kB):   3.14 ops/sec
+Lego.com                (246 kB):  16.51 ops/sec
+Smashing Magazine.com   (1.1 MB):   3.01 ops/sec
+Trello.com              (312 kB):  12.16 ops/sec
+```
+
+## Parsing vs. analyzing
+
+`node benchmark/parse-analyze-ratio.js`
+
+```
+====================================================================
+File                    | Size   |  total | parse | Analyze        |
+====================================================================
+Bol.com                 | 468 kB |  330ms | 201ms |  128ms (38.8%) |
+Bootstrap 5.0.0         | 195 kB |  130ms |  88ms |   41ms (31.5%) |
+CSS-Tricks              | 195 kB |  102ms |  62ms |   40ms (39.2%) |
+Facebook.com            | 268 kB |  144ms |  69ms |   75ms (52.1%) |
+GitHub.com              | 514 kB |  195ms |  90ms |  104ms (53.3%) |
+Gazelle.nl              | 972 kB |  442ms | 209ms |  229ms (51.8%) |
+Lego.com                | 246 kB |   89ms |  42ms |   46ms (51.7%) |
+Smashing Magazine.com   | 1.1 MB |  356ms | 166ms |  189ms (53.1%) |
+Trello.com              | 312 kB |  136ms |  50ms |   86ms (63.2%) |
+```