@caweb/cli 1.4.5 → 1.5.1

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/configs/webpack.config.js

@@ -1,192 +0,0 @@
-/**
- * WebPack Configuration for California Department of Technology
- * 
- * Utilizes WordPress Scripts Webpack configuration as base.
- * s 
- * @link https://webpack.js.org/configuration/
- */
-
-/**
- * External dependencies
- */
-import baseConfig from '@wordpress/scripts/config/webpack.config.js';
-import path from 'path';
-import fs from 'fs';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import {HtmlWebpackSkipAssetsPlugin} from 'html-webpack-skip-assets-plugin';
-
-import CSSAuditPlugin from '../lib/webpack/plugins/css-audit/index.js';
-import A11yPlugin from '../lib/webpack/plugins/a11y/index.js';
-import JSHintPlugin from '../lib/webpack/plugins/jshint/index.js';
-
-/**
- * Internal dependencies
- */
-import {
-  projectPath,
-  appPath
-} from '../lib/index.js';
-
-
-const samplePath = path.join( appPath, 'sample');
-const srcPath = path.join( appPath, 'src');
-const dataPath = path.join( srcPath, 'data');
-
-
-// Update some of the default WordPress webpack rules.
-baseConfig.module.rules.forEach((rule, i) => {
-  const r = new RegExp(rule.test).toString();
-
-  switch(r){
-    // WordPress adds a hash to asset file names we remove that hash.
-    case new RegExp(/\.(bmp|png|jpe?g|gif|webp)$/i).toString():
-      rule.generator.filename = 'images/[name][ext]';
-      break;
-    case new RegExp(/\.(woff|woff2|eot|ttf|otf)$/i).toString():
-      rule.generator.filename = 'fonts/[name][ext]';
-      break;
-    case new RegExp(/\.svg$/).toString():
-      // we don't want SVG to be asset/inline otherwise the resource may not be available.
-      // the asset should be an asset/resource we move them to the fonts folder. 
-      if( 'asset/inline' === rule.type ){
-        rule.type = 'asset/resource';
-        rule.generator = { filename: 'fonts/[name][ext]' };
-
-        delete rule.issuer;
-      }
-      break;
-  }
-});
-
-// Our Webpack Configuration.
-let webpackConfig = {
-  ...baseConfig,
-  target: 'web',
-  cache: false,
-  output: {
-    ...baseConfig.output,
-    publicPath: `/public`,
-    clean: true
-  },
-  performance: {
-    maxAssetSize: 500000,
-    maxEntrypointSize: 500000
-  }
-};
-
-// Delete the default WP Dev Server
-delete webpackConfig.devServer;
-
-// Only add the Dev Server if the serve command is ran.
-if( 'serve' === process.argv[2] ){
-
-  // Add html rule
-  webpackConfig.module.rules = [
-    ...baseConfig.module.rules,
-    {
-      test: /\.html$/,
-      loader:'handlebars-loader'
-    }
-  ]
-
-  // we only want to display errors and warnings
-  webpackConfig.stats = 'errors-warnings';
-
-  let pageTemplate = {
-    title: path.basename(appPath),
-    minify: false,
-    meta: {
-      "Author": "CAWebPublishing",
-      "Description": "State of California",
-      "Keywords": "California,government",
-      "viewport": "width=device-width, initial-scale=1.0, minimum-scale=1.0"
-    },
-    templateParameters: {
-      "title" : path.basename(appPath)
-    },
-    skipAssets: [
-      '**/index-rtl.css', // we skip the Right-to-Left Styles
-      '**/css-audit.*', // we skip the CSSAudit Files
-      '**/a11y.*', // we skip the A11y Files
-      '**/jshint.*', // we skip the JSHint Files
-    ]
-  }
-
-  // if an favicon exists.
-  if( fs.existsSync(path.join(srcPath, 'favicon.ico')) ){
-    pageTemplate.favicon = path.join(srcPath, 'favicon.ico');
-  }
-
-  // Sample Page.
-  let sample = {
-    ...pageTemplate,
-    filename: path.join( appPath, 'public', 'index.html'),
-    template: path.join(samplePath, 'index.html')
-  }
-
-  webpackConfig.plugins.push(
-    new HtmlWebpackPlugin(sample),
-    new HtmlWebpackSkipAssetsPlugin(),
-    new JSHintPlugin(),
-    new A11yPlugin(),
-    new CSSAuditPlugin({
-      format: 'html',
-      colors: ! process.argv.includes('--no-colors'),
-      important: ! process.argv.includes('--no-important'),
-      displayNone: ! process.argv.includes('--no-display-none'),
-      selectors: ! process.argv.includes('--no-selectors'),
-      mediaQueries: ! process.argv.includes('--no-media-queries'),
-      typography: ! process.argv.includes('--no-typography'),
-      propertyValues: process.argv.includes('--no-property-values') ? false : [
-          'font-size',
-          'padding,padding-top,padding-bottom,padding-right,padding-left' ,
-          'property-values', 'margin,margin-top,marin-bottom,marin-right,marin-left',
-      ]
-    })
-  );
-
-  webpackConfig.devServer = {
-    devMiddleware: {
-      writeToDisk: true
-    },
-    headers: {
-    },
-    hot: true,
-    open: ['http://localhost:9000'],
-    //client: 'verbose',
-    allowedHosts: 'auto',
-    host: 'localhost',
-    port: 9000,
-    compress: true,
-    static: [
-      {
-        directory: path.join( appPath, 'build'),
-      },
-      {
-        directory: path.join(appPath, 'public')
-      },
-      {
-        directory: path.join(appPath, 'node_modules'),
-      },
-      {
-        directory: path.join(appPath, 'src'),
-      },
-    ],
-    proxy: [
-      {
-        context: ['/node_modules'],
-        target: 'http://localhost:9000',
-        pathRewrite: { '^/node_modules': '' },
-      },
-      {
-        context: ['/src'],
-        target: 'http://localhost:9000',
-        pathRewrite: { '^/src': '' },
-      }
-    ],
-  }
-
-
-}
-
-export default webpackConfig;

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',
-      ]
-};