@caweb/cli 1.4.1 → 1.4.3

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

@@ -0,0 +1,133 @@
+/**
+ * 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

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

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

@@ -0,0 +1,17 @@
+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/commands/audit.js

@@ -0,0 +1,135 @@
+#!/usr/bin/env node
+
+/**
+ * External dependencies
+ */
+import path from 'path';
+import fs from 'fs';
+import { getAllFiles, getAllFilesSync } from 'get-all-files'
+
+/**
+ * Internal dependencies
+ */
+
+import { 
+    runCmd, 
+    projectPath,
+    appPath
+} from '../lib/index.js';
+
+/**
+ * Run WordPress CSS Audit
+ * 
+ * @param {Object}  options
+ * @param {Object}  options.spinner A CLI spinner which indicates progress.
+ * @param {boolean} options.debug   True if debug mode is enabled.
+ */
+export default async function audit({
+	spinner,
+	debug
+} ) {
+    
+    let files = [];
+
+    process.argv.slice(3).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(path.resolve(resolvePath)).toArray().forEach(f => {
+                    if( f.endsWith('.css') ){
+                        files.push(f)
+                    }
+                })
+            // if given path is a file and a .css file
+            }else if( fs.statSync(paths).isFile() && paths.endsWith('.css') ){
+                files.push(paths)
+            }
+        // invalid path/file
+        } catch (error) {
+
+        }
+
+    });
+    
+    // if no files were passed 
+    if( ! files.length ){
+        // if the default build directory exists we audit it
+        if( fs.existsSync(path.resolve('build')) ){
+            // get all .css files in build folder
+            getAllFilesSync(path.resolve('build')).toArray().forEach(f => {
+                if( f.endsWith('.css') ){
+                    files.push(f)
+                }
+            })
+        }
+    }   
+
+    // if files are to be audited.
+    if( files.length ){
+        let auditArgs = [
+            ...files
+        ];
+
+        // default audits.
+        let audits = [
+            'colors',
+            'alphas',
+            'important',
+            'display-none',
+            'selectors',
+            'media-queries',
+            'typography',
+            [ 'property-values', 'font-size' ],
+            [ 'property-values', 'padding,padding-top,padding-bottom,padding-right,padding-left' ],
+            [ 'property-values', 'margin,margin-top,marin-bottom,marin-right,marin-left' ]
+        ]
+        
+        audits.forEach(a => {
+            let audit = Array.isArray(a) ? a[0] : a;
+
+            if( ! process.argv.includes(`--no-${audit}`) ){
+                if( Array.isArray(a) ){
+                    auditArgs.push(`--${audit}=` + a.splice(1).join(','))
+                }else{
+                    auditArgs.push(`--${audit}`)
+                }
+            }
+        })
+               
+        const auditConfigPath = fs.existsSync(path.join(appPath, 'css-audit.config.cjs')) ? 
+            appPath :
+            path.join(projectPath, 'configs')
+
+
+        await runCmd(
+            'auditor', 
+            auditArgs,
+            {
+                cwd: auditConfigPath
+            }
+        ).then(({stderr, stdout}) => {
+            // Audit result handling.
+            if( stderr ){
+                console.log( stderr.toString())
+            }
+            if( stdout ){
+                let msg = stdout.toString().replace('undefined', '');
+            
+                if( 'audit' === process.argv[2] ){
+                    console.log( msg )
+                }else{
+                    return msg;
+                }
+
+            }
+        })
+            
+    }else{
+        spinner.warn('No file(s) or directory path(s) were given.');
+        spinner.warn('Default build directory was not found.');
+        spinner.warn('Auditor did not execute.');
+    }
+
+};

package/commands/index.js

@@ -12,9 +12,12 @@ import installPath from '@wordpress/env/lib/commands/install-path.js';
 /**
  * Internal dependencies
  */
-import build from './build.js';
-import serve from './serve.js';
+import webpack from './webpack/webpack.js';
+
 import a11y from './a11y.js';
+
+import audit from './audit.js'
+
 import shell from './tasks/shell.js';
 
 import sync from './sync.js';
@@ -40,9 +43,9 @@ export {
     start,
 	stop,
     destroy,
-    build,
-    serve,
+    webpack,
     a11y,
+    audit,
     sync,
     updatePlugins,
     shell,

package/commands/webpack/webpack.js

@@ -0,0 +1,133 @@
+#!/usr/bin/env node
+
+/**
+ * External dependencies
+ */
+import path from 'path';
+import fs from 'fs';
+import deepmerge from 'deepmerge';
+
+/**
+ * Internal dependencies
+ */
+import { 
+    runCmd, 
+    projectPath,
+    appPath
+} from '../../lib/index.js';
+
+import {default as auditor} from '../audit.js';
+
+/**
+ * Build the current project
+ * 
+ * @param {Object}  options
+ * @param {Object}  options.spinner A CLI spinner which indicates progress.
+ * @param {boolean} options.debug   True if debug mode is enabled.
+ * @param {boolean} options.audit   Add CSS-Audit Page to pages served.
+ */
+export default async function webpack({
+	spinner,
+	debug, 
+    audit
+} ) {
+
+    spinner.stop();
+    console.log( `Building ${path.basename(appPath)} project...` );
+
+    const webpackCommand = 'build' === process.argv[2] ? 'build' : 'serve' ;
+
+    const defaultConfigPath = path.join( projectPath, 'configs', 'webpack.config.js' );
+    let webpackConfig = await import('file://' + defaultConfigPath);
+    let customConfig = {};
+
+    // Since we use @wordpress/scripts webpack config we can leverage
+    // the environment variables as well.
+    process.env.WP_COPY_PHP_FILES_TO_DIST  = true;
+
+    // pass any arguments from the cli
+    // add our default config as an extension.
+    // users can overwrite any values by creating a webconfig of their own.
+    let webPackArgs = [
+        '--config',
+        defaultConfigPath,
+    ];
+    
+    // CommonJS
+    if( fs.existsSync( path.join(appPath, 'webpack.config.cjs' ))){
+        webPackArgs.push(
+            '--config',
+            path.join(appPath, 'webpack.config.cjs' ),
+            '--merge'
+        )
+
+        customConfig = await import('file://' + path.join(appPath, 'webpack.config.cjs' ));
+
+    // ESM
+    }else if( fs.existsSync(path.join(appPath, 'webpack.config.js' )) ){
+        webPackArgs.push(
+            '--config',
+            path.join(appPath, 'webpack.config.js' ),
+            '--merge'
+        )
+
+        customConfig = await import('file://' + path.join(appPath, 'webpack.config.js' ));
+    }
+
+    if( customConfig.length ){
+        webpackConfig = deepmerge(webpackConfig.default, customConfig.default);
+    }
+
+    // we always run the build command.
+    let result = await runCmd(
+		'webpack', 
+		['build', ...webPackArgs]
+	).then(({stdout, stderr}) => {
+        // we hide the punycode deprecation warning.
+        // if an error was thrown
+        if( stderr ){
+            console.log( stderr.toString().replace(/.*`punycode`.*\n.*/, '') )
+        }
+        
+        if(stdout){
+            return stdout.toString().replace(/.*`punycode`.*\n.*/, '');
+        }
+
+    });
+
+    // if serving.
+    if( 'serve' === webpackCommand ){
+        webPackArgs.push(
+            '--open',
+        )
+
+        // run css-auditor
+        if( audit ){
+            await auditor({ spinner, debug });
+        }
+
+        console.log( "Webpack Server is preparing to launch...\nPress Ctrl + C to shutdown the server.");
+
+        // run webpack serve command
+        await runCmd(
+            'webpack', 
+            ['serve', ...webPackArgs]
+        ).then(({stdout, stderr}) => {
+            // if an error was thrown, and no output
+            if( stderr && ! stdout){
+                console.log( stderr.toString() )
+            }
+            
+            if( stdout ){
+                spinner.text = "Webpack Server was closed.";
+            }
+    
+        });
+
+    // only build was ran.
+    }else{
+        spinner.prefixText = result;
+        spinner.text = "Done!";
+    }
+
+};

package/configs/css-audit.config.cjs

@@ -0,0 +1,9 @@
+/**
+ * External dependencies
+ */
+
+
+module.exports = {
+	format: 'html',
+	filename: 'css-audit'
+};