@caweb/cli 1.4.4 → 1.5.0

package/bin/css-audit/package.json

@@ -1,56 +0,0 @@
-{
-  "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

@@ -1 +0,0 @@
-

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

@@ -1,128 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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 );
-	} );
-} );