@caweb/cli 1.4.1 → 1.4.3

package/bin/css-audit/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "css-audit",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "css-audit": "node ./index.js",
+    "lint:js": "eslint src",
+    "format:js": "prettier src/**/*.js *.js --write",
+    "test": "jest"
+  },
+  "author": "WordPress CSS Contributors",
+  "license": "GPL-2.0-or-later",
+  "dependencies": {
+    "@wordpress/eslint-plugin": "9.0.4",
+    "@wordpress/prettier-config": "1.0.3",
+    "chalk": "4.1.1",
+    "cli-table3": "0.6.0",
+    "cosmiconfig": "7.0.0",
+    "css-tree": "1.1.3",
+    "cssom": "0.4.4",
+    "eslint": "7.26.0",
+    "fs-extra": "10.0.0",
+    "glob": "7.1.7",
+    "minimist": "1.2.6",
+    "postcss": "8.2.15",
+    "postcss-values-parser": "5.0.0",
+    "prettier": "npm:wp-prettier@^2.0.5",
+    "tinycolor2": "1.4.2"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:@wordpress/eslint-plugin/esnext",
+      "plugin:prettier/recommended"
+    ],
+    "rules": {
+      "no-console": "off"
+    },
+    "env": {
+      "node": true,
+      "jest": true
+    }
+  },
+  "jest": {
+    "modulePathIgnorePatterns": [
+      "fixtures",
+      ".config.js"
+    ]
+  },
+  "prettier": "@wordpress/prettier-config",
+  "devDependencies": {
+    "handlebars": "4.7.7",
+    "jest": "26.6.3",
+    "twing": "5.0.2"
+  }
+}

package/bin/css-audit/public/.gitkeep

@@ -0,0 +1 @@
+

package/bin/css-audit/src/__tests__/alphas.js

@@ -0,0 +1,128 @@
+const audit = require( '../audits/alphas' );
+
+function getResultValue( results, key ) {
+	const { value } = results.find( ( { id } ) => key === id );
+	return value;
+}
+
+describe( 'Audit: Alphas', () => {
+	it( 'should return no values when no transparent colors are used', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { font-size: 1em; line-height: 1.6; color: red }`,
+			},
+		];
+		const { results } = audit( files );
+		expect( getResultValue( results, 'unique' ) ).toBe( 0 );
+	} );
+
+	it( 'should count the number of alpha values in a file', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { color: rgba(0, 0, 0, 0.3); }`,
+			},
+		];
+		const { results } = audit( files );
+		expect( getResultValue( results, 'unique' ) ).toBe( 1 );
+	} );
+
+	it( 'should find values across rulesets', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `h1 { color: rgba(52, 0, 182, 0.95); }
+				h2 { color: rgba(206, 234, 196, .95); }
+				h3 { color: rgba( 119, 255, 214, 0.125); }
+				h4 { color: rgba(201, 15, 59, .875); }
+				h4 { color: rgba(0, 0, 0, 1); }`,
+			},
+		];
+		const { results } = audit( files );
+		expect( getResultValue( results, 'unique' ) ).toBe( 4 );
+		expect( getResultValue( results, 'unique-colors' ) ).toBe( 5 );
+		expect( getResultValue( results, 'all-alphas' ) ).toEqual( [
+			{
+				count: 2,
+				name: 0.95,
+			},
+			{
+				count: 1,
+				name: 0.125,
+			},
+			{
+				count: 1,
+				name: 0.875,
+			},
+			{
+				count: 1,
+				name: 1,
+			},
+		] );
+		expect( getResultValue( results, 'all-colors' ) ).toEqual( [
+			'rgba( 119, 255, 214, 0.125)',
+			'rgba(0, 0, 0, 1)',
+			'rgba(201, 15, 59, .875)',
+			'rgba(206, 234, 196, .95)',
+			'rgba(52, 0, 182, 0.95)',
+		] );
+	} );
+
+	it( 'should find values in all color functions', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `h1 { color: hsla(95, 55%, 46%, 0.9); }
+				h2 { color: hsl(290, 72%, 24%, .333); }
+				h3 { color: rgb(41, 194, 191, 1); }
+				h4 { color: hsl(198 92 20 / 0.5); }
+				h5 { color: rgb(13 1 26 / 0.05); }`,
+			},
+		];
+		const { results } = audit( files );
+		expect( getResultValue( results, 'unique' ) ).toBe( 5 );
+		expect( getResultValue( results, 'unique-colors' ) ).toBe( 5 );
+		expect( getResultValue( results, 'all-alphas' ) ).toEqual( [
+			{
+				count: 1,
+				name: 0.9,
+			},
+			{
+				count: 1,
+				name: 0.333,
+			},
+			{
+				count: 1,
+				name: 1,
+			},
+			{
+				count: 1,
+				name: 0.5,
+			},
+			{
+				count: 1,
+				name: 0.05,
+			},
+		] );
+		expect( getResultValue( results, 'all-colors' ) ).toEqual( [
+			'hsl(198 92 20 / 0.5)',
+			'hsl(290, 72%, 24%, .333)',
+			'hsla(95, 55%, 46%, 0.9)',
+			'rgb(13 1 26 / 0.05)',
+			'rgb(41, 194, 191, 1)',
+		] );
+	} );
+
+	it( 'should count alphas in shorthand properties', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { border: 3px solid rgba(0, 0, 0, 0.5); }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find( ( { id } ) => 'unique' === id );
+		expect( value ).toBe( 1 );
+	} );
+} );

package/bin/css-audit/src/__tests__/colors.js

@@ -0,0 +1,115 @@
+const audit = require( '../audits/colors' );
+
+describe( 'Audit: Colors', () => {
+	it( 'should return no colors when no colors are used', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { font-size: 1em; line-height: 1.6; }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find( ( { id } ) => 'unique' === id );
+		expect( value ).toBe( 0 );
+	} );
+
+	it( 'should ignore colors in non-color properties', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { background-image: url('logo-white.png'); }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find( ( { id } ) => 'unique' === id );
+		expect( value ).toBe( 0 );
+	} );
+
+	it( 'should handle filter values', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `img { filter: alpha(opacity=60); }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find( ( { id } ) => 'unique' === id );
+		expect( value ).toBe( 0 );
+	} );
+
+	it( 'should count colors in shorthand properties', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { border: 3px solid red; }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find( ( { id } ) => 'unique' === id );
+		expect( value ).toBe( 1 );
+	} );
+
+	it( 'should count the number of colors in a file', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { color: #0ff; }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find( ( { id } ) => 'unique' === id );
+		expect( value ).toBe( 1 );
+	} );
+
+	it( 'should count the number of colors in two files', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { color: #0ff; }`,
+			},
+			{
+				name: 'b.css',
+				content: `body { color: rgba(0,0,0,0.5); }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find( ( { id } ) => 'unique' === id );
+		expect( value ).toBe( 2 );
+	} );
+
+	it( 'should sort the most used colors', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `h1 { color: red; }
+				h2 { color: pink; }
+				h3 { color: pink; }
+				h4 { color: blue; }
+				h5 { color: cyan; }
+				h6 { color: lightgreen; }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find( ( { id } ) => 'top-10-colors' === id );
+		expect( value[ 0 ].name ).toBe( 'pink' );
+	} );
+
+	it( 'should sort the least used colors', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `h1 { color: red; }
+				h2 { color: pink; }
+				h3 { color: red; }
+				h4 { color: blue; }
+				h5 { color: blue; }
+				h6 { color: red; }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find(
+			( { id } ) => 'bottom-10-colors' === id
+		);
+		expect( value[ 0 ].name ).toBe( 'pink' );
+	} );
+} );

package/bin/css-audit/src/__tests__/display-none.js

@@ -0,0 +1,52 @@
+const audit = require( '../audits/display-none' );
+
+describe( 'Audit: Display None', () => {
+	it( 'should return nothing when display:none is not used', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { font-size: 1em; line-height: 1.6; }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find( ( { id } ) => 'count' === id );
+		expect( value ).toBe( 0 );
+	} );
+
+	it( 'should count the number of display:none in a file', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { display: none; }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find( ( { id } ) => 'count' === id );
+		expect( value ).toBe( 1 );
+	} );
+
+	it( 'should count the number of display:none in two files', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { padding: 20px; display:none; }`,
+			},
+			{
+				name: 'b.css',
+				content: `body.hidden { display: none; }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value: count } = results.find( ( { id } ) => 'count' === id );
+		expect( count ).toBe( 2 );
+
+		const { value: instances } = results.find(
+			( { id } ) => 'instances' === id
+		);
+		expect( instances ).toEqual( [
+			// Per line count looks for line breaks, so 1 is correct here.
+			{ file: 'a.css', selector: 'body' },
+			{ file: 'b.css', selector: 'body.hidden' },
+		] );
+	} );
+} );

package/bin/css-audit/src/__tests__/important.js

@@ -0,0 +1,88 @@
+const audit = require( '../audits/important' );
+
+describe( 'Audit: Important', () => {
+	it( 'should return nothing when important is not used', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { font-size: 1em; line-height: 1.6; }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find( ( { id } ) => 'count' === id );
+		expect( value ).toBe( 0 );
+	} );
+
+	it( 'should ignore the word important in values', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { background-image: url('important-logo.png'); }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find( ( { id } ) => 'count' === id );
+		expect( value ).toBe( 0 );
+	} );
+
+	it( 'should count the number of !important in a file', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { color: #0ff !important; }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find( ( { id } ) => 'count' === id );
+		expect( value ).toBe( 1 );
+	} );
+
+	it( 'should count the number of !important in two files', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { padding: 20px; margin-bottom: 10px !important; }`,
+			},
+			{
+				name: 'b.css',
+				content: `body { color: red !important; }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value: count } = results.find( ( { id } ) => 'count' === id );
+		expect( count ).toBe( 2 );
+
+		const { value: countFile } = results.find(
+			( { id } ) => 'count-per-file' === id
+		);
+		expect( countFile ).toEqual( [
+			// Per line count looks for line breaks, so 1 is correct here.
+			{ name: 'a.css', count: 1, perLine: 1 },
+			{ name: 'b.css', count: 1, perLine: 1 },
+		] );
+	} );
+
+	it( 'should sort the properties that most use !important', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `
+				h1 {
+					font-size: 2em !important;
+					letter-spacing: 1px;
+					text-transform: uppercase !important;
+				}
+				h2 {
+					font-size: 2em !important;
+					letter-spacing: 1px;
+					text-transform: uppercase;
+				}`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find(
+			( { id } ) => 'top-10-properties' === id
+		);
+		expect( value[ 0 ].name ).toBe( 'font-size' );
+	} );
+} );

package/bin/css-audit/src/__tests__/media-queries.js

@@ -0,0 +1,84 @@
+const audit = require( '../audits/media-queries' );
+
+describe( 'Audit: Media Queries', () => {
+	it( 'should return nothing when no media queries are used', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { font-size: 1em; line-height: 1.6; }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find( ( { id } ) => 'count' === id );
+		expect( value ).toBe( 0 );
+	} );
+
+	it( 'should count the number of media queries', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { font-size: 1em; line-height: 1.6; }
+				@media (max-width:30rem) { body { font-size: 2em; } }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find( ( { id } ) => 'count' === id );
+		expect( value ).toBe( 1 );
+	} );
+
+	it( 'should count multiple media queries', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { font-size: 1em; line-height: 1.6; }
+				@media (max-width: 30rem) { body { font-size: 2em; } }
+				@media screen and (max-width: 20rem) { body { font-size: 1.5em; } }
+				@media (max-width: 20rem) { body { font-size: 1.5em; } }`,
+			},
+			{
+				name: 'b.css',
+				content: `body { font-size: 1em; line-height: 1.6; }
+				@media (max-width: 15rem) { body { font-size: 2em; } }
+				@media (max-width: 20rem) { body { font-size: 1.5em; } }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value: count } = results.find( ( { id } ) => 'count' === id );
+		expect( count ).toBe( 5 );
+	} );
+
+	it( 'should track different sizes in media queries', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { font-size: 1em; line-height: 1.6; }
+				@media (max-width: 30rem) { body { font-size: 2em; } }
+				@media screen and (max-width: 20rem) { body { font-size: 1.5em; } }
+				@media (max-width: 20rem) { body { font-size: 1.5em; } }`,
+			},
+			{
+				name: 'b.css',
+				content: `body { font-size: 1em; line-height: 1.6; }
+				@media (max-width: 15rem) { body { font-size: 2em; } }
+				@media (max-width: 20rem) { body { font-size: 1.5em; } }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value: uniqueQueries } = results.find(
+			( { id } ) => 'count-unique-queries' === id
+		);
+		expect( uniqueQueries ).toBe( 4 );
+
+		const { value: topQueries } = results.find(
+			( { id } ) => 'top-10-queries' === id
+		);
+		expect( topQueries[ 0 ].count ).toBe( 2 );
+		expect( topQueries[ 0 ].name ).toBe( '(max-width:20rem)' );
+
+		const { value: topSizes } = results.find(
+			( { id } ) => 'top-10-sizes' === id
+		);
+		expect( topSizes[ 0 ].count ).toBe( 3 );
+		expect( topSizes[ 0 ].name ).toBe( '20rem' );
+	} );
+} );

package/bin/css-audit/src/__tests__/property-values.js

@@ -0,0 +1,55 @@
+const audit = require( '../audits/property-values' );
+
+describe( 'Audit: Property Values', () => {
+	it( 'should return nothing if no properties are set', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { font-size: 1em; line-height: 1.6; }`,
+			},
+		];
+		const { results } = audit( files );
+		expect( results ).toHaveLength( 0 );
+	} );
+
+	it( 'should return nothing if the requested property is not used', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { font-size: 1em; line-height: 1.6; }`,
+			},
+		];
+		const { results } = audit( files, [ 'padding' ] );
+		const { value } = results.find( ( { id } ) => 'count' === id );
+		expect( value ).toBe( 0 );
+	} );
+
+	it( 'should count number of properties', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `.box { padding: 10px; }
+				.box-small { padding: 5px; }`,
+			},
+			{
+				name: 'b.css',
+				content: `.spacy-box { padding: 20px; }
+				.spacy-box-small { padding: 10px; }`,
+			},
+		];
+		const { results } = audit( files, [ 'padding' ] );
+		const { value: count } = results.find( ( { id } ) => 'count' === id );
+		expect( count ).toBe( 4 );
+
+		const { value: unique } = results.find(
+			( { id } ) => 'count-unique' === id
+		);
+		expect( unique ).toBe( 3 );
+
+		const { value: topValues } = results.find(
+			( { id } ) => 'top-10-values' === id
+		);
+		expect( topValues[ 0 ].count ).toBe( 2 );
+		expect( topValues[ 0 ].name ).toBe( '10px' );
+	} );
+} );

package/bin/css-audit/src/__tests__/run.js

@@ -0,0 +1,25 @@
+const { runAudits } = require( '../run' );
+const { getConfig } = require( '../utils/cli' );
+
+describe( 'Run the audits', () => {
+	it( 'should output the JSON format from a configuration object', () => {
+		const configSrc = getConfig( process.env.NODE_ENV );
+
+		const result = runAudits( [
+			{
+				name: 'a.css',
+				content: `body { font-size: 1em !important; line-height: 1.6; }`,
+			},
+		] );
+
+		configSrc.audits.forEach( ( audit ) => {
+			if ( Array.isArray( audit ) ) {
+				audit[ 1 ].split( ',' ).forEach( ( property ) => {
+					expect( result ).toContain( property );
+				} );
+			} else {
+				expect( result ).toContain( audit );
+			}
+		} );
+	} );
+} );

package/bin/css-audit/src/__tests__/selectors.js

@@ -0,0 +1,66 @@
+const audit = require( '../audits/selectors' );
+
+describe( 'Audit: Selectors', () => {
+	it( 'should count the number of selectors used', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { color: white; }
+				p#test { color: white; }
+				div { color: white; }
+				.class { color: white; }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find( ( { id } ) => 'count' === id );
+		expect( value ).toBe( 4 );
+	} );
+
+	it( 'should count the number of selectors that contain IDs', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { color: white; }
+				p#test { color: white; }
+				div { color: white; }
+				.class { color: white; }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find( ( { id } ) => 'count-with-ids' === id );
+		expect( value ).toBe( 1 );
+	} );
+
+	it( 'should calculate and sort based on selector specificity', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { color: white; }
+				p#test { color: white; }
+				div { color: white; }
+				span, .class { color: white; }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find(
+			( { id } ) => 'top-10-selectors' === id
+		);
+		expect( value[ 0 ].selector ).toBe( 'p#test' );
+		expect( value[ 0 ].sum ).toBe( 101 );
+		expect( value[ 1 ].selector ).toBe( '.class' );
+		expect( value[ 1 ].sum ).toBe( 10 );
+	} );
+
+	it( 'should not double-count :not selectors', () => {
+		const files = [
+			{
+				name: 'a.css',
+				content: `body { color: white; }
+				p:not(.class) { color: white; }`,
+			},
+		];
+		const { results } = audit( files );
+		const { value } = results.find( ( { id } ) => 'count' === id );
+		expect( value ).toBe( 2 );
+	} );
+} );