@caweb/cli 1.4.2 → 1.4.4

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/index.js

@@ -12,9 +12,18 @@ import installPath from '@wordpress/env/lib/commands/install-path.js';
 /**
  * Internal dependencies
  */
-import build from './build.js';
-import serve from './serve.js';
-import a11y from './a11y.js';
+import webpack from './webpack/webpack.js';
+
+
+import A11yPlugin from '../lib/webpack/plugins/a11y/index.js';
+const a11y = new A11yPlugin().a11yCheck;
+
+import CSSAuditPlugin from '../lib/webpack/plugins/css-audit/index.js';
+const audit = new CSSAuditPlugin({}).audit;
+
+import JSHintPlugin from '../lib/webpack/plugins/jshint/index.js';
+const hint = new JSHintPlugin().hint;
+
 import shell from './tasks/shell.js';
 
 import sync from './sync.js';
@@ -40,9 +49,10 @@ export {
     start,
 	stop,
     destroy,
-    build,
-    serve,
+    webpack,
     a11y,
+    audit,
+    hint,
     sync,
     updatePlugins,
     shell,

package/commands/test.js

@@ -12,9 +12,6 @@ import os from 'os';
  */
 import { runCLICmds, runCmd, projectPath } from '../lib/index.js';
 import { CAWEB_OPTIONS, DIVI_OPTIONS } from '../lib/wordpress/index.js';
-/*
-import generateOverridesMD from '../admin.js';
-*/
 /**
  * Promisified dependencies
  */

package/commands/webpack/webpack.js

@@ -0,0 +1,166 @@
+#!/usr/bin/env node
+
+/**
+ * External dependencies
+ */
+import path from 'path';
+import fs, { watch } from 'fs';
+import deepmerge from 'deepmerge';
+import Webpack from 'webpack';
+import webpackServer from 'webpack-dev-server';
+
+/**
+ * Internal dependencies
+ */
+import { 
+    runCmd, 
+    projectPath,
+    appPath,
+    wpPrimary,
+    wpGreen,
+    wpRed
+} from '../../lib/index.js';
+
+
+/**
+ * Build the current project
+ * 
+ * @param {Object}  options
+ * @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,
+    a11y,
+    selectors
+} ) {
+    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' )).default;
+
+    // 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],
+        {stdio:'pipe'}
+	).then(({stdout, stderr}) => {
+        // we hide the punycode deprecation warning.
+        // this is caused by the wp-scripts package
+        // 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 ){
+        let hostUrl = 'localhost' === webpackConfig.default.devServer.host ? `http://${webpackConfig.default.devServer.host}`: webpackConfig.default.devServer.host;
+        let hostPort = webpackConfig.default.devServer.port;
+
+        if( hostPort && 80 !== hostPort )
+        {
+            hostUrl = `${hostUrl}:${hostPort}`;
+        }        
+        
+        console.log( `Webpack Server is preparing to launch ${ wpGreen(hostUrl) }` );
+        console.log( `Press ${ wpRed('Ctrl + C') } to shutdown the server.\n` );
+
+        // add a11y plugin
+        if( a11y ){
+            /*webpackConfig.default.plugins.push(new A11yPlugin({
+                outputFilename: 'a11y'
+              }) )
+
+            webpackConfig.default.devServer.static.push({
+                directory: path.join(appPath, 'a11y')
+            })*/
+        }
+        
+         // add css-auditor plugin
+         if( audit ){
+        }
+        
+        const compiler = Webpack(webpackConfig.default);
+        const server = new webpackServer({...webpackConfig.default.devServer}, compiler);
+    
+        await server.start();
+
+        //process.stdin.resume();
+
+        // run webpack serve command
+        /*await runCmd(
+            'webpack', 
+            ['serve', ...webPackArgs],
+            {
+                stdio: 'inherit'
+            }
+        ).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.";
+            }
+    
+        });*/
+
+        /*
+        const compiler = Webpack(webpackConfig.default);
+        const server = new webpackServer({...webpackConfig.default.devServer}, compiler);
+       */
+       
+    // only build was ran.
+    }else{
+        //spinner.prefixText = result;
+        //spinner.text = "Done!";
+    }
+
+};