@caweb/cli 1.4.3 → 1.4.4

package/lib/cli.js

@@ -4,9 +4,7 @@
 //const wpenv_cli = require('@wordpress/env/lib/cli');
 
 import path from 'path';
-import chalk from 'chalk';
 import fs from 'fs';
-import terminalLink from  'terminal-link';
 import { Command, Argument, Option  } from 'commander';
 
 /**
@@ -14,10 +12,6 @@ import { Command, Argument, Option  } from 'commander';
  */
 import * as env from '../commands/index.js';
 import {
-	wpPrimary,
-	wpGreen,
-	wpYellow,
-	wpRed,
 	withSpinner,
 	projectPath,
 } from './index.js';
@@ -55,9 +49,7 @@ function addWPEnvCommands(){
 	// Start command.
 	program.command('start')
 		.description(
-			wpGreen(
-				chalk`Starts two CAWebPublishing WordPress instances\ndevelopment on port ${ terminalLink( '8888', 'http://localhost:8888' ) } (override with WP_ENV_PORT)\ntests on port {bold.underline ${ terminalLink( '8889', 'http://localhost:8889' ) }} (override with WP_ENV_TESTS_PORT).\nAfter first install, use the '--update' flag to download updates to mapped sources and to re-apply CAWeb configuration options.`
-			)
+			`Starts two CAWebPublishing WordPress instances\ndevelopment on port http://localhost:8888 (override with WP_ENV_PORT)\ntests on port http://localhost:8889 (override with WP_ENV_TESTS_PORT).`
 		)
 		.option( 
 			'--update',
@@ -104,9 +96,7 @@ function addWPEnvCommands(){
 	// Destroy Command.
 	program.command('destroy')
 		.description(
-			wpRed(
-				'Deletes docker containers, volumes, and networks associated with the CAWebPublishing instances and removes local files.'
-			)
+			'Deletes docker containers, volumes, and networks associated with the CAWebPublishing instances and removes local files.'
 		)
 		.option( 
 			'--scripts', 
@@ -119,9 +109,7 @@ function addWPEnvCommands(){
 	// Stop Command.
 	program.command('stop')
 		.description(
-			wpRed(
-				'Stops running WordPress for development and tests and frees the ports.'
-			)
+			'Stops running WordPress for development and tests and frees the ports.'
 		)
 		.allowUnknownOption(true)
 		.action( withSpinner(env.stop) )
@@ -135,7 +123,7 @@ function addWPEnvCommands(){
 	// Clean Command.
 	program.command('clean')
 		.description(
-			wpYellow( 'Cleans the WordPress databases.' )
+			'Cleans the WordPress databases.'
 		)
 		.addArgument(envArg)
 		.option( 
@@ -190,15 +178,10 @@ export default function cli() {
 
 
 	program
-		.name(wpPrimary( 'caweb'))
-		.usage( wpYellow( '<command>' ) )
+		.name('caweb')
+		.usage( '<command>' )
 		.description('Command Line Interface utilized by CAWebPublishing to accomplish several tasks.')
 		.version( pkg.version )
-		.option(
-			'--debug',
-			'Enable debug output.',
-			false
-		)
 		.allowUnknownOption(true)
 		.configureHelp({ 
 			sortSubcommands: true,
@@ -212,34 +195,78 @@ export default function cli() {
 	program.command('build')
 		.description('Builds the current project.')
 		.allowUnknownOption(true)
-		.action(withSpinner(env.webpack))
+		.action(env.webpack)
 			
 		
 	// Serve Command.
 	program.command('serve')
-	.description('Serve the current project')
-		.option(
-			'--audit',
-			'Add CSS-Audit Page to pages served.',
-			false
-		)
+		.description('Serve the current project')
+		.option( '--audit', 'Performs WordPress CSS-Audit.', true )
+		.option( '--no-audit', 'Skips WordPress CSS-Audit.', false )
+		.option( '--a11y', 'Performs IBM Accessibility Checker.', true )
+		.option( '--no-a11y', 'Skips IBM Accessibility Checker.', false )
 		.allowUnknownOption(true)
-		.action(withSpinner(env.webpack))
+		//.action(withSpinner(env.webpack))
+		.action(env.webpack)
 
 	// a11y Command.
 	program.command('a11y')
-		.addArgument(new Argument('<url>', 'URL to scan for accessibility checks.'))
 		.description('Runs accessibility checks.')
+		.addArgument(new Argument('<url>', 'URL to scan for accessibility checks.'))
+		.option( '--rule-archive <rule>', 'Specify the rule archive.', 'latest')
+		.option( '--policies <policy...>', 'Specify one or many policies to scan.', ['WCAG_2_1'])
+		.option( '--fail-levels <levels...>', 'Specify one or many violation levels on which to fail the test.', [
+			'violation',
+			'potentialviolation'
+		])
+		.option( '--report-levels <levels...>', 'Specify one or many violation levels that should be reported.', [
+			'violation', 
+			'potentialviolation',
+			'recommendation',
+			'potentialrecommendation',
+			'manual',
+			'pass'
+		])
+		.option( '--labels <label...>', 'Specify labels that you would like associated to your scan.', [])
+		.option( '--output-format <format>', 'In which formats should the results be output.', ['html'])
+		.option( '--output-filename <name>', 'Filename for the scan results.')
+		.option( '--output-folder <folder>', 'Where the scan results should be saved.', 'a11y')
+		.option( '--output-filename-timestamp', 'Should the timestamp be included in the filename of the reports?', false)
 		.allowUnknownOption(true)
-		.action(withSpinner(env.a11y))
+		.action(env.a11y)
 
 		
 	// audit Command.
 	program.command('audit')
-		.addArgument(new Argument('[files...]', 'Files or directory path to CSS files.').default('build'))
 		.description('Runs WordPress CSS Audit tool against projects.')
+		.addArgument(new Argument('[files...]', 'Files or directory path to CSS files.').default(['./build']))
+		.option('--format [format]', 'Format to use for displaying report.', 'html' )
+		.option('--filename [name]', 'If using a format that outputs to a file, specify the file name.', 'css-audit' )
+		.option('--colors', 'Runs colors audit.', true )
+		.addOption(new Option('--no-colors', 'Skips colors audit.', false ).hideHelp())
+		.option('--important', 'Runs !important audit.', true )
+		.addOption(new Option('--no-important', 'Skips !important audit.', false ).hideHelp())
+		.option('--display-none', 'Runs display: none audit.', true )
+		.addOption(new Option('--no-display-none', 'Skips display: none audit.', false ).hideHelp())
+		.option('--selectors', 'Runs selectors audit.', true )
+		.addOption(new Option('--no-selectors', 'Skips selectors audit.', false ).hideHelp())
+		.option('--media-queries', 'Runs media queries audit.', true )
+		.addOption(new Option('--no-media-queries', 'Skips media queries audit.', false ).hideHelp())
+		.option('--typography', 'Runs typography audit.', true )
+		.addOption(new Option('--no-typography', 'Skips typography audit.', false ).hideHelp())
+		.option('--property-values <values...>', 'Runs property value audit.', ['font-size', 'padding,padding-top,padding-bottom,padding-right,padding-left', 'margin,margin-top,marin-bottom,marin-right,marin-left'] )
+		.addOption(new Option('--no-property-values', 'Skips property values audit.', false ).hideHelp())
+		.allowUnknownOption(true)
+		.action(env.audit)
+
+	// JSHint Command.
+	program.command('jshint')
+		.description('Runs JSHint tool against projects.')
+		.addArgument(new Argument('[files...]', 'Files or directory path to JS files.').default(['./src']))
+		.option( '--output-filename <name>', 'Filename for the scan results.')
+		.option( '--output-folder <folder>', 'Where the hint results should be saved.')
 		.allowUnknownOption(true)
-		.action(withSpinner(env.audit))
+		.action(env.hint)
 
 	// Update Plugins Command.
 	program.command('update-plugins')
@@ -266,9 +293,9 @@ export default function cli() {
 		
 	// Update a Design System Block Command.
 	program.command('sync')
-		.description('Sync changes from one destination to another.')
-		.argument('<from>', 'Target Site URL with current changes.')
-		.argument('<to>', 'Destination Site URL that should be synced.')
+		.description('Sync changes from one WordPress instance to another.')
+		.argument('<from>', 'Target Site URL.')
+		.argument('<to>', 'Destination Site URL.')
 		.addOption(new Option(
 			'-t,--tax [tax...]',
 			'Taxonomy that should be synced. Omitting this option will sync the full site.'

package/lib/helpers.js

@@ -52,7 +52,6 @@ async function runCmd(cmd, args,opts = { stdio: ['inherit', 'pipe'] }){
 	}
 
 	return spawn.sync( cmd, args, {...opts, env: process.env});
-
 }
 
 /**

package/lib/webpack/plugins/a11y/aceconfig.js

@@ -0,0 +1,44 @@
+/**
+ * Configuration for Accessibility Checker
+ * @link https://www.npmjs.com/package/accessibility-checker
+ */
+
+let levels = [
+    'violation', 
+    'potentialviolation',
+    'recommendation',
+    'potentialrecommendation',
+    'manual',
+    'pass'
+];
+let reportLevels = levels;
+let failLevels = levels;
+
+// process args
+process.argv.forEach((arg) => {
+    // remove any report levels
+    if( arg.includes('--no-report-levels-') ){  
+      let r = arg.replace('--no-report-levels-', '')
+      delete reportLevels[reportLevels.indexOf(r)]
+    }
+    // remove any fails levels
+    if( arg.includes('--no-fail-levels-') ){  
+      let f = arg.replace('--no-fail-levels-', '')
+      delete failLevels[failLevels.indexOf(f)]
+    }
+  })
+
+export default {
+    ruleArchive: "latest",
+    policies: [
+        'WCAG_2_1'
+    ],
+    failLevels: failLevels.filter(e=>e),
+    reportLevels: reportLevels.filter(e=>e),
+    outputFilename: 'a11y',
+    outputFolder: "public",
+    outputFormat: [
+        'html'
+    ],
+    outputFilenameTimestamp: false
+}

package/lib/webpack/plugins/a11y/index.js

@@ -0,0 +1,272 @@
+#!/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 { isUrl, isValidUrl } from 'check-valid-url';
+import fs from 'fs';
+import deepmerge from 'deepmerge';
+import chalk from 'chalk';
+import { fileURLToPath, URL } from 'url';
+
+// default configuration
+import {default as DefaultConfig} from './aceconfig.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));
+
+// IBM Accessibility Checker Plugin
+class A11yPlugin {
+    config = {}
+
+    constructor(opts = {}) {
+      // outputFolder must be resolved
+      if( opts.outputFolder ){
+        opts.outputFolder = path.join(process.cwd(), opts.outputFolder);
+      }
+      this.config = deepmerge(
+        DefaultConfig, 
+        {
+          outputFolder: path.join(currentPath, DefaultConfig.outputFolder)
+        },
+        opts
+      );
+    }
+
+    apply(compiler) {
+      const staticDir = {
+        directory: this.config.outputFolder,
+        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 outputFilename.html to open property.
+      if( Array.isArray(devServer.open) ){
+        devServer.open.push(`${hostUrl}/${this.config.outputFilename}.html`)
+      }else if( 'object' === typeof devServer.open && Array.isArray(devServer.open.target) ){
+        devServer.open.target.push(`${hostUrl}/${this.config.outputFilename}.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('IBM Accessibility Plugin', () => {
+        compiler.hooks.compilation.tap(
+          "IBM Accessibility Plugin",
+          (compilation, { normalModuleFactory }) => {
+            compilation.dependencyFactories.set(
+              EntryDependency,
+              normalModuleFactory
+            );
+          }
+        );
+
+        const { entry, options, context } = {
+          entry: path.join( this.config.outputFolder, 'a11y.update.js'),
+          options: {
+            name: 'a11y'
+          },
+          context: 'a11y'
+        };
+
+        const dep = new EntryDependency(entry);
+        dep.loc = {
+          name: options.name
+        };
+        if( ! fs.existsSync(path.resolve(this.config.outputFolder))){
+          fs.mkdirSync( path.resolve(this.config.outputFolder), {recursive: true} );
+        }
+        
+        fs.writeFileSync(
+          path.join(this.config.outputFolder, `a11y.update.js`),
+          `` // required for hot-update to compile on our page, blank script for now
+        );
+
+
+        compiler.hooks.thisCompilation.tap('IBM Accessibility Plugin',
+          /**
+           * Hook into the webpack compilation
+           * @param {Compilation} compilation
+           */
+          (compilation) => {
+            
+            compiler.hooks.make.tapAsync("IBM Accessibility Plugin", (compilation, callback) => {
+              
+              compilation.addEntry(
+              context,
+              dep, 
+              options, 
+              err => {
+                callback(err);
+              });
+            });
+
+            compiler.hooks.done.tapAsync(
+              'IBM Accessibility Plugin',
+              /**
+               * Hook into the process assets hook
+               * @param {any} _
+               * @param {(err?: Error) => void} callback
+               */
+              ({compilation}, callback) => {
+                  
+                console.log(`<i> ${boldGreen('[webpack-dev-middleware] Running IBM Accessibility scan...')}`);
+
+                this.a11yCheck(path.join(process.cwd(), output.publicPath ?? '/' ), this.config );
+
+                console.log(`<i> ${boldGreen('[webpack-dev-middleware] IBM Accessibilty Report can be viewed at')} ${ boldBlue(new URL(`${hostUrl}/${this.config.outputFilename}.html`).toString())  }`);
+
+                callback();
+            });
+
+            compiler.hooks.watchClose.tap( 'IBM Accessibility Plugin', () => {
+              getAllFilesSync(compiler.options.output.path).toArray().forEach(f => {
+                if( 
+                  f.includes('a11y') || // delete any a11y files
+                  f.includes('.hot-update.js') // delete any HMR files
+                ){
+                  fs.rmSync(f)
+                }
+              })
+            });
+            
+        });
+
+    });
+    
+    }
+
+    /**
+     * Run accessibility checks
+     * 
+     * @param {Object}  options
+     * @param {boolean} options.debug            True if debug mode is enabled.
+     * @param {boolean} options.ruleArchive   Specify the rule archive.
+     * @param {boolean} options.policies   Specify one or many policies to scan.
+     * @param {boolean} options.failLevels   Specify one or many violation levels on which to fail the test.
+     * @param {boolean} options.reportLevels   Specify one or many violation levels that should be reported.
+     * @param {boolean} options.labels   Specify labels that you would like associated to your scan.
+     * @param {boolean} options.outputFormat   In which formats should the results be output.
+     * @param {boolean} options.outputFilename   Filename for the scan results.
+     * @param {boolean} options.outputFolder   Where the scan results should be saved.
+     * @param {boolean} options.outputFilenameTimestamp   Should the timestamp be included in the filename of the reports?
+     */
+    a11yCheck(url, {
+      debug, 
+      ruleArchive,
+      policies,
+      failLevels,
+      reportLevels,
+      labels,
+      outputFormat,
+      outputFilename, 
+      outputFolder,
+      outputFilenameTimestamp
+    }){
+
+      let acheckerArgs = [
+        '--ruleArchive',
+        ruleArchive,
+        '--policies',
+        Array.isArray(policies) ? policies.filter(e => e).join(',') : policies,
+        '--failLevels',
+        Array.isArray(failLevels) ? failLevels.filter(e => e).join(',') : failLevels,
+        '--reportLevels',
+        Array.isArray(reportLevels) ? reportLevels.filter(e => e).join(',') : reportLevels,
+        '--outputFolder',
+        outputFolder,
+        '--outputFormat',
+        outputFormat,
+        '---outputFilenameTimestamp',
+        outputFilenameTimestamp,
+        url
+      ];
+    
+      let isValid = false;
+
+      if( fs.existsSync( url ) ){
+          if( fs.statSync(url).isDirectory() &&  path.join( url, 'index.html') ){
+              url = path.join( url, 'index.html')
+          }
+          isValid = true;
+      }else{
+          isValid = 'localhost' === new URL(url).hostname || isUrl( url )
+      }
+
+      if( isValid ){
+        let originalFileName =  `${fs.existsSync( url ) ?
+          path.resolve(url).replace(':', '_') :
+          url.replace(/http[s]+:\/\//, '')}.html`;
+        let originalJsonFileName =  `${fs.existsSync( url ) ?
+            path.resolve(url).replace(':', '_') :
+            url.replace(/http[s]+:\/\//, '')}.json`;
+
+        let outputDir = path.resolve('.',  outputFolder );
+
+        let {stderr, stdout}  = spawn.sync( 
+          resolveBin('accessibility-checker', {executable: 'achecker'}),
+          acheckerArgs,
+          {
+            stdio: 'pipe',
+            timeout: 30000 // stop after 30 seconds
+          }
+        )
+
+        if( stderr && stderr.toString() ){
+            console.log( stderr.toString() );
+        }
+        
+        if( stdout && stdout.toString()){
+          let reportedFile =  path.join(outputDir, originalFileName );
+          let reportedJSon =  path.join(outputDir, originalJsonFileName );
+
+          // if output file name option was passed
+          if( outputFilename ){
+
+              reportedFile =  path.join( outputDir, `${outputFilename}.html` );
+              reportedJSon =  path.join( outputDir, `${outputFilename}.json` );
+
+              // rename the output files
+              fs.renameSync(path.join(outputDir, originalFileName), reportedFile );
+              fs.renameSync(path.join(outputDir, originalJsonFileName), reportedJSon );
+
+              // delete any empty directories.
+              fs.rmSync( path.join(outputDir, originalFileName.split(path.sep).shift()), {recursive: true} )
+          }
+
+          if( 'a11y' === process.argv[2] ){
+              console.log( reportedFile )
+          }else{
+              return reportedFile;
+          }
+        }
+      }else{
+        console.log( `${url} is not a valid url.` )
+      }
+
+    } // end of a11yCheck
+
+} // end of class
+  
+
+export default A11yPlugin;

package/lib/webpack/plugins/a11y/package.json

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

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

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

package/lib/webpack/plugins/css-audit/default.config.js

@@ -0,0 +1,19 @@
+/**
+ * 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',
+      ]
+};