@caweb/cli 1.4.2 → 1.4.4

package/configs/webpack.config.js

@@ -10,113 +10,183 @@
  * External dependencies
  */
 import baseConfig from '@wordpress/scripts/config/webpack.config.js';
-import MiniCssExtractPlugin from "mini-css-extract-plugin";
+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 SiteGenerator from '../gen/site-generator.js';
-
-// fallback to env variable
-let isProduction = "production" === process.env.NODE_ENV;
-
-// because we use WordPress default WebPack config 
-// 'mode' is defined by process.env.NODE_ENV
-// some of the webpack cli flags are ignored
-// so let's make some corrections.
-let corrections = {};
-
-process.argv.splice( 2 ).forEach(element => {
-    // if flag
-    if( element.startsWith( '--' ) ){
-      let splitterIndex = element.indexOf( '=' );
-      let flag = element.substring(2, splitterIndex );
-      let value = element.substring( splitterIndex + 1 );
-
-      // if flag is a webpack flag add corrections.
-      switch( flag ){
-        case 'mode':
-          // if cli arg was passed use that value
-          isProduction = "production" === value;
-
-          corrections[flag] = value
-          break
-      }
-      
-    }
-   
-});
+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 the WordPress default webpack rules with ours.
+
+// Update some of the default WordPress webpack rules.
 baseConfig.module.rules.forEach((rule, i) => {
   const r = new RegExp(rule.test).toString();
 
-  // WordPress adds a hash to asset file names we remove that hash
-  if( r === new RegExp(/\.(bmp|png|jpe?g|gif|webp)$/i).toString() ){
-    baseConfig.module.rules[i].generator = {
-      filename: 'images/[name][ext]'
-    }
-  }
-  if( r  === new RegExp(/\.(woff|woff2|eot|ttf|otf)$/i).toString() ){
-    baseConfig.module.rules[i].generator = {
-      filename: 'fonts/[name][ext]'
-    }
-  }
-  // SVG rules
-  if( r  === new RegExp(/\.svg$/).toString()  ){
-        // we don't want SVG to be inline move them to fonts folder
-        if( 'asset/inline' === rule.type ){
-          baseConfig.module.rules[i].type = 'asset/resource';
-          baseConfig.module.rules[i].generator = {
-            filename: 'fonts/[name][ext]'
-          };
-
-          // we don't care who the issuer is
-          delete baseConfig.module.rules[i].issuer;
-
-        }
+  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',
-  devtool: false,
+  cache: false,
   output: {
     ...baseConfig.output,
-    publicPath: `/`,
+    publicPath: `/public`,
     clean: true
   },
-  plugins: [
-    ...baseConfig.plugins,
-    new MiniCssExtractPlugin(
-      {
-        linkType: "text/css",
-        filename: '[name].css'
-      }
-    )
-  ],
-  module: {
-    rules: [
-      ...baseConfig.module.rules,
-      /*{
-        test: /\.html$/,
-        loader:'handlebars-loader'
-      }*/
-    ]
-  },
   performance: {
     maxAssetSize: 500000,
     maxEntrypointSize: 500000
   }
 };
 
-if( process.env.CAWEB_SERVE ){
-  delete webpackConfig.devServer;
+// 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': '' },
+      }
+    ],
+  }
+
 
-  SiteGenerator( webpackConfig );
 }
 
 export default webpackConfig;

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,25 +195,78 @@ export default function cli() {
 	program.command('build')
 		.description('Builds the current project.')
 		.allowUnknownOption(true)
-		.action(withSpinner(env.build))
+		.action(env.webpack)
 			
 		
 	// Serve Command.
 	program.command('serve')
-	.description('Serve the current project')
-		.option(
-			'--no-template',
-			'Disables inclusion of the template page header & footer, starting off with a plain html page.'
-		)
+		.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.serve))
+		//.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(env.a11y)
+
+		
+	// audit Command.
+	program.command('audit')
+		.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.a11y))
+		.action(env.hint)
 
 	// Update Plugins Command.
 	program.command('update-plugins')
@@ -257,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

@@ -40,6 +40,9 @@ async function runCmd(cmd, args,opts = { stdio: ['inherit', 'pipe'] }){
 			 */
 			cmd += /^win/.test(process.platform) ? '.cmd' : '';
 			break;
+		case 'auditor':
+			cmd = 'node ' + resolveBin('@caweb/cli', {executable: 'auditor'} )
+			break;	
 		case 'achecker':
 			cmd = resolveBin('accessibility-checker', {executable: 'achecker'})
 			break;	
@@ -49,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
+}