@caweb/cli 1.4.4 → 1.5.0

package/bin/css-audit/src/utils/cli.js

@@ -1,133 +0,0 @@
-/**
- * External dependencies
- */
-const minimist = require( 'minimist' );
-const path = require( 'path' );
-const { cosmiconfigSync } = require( 'cosmiconfig' );
-
-const getArgsFromCLI = ( excludePrefixes ) => {
-	const args = process.argv.slice( 2 );
-	if ( excludePrefixes ) {
-		return args.filter( ( arg ) => {
-			return ! excludePrefixes.some( ( prefix ) =>
-				arg.startsWith( prefix )
-			);
-		} );
-	}
-	return args;
-};
-
-const getFileArgsFromCLI = () => minimist( getArgsFromCLI() )._;
-
-/**
- * Get configuration using cosmiconfig.
- *
- * @param {string} env
- */
-const getConfig = ( env ) => {
-	const moduleName = 'test' === env ? 'example-config' : 'css-audit';
-	const searchFrom =
-		'test' === env ? path.join( __dirname, '__tests__' ) : process.cwd();
-
-	const explorerSync = cosmiconfigSync( moduleName );
-	const { config } = explorerSync.search( searchFrom );
-
-	try {
-		return config;
-	} catch ( e ) {
-		console.error( e, 'Error retrieving config file.' );
-	}
-};
-
-/**
- * Get the argument required for running the audit,
- *
- * First get the argument from CLI, and fallback to the
- * config if its not present.
- *
- * @param {string} arg
- * @param {boolean} cliArgOnly
- */
-
-const getArg = ( arg, cliArgOnly = false ) => {
-	for ( const cliArg of getArgsFromCLI() ) {
-		const [ name, value ] = cliArg.split( '=' );
-
-		if ( name === arg ) {
-			return 'undefined' === typeof value ? true : value || null;
-		}
-	}
-
-	if ( true === cliArgOnly ) {
-		return false;
-	}
-
-	const config = getConfig( process.env.NODE_ENV );
-
-	const term = arg.substr( 2 );
-
-	// This is a simple property: value arg e.g. format: json
-	const isSimplePropertyValueArg = config.hasOwnProperty( term );
-
-	if ( isSimplePropertyValueArg ) {
-		return 'undefined' === typeof config[ term ]
-			? true
-			: config[ term ] || null;
-	}
-
-	if ( config.hasOwnProperty( 'audits' ) ) {
-		// Separate the basic audits from property-values.
-		const basicAudits = config.audits.filter(
-			( audit ) => term === audit && 'string' === typeof audit
-		);
-
-		// Create an array of values of the property-value audits.
-		const propertyValueAudits = config.audits.filter(
-			( audit ) => 'object' === typeof audit && term === audit[ 0 ]
-		);
-
-		const propertyValueValues = ( () => {
-			if ( propertyValueAudits.length > 0 ) {
-				return propertyValueAudits
-					.flat()
-					.filter( ( item ) => 'property-values' !== item );
-			}
-			return [];
-		} )();
-
-		if ( 'undefined' !== basicAudits[ 0 ] && term === basicAudits[ 0 ] ) {
-			return true;
-		}
-
-		if ( propertyValueValues.length > 0 ) {
-			return propertyValueValues;
-		}
-	}
-
-	// The argument cannot be retrieved from CLI or config.
-	return false;
-};
-
-const getHelp = () => {
-	return `Usage: css-audit -- <files...> [options]
-
---colors          Run colors audit.
---important       Run !important audit.
---display-none    Run display: none audit.
---selectors       Run selectors audit.
---media-queries   Run media queries audit.
---property-values Run audit for a given set of property values, comma-separated.
---recommended     Run recommended audits (colors, important, selectors). Default: true.
---all             Run all audits (except property values, as it requires a value).
---format          Format to use for displaying report.
---help            Show this message.
-`;
-};
-
-module.exports = {
-	getArgsFromCLI,
-	getFileArgsFromCLI,
-	getArg,
-	getConfig,
-	getHelp,
-};

package/bin/css-audit/src/utils/format-report.js

@@ -1,37 +0,0 @@
-const FMT_CLI_TABLE = 'cli-table';
-const FMT_JSON = 'json';
-const FMT_HTML = 'html';
-
-/**
- * Format the reports using the specified reporter format.
- *
- * @param {Array<Array<Object>>} reports The list of report data.
- * @param {FMT_CLI_TABLE|FMT_JSON} format One of the predefined formats. Defaults to FMT_CLI_TABLE.
- * @return {string} The formatted reports.
- */
-function formatReport( reports, format = FMT_CLI_TABLE ) {
-	let formatCallback = false;
-	switch ( format ) {
-		case FMT_JSON:
-			formatCallback = require( '../formats/json' );
-			break;
-		case FMT_HTML:
-			formatCallback = require( '../formats/html' );
-			break;
-		case FMT_CLI_TABLE:
-		default:
-			formatCallback = require( '../formats/cli-table' );
-	}
-
-	const formattedReports = formatCallback( reports );
-	if ( Array.isArray( formattedReports ) ) {
-		return formattedReports.join( '\n' );
-	}
-
-	return formattedReports;
-}
-
-module.exports = {
-	formats: [ FMT_CLI_TABLE, FMT_JSON ],
-	formatReport,
-};

package/bin/css-audit/src/utils/get-specificity.js

@@ -1,97 +0,0 @@
-const csstree = require( 'css-tree' );
-
-/**
- * A recursive callback used to build up the specificity of a selector.
- *
- * This is intented to be used as a `reduce` callback, building up the
- * specificity in the array accumulator as it processes each part of a selector.
- *
- * @param {Array<number>} specificity The specificity as an array.
- * @param {Object} selector A selector node from the css-tree AST.
- * @return {Array} The calculated specificity value.
- */
-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 ] );
-	}
-
-	switch ( selector.type ) {
-		case 'IdSelector':
-			a++;
-			break;
-		case 'ClassSelector':
-		case 'AttributeSelector':
-		case 'Nth':
-			b++;
-			break;
-		case 'PseudoClassSelector':
-			if ( 'not' === selector.name ) {
-				break;
-			}
-			b++;
-			break;
-		case 'TypeSelector':
-		case 'PseudoElementSelector':
-			if ( '*' === selector.name ) {
-				break;
-			}
-			c++;
-			break;
-		case 'WhiteSpace':
-		case 'Combinator':
-		case 'Identifier':
-			// Whitespace, adjacent selectors (>, ~), … do not impact specificity.
-			break;
-		case 'Percentage':
-			// Part of a keyframe, not to be calculated.
-			break;
-		default:
-			console.warn( 'Unhandled selector type:', selector.type );
-	}
-	return [ a, b, c ];
-}
-
-/**
- * Get the specificity value for a given CSS selector.
- *
- * @param {string} selector A valid CSS selector.
- * @return {number} The calculated specificity value.
- */
-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,
-	] );
-	return 100 * a + 10 * b + c;
-}
-
-/**
- * Get the specificity value for a given CSS selector, as an array.
- *
- * @param {string} selector A valid CSS selector.
- * @return {Array} The calculated specificity value.
- */
-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,
-	] );
-	return [ a, b, c ];
-}
-
-module.exports = {
-	calculateSpecificity,
-	getSpecificity,
-	getSpecificityArray,
-};

package/bin/css-audit/src/utils/get-values-count.js

@@ -1,17 +0,0 @@
-module.exports = function ( values ) {
-	const uniqueValues = [ ...new Set( values ) ];
-
-	return uniqueValues
-		.map( ( val ) => {
-			// Count up how many times this item appears in the full list.
-			const count = values.filter( ( c ) => c === val ).length;
-			return {
-				name: val,
-				count,
-			};
-		} )
-		.sort( ( a, b ) => {
-			// Reverse sort
-			return b.count - a.count;
-		} );
-};

package/lib/webpack/plugins/css-audit/css-audit.config.cjs

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

package/lib/webpack/plugins/css-audit/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',
-      ]
-};

package/lib/webpack/plugins/css-audit/index.js

@@ -1,297 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * External dependencies
- */
-import { sync as resolveBin } from 'resolve-bin';
-import spawn from 'cross-spawn';
-import { getAllFilesSync } from 'get-all-files'
-import EntryDependency from "webpack/lib/dependencies/EntryDependency.js";
-
-import path from 'path';
-import fs, { stat } from 'fs';
-import deepmerge from 'deepmerge';
-import chalk from 'chalk';
-import { fileURLToPath, URL } from 'url';
-
-// default configuration
-import {default as DefaultConfig} from './default.config.js';
-
-const boldWhite = chalk.bold.white;
-const boldGreen = chalk.bold.green;
-const boldBlue = chalk.bold.hex('#03a7fc');
-const currentPath = path.dirname(fileURLToPath(import.meta.url));
-
-// CSS Audit Plugin
-class CSSAuditPlugin {
-    config = {}
-
-    constructor(opts = {}) {
-      this.config = deepmerge(DefaultConfig, opts);
-    }
-
-    apply(compiler) {
-      const staticDir = {
-        directory: path.join(path.resolve(currentPath, '../../../../'), 'bin', 'css-audit', 'public'),
-        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`)
-      }
-
-      // add our static directory 
-      if( Array.isArray(devServer.static) ){
-        devServer.static.push(staticDir)
-      }else{
-        devServer.static = [].concat(devServer.static, staticDir );
-      }
-
-      
-      // Wait for configuration preset plugins to apply all configure webpack defaults
-      compiler.hooks.initialize.tap('CSS Audit Plugin', () => {
-        compiler.hooks.compilation.tap(
-          "CSS Audit Plugin",
-          (compilation, { normalModuleFactory }) => {
-            compilation.dependencyFactories.set(
-              EntryDependency,
-              normalModuleFactory
-            );
-          }
-        );
-
-        const { entry, options, context } = {
-          entry: path.join(staticDir.directory, 'css-audit.update.js'),
-          options: {
-            name: 'css-audit.update'
-          },
-          context: staticDir.directory
-        };
-
-        const dep = new EntryDependency(entry);
-        dep.loc = {
-          name: options.name
-        };
-        
-        fs.writeFileSync(
-          path.join(staticDir.directory, `css-audit.update.js`),
-          `` // required for hot-update to compile on our page, blank script for now
-        );
-
-        compiler.hooks.thisCompilation.tap('CSS Audit Plugin',
-          /**
-           * Hook into the webpack compilation
-           * @param {Compilation} compilation
-           */
-          (compilation) => {
-            
-            compiler.hooks.make.tapAsync("CSS Audit Plugin", (compilation, callback) => {
-              
-              compilation.addEntry(
-              context,
-              dep, 
-              options, 
-              err => {
-                callback(err);
-              });
-            });
-
-            // process assets and run the css-audit on appropriate assets.
-            compilation.hooks.processAssets.tapAsync(
-              {
-                name: 'CSS Audit Plugin',
-                stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL  
-              },
-              /**
-               * Hook into the process assets hook
-               * @param {any} _
-               * @param {(err?: Error) => void} callback
-               */
-              (assets, callback) => {
-                let files = [];
-
-                Object.entries(assets).forEach(([pathname, source]) => {
-                  if( pathname.endsWith('.js') ){
-                    if( source['_source'] && source['_source']['_children'] ){
-                      source['_source']['_children'].forEach((s, i) => {
-                        if( 
-                          'string' === typeof s && // is a string and
-                          0 < s.indexOf('.css') && // has a .css reference and
-                          0 > s.indexOf('node_modules') // not referencing node_modules directory
-                        ){
-                          files.push( path.resolve(s.replace(/[\n\s\S\w]*"(.*)"[\n\s\S\w]*/, '$1')) )
-                        }
-                      })    
-                    }
-                  }
-                })
-                console.log(`<i> ${boldGreen('[webpack-dev-middleware] Running CSS Audit...')}`);
-                
-                this.audit(files, this.config );
-    
-                // we have to inject the css-audit.update.js file into the head in order for the webpack-dev-server scripts to load.
-                let pageContent = fs.readFileSync(path.join(staticDir.directory, `${this.config.filename}.html`))
-                
-                fs.writeFileSync(
-                  path.join(staticDir.directory, `${this.config.filename}.html`),
-                  pageContent.toString().replace('</head>', '<script src="/css-audit.update.js"></script>\n</head>')
-                )
-
-                console.log(`<i> ${boldGreen('[webpack-dev-middleware] CSS Audit can be viewed at')} ${ boldBlue(new URL(`${hostUrl}/${this.config.filename}.html`).toString())  }`);
-    
-                callback();
-            });
-            
-
-            compiler.hooks.watchClose.tap( 'CSS Audit Plugin', () => {
-              getAllFilesSync(compiler.options.output.path).toArray().forEach(f => {
-                if( 
-                  f.includes('css-audit') || // delete any css-audit files
-                  f.includes('.hot-update.js') // delete any HMR files
-                ){
-                  fs.rmSync(f)
-                }
-              })
-            })
-        });
-
-      });
-    
-    }
-
-    /**
-     * Run CSS Auditor
-     *
-     * @param {Array} files
-     * @param {Object}  options
-     * @param {boolean} options.debug
-     * @param {boolean} options.format
-     * @param {boolean} options.filename
-     * @param {boolean} options.colors
-     * @param {boolean} options.important
-     * @param {boolean} options.displayNone
-     * @param {boolean} options.selectors
-     * @param {boolean} options.mediaQueries
-     * @param {boolean} options.typography
-     * @param {Array} options.propertyValues
-     */
-    audit(files, {
-      debug,
-      format,
-      filename,
-      colors,
-      important,
-      displayNone,
-      selectors,
-      mediaQueries,
-      typography,
-      propertyValues
-    }){
-
-
-      let filesToBeAuditted = [];
-      let filesWithIssues = [];
-
-      files.forEach( (paths, i) => {
-        let resolvePath = path.resolve(paths);
-
-        try {
-            // if given path is a directory
-            if( fs.statSync(resolvePath).isDirectory() ){
-
-                // get all .css files
-                getAllFilesSync(resolvePath).toArray().forEach(f => {
-                    if( f.endsWith('.css') ){
-                      filesToBeAuditted.push(f)
-                    }
-                })
-            // if given path is a file and a .css file
-            }else if( fs.statSync(paths).isFile() && paths.endsWith('.css') ){
-              filesToBeAuditted.push(paths)
-            }
-        // invalid path/file
-        } catch (error) {
-          filesWithIssues.push(paths)
-        }
-
-      });
-
-      if( ! filesToBeAuditted.length ){
-        console.log('No file(s) or directory path(s) were given or default directory was not found.')
-        console.log('Auditor did not execute.');
-        return
-      }
-
-      /**
-       * the css audit uses the filename for the title, rather than the project name
-       * we fix that by passing the project name for the file name
-       * then renaming the file to the intended file name.
-       */
-      let auditArgs = [
-        colors ? '--colors' : '',
-        important ? '--important' : '',
-        displayNone ? '--display-none' : '',
-        selectors ? '--selectors' : '',
-        mediaQueries ? '--media-queries' : '',
-        typography ? '--typography' : '',
-        format ? `--format=${format}` : '',
-        filename ? `--filename=${path.basename(process.cwd())}` : ''
-      ].filter( e => e)
-      
-      if( propertyValues ){
-        propertyValues.forEach((p) => {
-          auditArgs.push(`--property-values=${p.replace(' ',',')}`)
-        })
-      }
-
-      
-      let { stdout, stderr } = spawn.sync( 
-        'node ' + resolveBin('@caweb/cli', {executable: 'auditor'}),
-        [
-          ...filesToBeAuditted,
-          ...auditArgs
-        ],
-        {
-          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 ){
-          // rename the file back to the intended file name instead of the project name
-          fs.renameSync(
-            path.join(path.resolve(currentPath, '../../../../'), 'bin', 'css-audit', 'public', `${path.basename(process.cwd())}.html`),
-            path.join(path.resolve(currentPath, '../../../../'), 'bin', 'css-audit', 'public', `${filename}.html`)
-          )
-          
-          let msg = stdout.toString().replace('undefined', '');
-      
-          if( 'audit' === process.argv[2] ){
-              console.log( msg )
-          }else{
-              return msg;
-          }
-
-      }
-      
-    } // end of audit
-
-} // end of class
-  
-
-export default CSSAuditPlugin;

package/lib/webpack/plugins/css-audit/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "@caweb/css-audit-webpack-plugin",
-  "version": "1.0.0",
-  "description": "Webpack Plugin to run WordPress CSS Audit",
-  "type": "module",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 0"
-  },
-  "author": "Danny Guzman",
-  "license": "ISC"
-}

package/lib/webpack/plugins/jshint/.jshintrc

@@ -1,31 +0,0 @@
-{
-	"boss": true,
-	"curly": true,
-	"eqeqeq": true,
-	"eqnull": true,
-	"esversion": 6,
-	"expr": true,
-	"immed": true,
-	"noarg": true,
-	"nonbsp": true,
-	"quotmark": "single",
-	"undef": true,
-	"unused": true,
-
-	"browser": true,
-
-	"globals": {
-		"_": false,
-		"Backbone": false,
-		"jQuery": false,
-		"JSON": false,
-		"wp": false,
-		"export": false,
-		"module": false,
-		"require": false,
-		"WorkerGlobalScope": false,
-		"self": false,
-		"OffscreenCanvas": false,
-		"Promise": false
-	}
-}