@caweb/css-audit-webpack-plugin 1.0.12 → 2.0.0

package/bin/auditor/package.json

@@ -12,21 +12,19 @@
   "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"
+    "@wordpress/eslint-plugin": "^22.0.0",
+    "chalk": "5.4.1",
+    "cli-table3": "0.6.5",
+    "cosmiconfig": "9.0.0",
+    "css-tree": "3.1.0",
+    "cssom": "0.5.0",
+    "eslint": "^8.57.1",
+    "glob": "11.0.3",
+    "minimist": "1.2.8",
+    "postcss": "8.5.6",
+    "postcss-values-parser": "6.0.2",
+    "prettier": "npm:wp-prettier@3.0.3",
+    "tinycolor2": "1.6.0"
   },
   "eslintConfig": {
     "extends": [
@@ -49,8 +47,8 @@
   },
   "prettier": "@wordpress/prettier-config",
   "devDependencies": {
-    "handlebars": "4.7.7",
-    "jest": "26.6.3",
-    "twing": "5.0.2"
+    "handlebars": "4.7.8",
+    "jest": "30.0.3",
+    "twig": "^1.17.1"
   }
 }

package/bin/auditor/src/__tests__/selectors.js

@@ -63,4 +63,18 @@ describe( 'Audit: Selectors', () => {
 		const { value } = results.find( ( { id } ) => 'count' === id );
 		expect( value ).toBe( 2 );
 	} );
+
+	it( 'should handle modern CSS', () => {
+		expect( () => {
+			audit( [
+				{
+					name: 'a.css',
+					content: `h1, h2 { color: green; }
+					div:not([hidden]) { color: black; }
+					body :is(h1, h2) { color: red; }
+					body :where(h1, h2) { color: orange; }`,
+				},
+			] );
+		} ).not.toThrow( SyntaxError );
+	} );
 } );

package/bin/auditor/src/audits/media-queries.js

@@ -17,11 +17,9 @@ module.exports = function ( files = [] ) {
 		csstree.walk( ast, {
 			visit: 'MediaQuery',
 			enter( node ) {
-				if ( node.children ) {
-					allQueries.push( csstree.generate( node ) );
-				}
+				allQueries.push( csstree.generate( node ) );
 				csstree.walk( node, {
-					visit: 'MediaFeature',
+					visit: 'Feature',
 					enter( sizeNode ) {
 						if (
 							sizeNode.name === 'max-width' ||

package/bin/auditor/src/audits/selectors.js

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+const csstree = require( 'css-tree' );
 const { parse } = require( 'postcss' );
 
 const { getSpecificityArray } = require( '../utils/get-specificity' );
@@ -12,10 +13,11 @@ module.exports = function ( files = [] ) {
 	files.forEach( ( { name, content } ) => {
 		const root = parse( content, { from: name } );
 		root.walkRules( function ( { selector } ) {
-			const selectorList = selector.split( ',' );
-			selectorList.forEach( ( selectorName ) => {
-				// Remove excess whitespace from selectors.
-				selectorName = selectorName.replace( /\s+/g, ' ' ).trim();
+			const selectorList = csstree.parse( selector, {
+				context: 'selectorList',
+			} );
+			selectorList.children.forEach( ( _selector ) => {
+				const selectorName = csstree.generate( _selector );
 				const [ a, b, c ] = getSpecificityArray( selectorName );
 				const sum = 100 * a + 10 * b + c; // eslint-disable-line no-mixed-operators
 				selectors.push( {

package/bin/auditor/src/formats/html.js

@@ -1,6 +1,6 @@
-const fs = require( 'fs-extra' );
+const fs = require( 'node:fs' );
 const path = require( 'path' );
-const { TwingEnvironment, TwingLoaderFilesystem } = require( 'twing' );
+const Twig = require( 'twig' );
 
 /**
  * Internal dependencies
@@ -23,9 +23,6 @@ function getTemplateFile( name ) {
 }
 
 module.exports = function ( reports ) {
-	const loader = new TwingLoaderFilesystem( templatePath );
-	const twing = new TwingEnvironment( loader, { debug: true } );
-
 	const reportName = getArg( '--filename' );
 	const reportTemplate = getTemplateFile( reportName );
 	const reportDestDir = path.join( __dirname, '..', '..', 'public' );
@@ -38,15 +35,18 @@ module.exports = function ( reports ) {
 	// Copy CSS src to /public
 	const cssSrc = path.join( __dirname, 'html', 'style.css' );
 	const cssDest = path.join( reportDestDir, 'style.css' );
-	fs.copyFile( cssSrc, cssDest );
+	fs.copyFileSync( cssSrc, cssDest );
 
-	twing
-		.render( reportTemplate, context )
-		.then( ( output ) => {
-			console.log( `Generated template for ${ reportName }.` );
-			fs.writeFileSync( reportDest, output );
-		} )
-		.catch( ( e ) => {
-			console.error( e );
-		} );
+	Twig.renderFile(
+		path.resolve( __dirname, 'html', reportTemplate ),
+		context,
+		( error, output ) => {
+			if ( error ) {
+				console.error( e );
+			} else {
+				console.log( `Generated template for ${ reportName }.` );
+				fs.writeFileSync( reportDest, output );
+			}
+		}
+	);
 };

package/bin/auditor/src/utils/__tests__/get-specificity.js

@@ -14,6 +14,8 @@ describe( 'Calculate Specificity', () => {
 	it( 'should calculate for pseudo-classes', () => {
 		expect( getSpecificity( ':checked' ) ).toBe( 10 );
 		expect( getSpecificity( 'a:link' ) ).toBe( 11 );
+		expect( getSpecificity( 'body:lang(en)' ) ).toBe( 11 );
+		expect( getSpecificity( 'body:lang(en,ja)' ) ).toBe( 11 );
 	} );
 
 	it( 'should calculate for class selectors', () => {
@@ -36,4 +38,25 @@ describe( 'Calculate Specificity', () => {
 			getSpecificity( 'li > a[href*="en-US"] > .inline-warning' )
 		).toBe( 22 );
 	} );
+
+	it( 'should calculate for :is selectors', () => {
+		expect( getSpecificity( ':is(h1)' ) ).toBe( 1 );
+		expect( getSpecificity( ':is(h1, .class)' ) ).toBe( 10 );
+		expect( getSpecificity( ':is(h1, .class, #id)' ) ).toBe( 100 );
+		expect( getSpecificity( 'span:is(h1)' ) ).toBe( 2 );
+	} );
+
+	it( 'should calculate for :where selectors', () => {
+		expect( getSpecificity( ':where(h1)' ) ).toBe( 0 );
+		expect( getSpecificity( ':where(h1, .class)' ) ).toBe( 0 );
+		expect( getSpecificity( ':where(h1, .class, #id)' ) ).toBe( 0 );
+		expect( getSpecificity( 'span:where(h1)' ) ).toBe( 1 );
+	} );
+
+	it( 'should calculate for :not selectors', () => {
+		expect( getSpecificity( ':not(h1)' ) ).toBe( 1 );
+		expect( getSpecificity( ':not(h1, .class)' ) ).toBe( 10 );
+		expect( getSpecificity( ':not(h1, .class, #id)' ) ).toBe( 100 );
+		expect( getSpecificity( 'span:not(h1)' ) ).toBe( 2 );
+	} );
 } );

package/bin/auditor/src/utils/get-specificity.js

@@ -14,10 +14,28 @@ function calculateSpecificity( [ a, b, c ], selector ) {
 	if ( ! selector.type ) {
 		return;
 	}
-	if ( 'lang' !== selector.name && selector.children ) {
-		return selector.children
-			.toArray()
-			.reduce( calculateSpecificity, [ a, b, c ] );
+
+	if ( 'PseudoClassSelector' === selector.type && 'lang' !== selector.name ) {
+		if ( 'where' === selector.name ) {
+			return [ a, b, c ];
+		}
+		if ( selector.children ) {
+			let maxSpec = [ 0, 0, 0 ];
+			let max = -1;
+			selector.children.forEach( ( list ) => {
+				if ( 'SelectorList' === list.type ) {
+					list.children.forEach( ( s ) => {
+						const _selector = csstree.generate( s );
+						const result = getSpecificity( _selector );
+						if ( result > max ) {
+							maxSpec = getSpecificityArray( _selector );
+							max = result;
+						}
+					} );
+				}
+			} );
+			return [ a + maxSpec[ 0 ], b + maxSpec[ 1 ], c + maxSpec[ 2 ] ];
+		}
 	}
 
 	switch ( selector.type ) {
@@ -65,11 +83,10 @@ function calculateSpecificity( [ a, b, c ], selector ) {
 function getSpecificity( selector ) {
 	const node = csstree.parse( selector, { context: 'selector' } );
 	const selectorList = node.children.toArray();
-	const [ a, b, c ] = selectorList.reduce( calculateSpecificity, [
-		0,
-		0,
-		0,
-	] );
+	const [ a, b, c ] = selectorList.reduce(
+		calculateSpecificity,
+		[ 0, 0, 0 ]
+	);
 	return 100 * a + 10 * b + c;
 }
 
@@ -82,11 +99,10 @@ function getSpecificity( selector ) {
 function getSpecificityArray( selector ) {
 	const node = csstree.parse( selector, { context: 'selector' } );
 	const selectorList = node.children.toArray();
-	const [ a, b, c ] = selectorList.reduce( calculateSpecificity, [
-		0,
-		0,
-		0,
-	] );
+	const [ a, b, c ] = selectorList.reduce(
+		calculateSpecificity,
+		[ 0, 0, 0 ]
+	);
 	return [ a, b, c ];
 }
 

package/index.js

@@ -15,7 +15,7 @@ import chalk from 'chalk';
 import { fileURLToPath, URL } from 'url';
 
 // default configuration
-import {default as DefaultConfig} from './default.config.js';
+import {default as DefaultConfig} from './css-audit.config.js';
 
 const boldWhite = chalk.bold.white;
 const boldGreen = chalk.bold.green;
@@ -24,50 +24,67 @@ const currentPath = path.dirname(fileURLToPath(import.meta.url));
 
 // CSS Audit Plugin
 class CSSAuditPlugin {
-    config = {}
+    config = {};
 
     constructor(opts = {}) {
+      // the default publicPath is always the outputFolder
+      DefaultConfig.publicPath = DefaultConfig.outputFolder;
 
-     // if no outputFolder is defined fallback to the default path
-     if( ! opts.outputFolder ){
-        opts.outputFolder = path.join(currentPath, 'bin', 'auditor', 'public')
-      // path must be absolute
-      }else if( ! path.isAbsolute(opts.outputFolder) ){
-        opts.outputFolder = path.join(process.cwd(), opts.outputFolder );
-      }
+      // the default output folder is always relative to the current working directory.
+      DefaultConfig.outputFolder = path.join( process.cwd(), DefaultConfig.outputFolder );
+
+      // if opts.outputFolder is defined
+      if( opts.outputFolder && ! path.isAbsolute(opts.outputFolder)  ){
+        opts.publicPath = opts.outputFolder;
 
+        // we join the current working directory with the opts.outputFolder
+        opts.outputFolder = path.join( process.cwd(), opts.outputFolder );
+      }
+      
       this.config = deepmerge(DefaultConfig, opts);
     }
 
     apply(compiler) {
       const staticDir = {
         directory: this.config.outputFolder,
+        publicPath: encodeURI(this.config.publicPath).replace(':', ''),
         watch: true
       }
-      let { devServer, output } = compiler.options;
-      let hostUrl = 'localhost' === devServer.host ? `http://${devServer.host}`: devServer.host;
-      let hostPort = devServer.port;
-
-      if( hostPort && 80 !== hostPort )
-      {
-          hostUrl = `${hostUrl}:${hostPort}`;
-      }
       
-      // if dev server allows for multiple pages to be opened
-      // add css-audit.html to open property.
-      if( Array.isArray(devServer.open) ){
-        devServer.open.push(`${hostUrl}/${this.config.rewrite ? this.config.rewrite : this.config.filename}.html`)
-      }else if( 'object' === typeof devServer.open && Array.isArray(devServer.open.target) ){
-        devServer.open.target.push(`${hostUrl}/${this.config.filename}.html`)
+      let { devServer } = compiler.options;
+      let auditUrl = `${devServer.server}://${devServer.host}:${devServer.port}`;
+      let nodeModulePath = encodeURI(this.config.publicPath).replace(':', '') + '/node_modules';
+      let pathRewrite = {};
+      pathRewrite[`^${nodeModulePath}`] = '';
+      
+      let proxy = {
+        context: [ nodeModulePath ],
+        target: auditUrl,
+        pathRewrite,
+      };
+
+      // we add the proxy to the devServer
+      if( Array.isArray(devServer.proxy) ){
+        devServer.proxy.push(proxy)
+      }else{
+        devServer.proxy = [].concat(devServer.proxy, proxy );
       }
 
-      // add our static directory 
+      // add our static directory to the devServer
       if( Array.isArray(devServer.static) ){
         devServer.static.push(staticDir)
       }else{
         devServer.static = [].concat(devServer.static, staticDir );
       }
-      
+
+      // if dev server allows for multiple pages to be opened
+      // add filename.html to open property.
+      if( Array.isArray(devServer.open) ){
+        devServer.open.push(`${staticDir.publicPath}/${this.config.filename}.html`)
+      }else if( 'object' === typeof devServer.open && Array.isArray(devServer.open.target) ){
+        devServer.open.target.push(`${staticDir.publicPath}/${this.config.filename}.html`)
+      }
+
       // we always make sure the output folder exists
       fs.mkdirSync( staticDir.directory, { recursive: true } );
 
@@ -134,7 +151,29 @@ class CSSAuditPlugin {
             })
             console.log(`<i> ${boldGreen('[webpack-dev-middleware] Running CSS Audit...')}`);
 
-            let result = this.audit(files, this.config );
+            let audits = {};
+            this.config.audits.forEach( (audit) => {
+                let key = 'string' === typeof audit ? audit : audit[0];
+                let value = 'string' === typeof audit ? true : audit[1];
+
+                // fix key
+                key = key.replace(/-\w/g, (m) => m[1].toUpperCase());
+
+                // if key already exists, push value to array
+                if( audits.hasOwnProperty(key) ){
+                    audits[key].push(value);
+                }else{
+                    // otherwise, if the audit is an array create a new array with the value
+                    audits[key] = ! Array.isArray(audit) ? value : [value];
+                }
+            });
+
+            let result = this.audit(files, {
+              format: this.config.format,
+              filename: this.config.filename, 
+              outputFolder: this.config.outputFolder, 
+              ...audits,
+            } );
 
             if( result ){
               // we have to inject the css-audit.update.js file into the head in order for the webpack-dev-server scripts to load.
@@ -146,7 +185,7 @@ class CSSAuditPlugin {
               )
             }
             
-            console.log(`<i> ${boldGreen('[webpack-dev-middleware] CSS Audit can be viewed at')} ${ boldBlue(new URL(`${hostUrl}/${this.config.filename}.html`).toString())  }`);
+            console.log(`<i> ${boldGreen('[webpack-dev-middleware] CSS Audit can be viewed at')} ${ boldBlue(new URL(`${auditUrl}${staticDir.publicPath}/${this.config.filename}.html`).toString())  }`);
 
             callback();
           }
@@ -156,6 +195,9 @@ class CSSAuditPlugin {
       
     }
 
+    
+
+
     /**
      * Run WordPress CSS Audit
      * 
@@ -191,10 +233,10 @@ class CSSAuditPlugin {
 
       let filesToBeAudited = [];
       let filesWithIssues = [];
- 
+      
       // the css audit tool always outputs to its own public directory
       let defaultOutputPath = path.join(currentPath, 'bin', 'auditor', 'public');
-      
+
       // we always make sure the output folder exists
       fs.mkdirSync( outputFolder, { recursive: true } );
 
@@ -258,7 +300,7 @@ class CSSAuditPlugin {
         important && ! processArgs.includes('--no-important') ? '--important' : '',
         displayNone && ! processArgs.includes('--no-display-none') ? '--display-none' : '',
         selectors && ! processArgs.includes('--no-selectors') ? '--selectors' : '',
-        mediaQueries && ! processArgs.includes('--no-media-queries') ? '--media-queries' : '',
+        // mediaQueries && ! processArgs.includes('--no-media-queries') ? '--media-queries' : '',
         typography && ! processArgs.includes('--no-typography') ? '--typography' : '',
         format  ? `--format=${format}` : '',
         filename ? `--filename=${path.basename(process.cwd())}` : ''
@@ -269,25 +311,27 @@ class CSSAuditPlugin {
           auditArgs.push(`--property-values=${p.replace(' ',',')}`)
         })
       }
-      
+
       let { stdout, stderr } = spawn.sync( 
-        'node ' + resolveBin('@caweb/css-audit-webpack-plugin', {executable: 'auditor'}),
+        'node',
         [
+          resolveBin('@caweb/css-audit-webpack-plugin', {executable: 'auditor'}),
+          // '--',
           ...filesToBeAudited,
           ...auditArgs
         ],
         {
+          shell: false,
           stdio: 'pipe',
           cwd: fs.existsSync(path.join(process.cwd(), 'css-audit.config.cjs')) ? process.cwd() : currentPath
         }
       )
-
+      
       if( stderr && stderr.toString() ){
         console.log( stderr.toString() )
       }
 
       if( stdout && stdout.toString() ){
-          
 
           // rename the file back to the intended file name instead of the project name
           let outputFile = path.join(outputFolder, `${filename}.html`);
@@ -305,7 +349,7 @@ class CSSAuditPlugin {
             )
           }
 
-          let msg = stdout.toString().replace('undefined', '');
+          let msg = stdout.toString().replace('undefined', '').replace('template', 'css audit');
       
           // the command was ran via cli
           if( 'audit' === process.argv[2] ){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caweb/css-audit-webpack-plugin",
-  "version": "1.0.12",
+  "version": "2.0.0",
   "description": "CAWebPublishing Webpack Plugin to run WordPress CSS Audit",
   "type": "module",
   "main": "index.js",
@@ -40,14 +40,15 @@
     "test": "echo \"Error: run tests from root\" && exit 0"
   },
   "dependencies": {
-    "chalk": "^5.3.0",
-    "cross-spawn": "^7.0.3",
+    "chalk": "^5.4.1",
+    "cross-spawn": "^7.0.6",
     "deepmerge": "^4.3.1",
     "get-all-files": "^5.0.0",
-    "resolve-bin": "^1.0.1"
+    "resolve-bin": "^1.0.1",
+    "twig": "^1.17.1"
   },
   "devDependencies": {
-    "webpack": "^5.96.1",
-    "webpack-cli": "^5.1.4"
+    "webpack": "^5.101.0",
+    "webpack-cli": "^6.0.1"
   }
 }

package/css-audit.config.cjs

@@ -1,5 +0,0 @@
-/**
- * External dependencies
- */
-
-module.exports = {};

package/default.config.js

@@ -1,19 +0,0 @@
-/**
- * External dependencies
- */
-
-export default {
-	format: 'html',
-	filename: 'css-audit',
-	colors: true,
-  important: true,
-  displayNone: true,
-	selectors: true,
-	mediaQueries: true,
-	typography: true,
-	propertyValues: [
-	  'font-size',
-	  'padding,padding-top,padding-bottom,padding-right,padding-left' ,
-	  'property-values', 'margin,margin-top,marin-bottom,marin-right,marin-left',
-	]
-};