@caweb/cli 1.4.3 → 1.4.5

package/README.md

@@ -18,209 +18,5 @@
   - phpMyAdmin test site started at http://localhost:9090
 - Uses CAWebPublishing [External Project Template Configuration](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/packages-create-block-external-template/) when creating Gutenberg Blocks, see configurations [here](https://github.com/CAWebPublishing/cli/lib/template)
 - Allows for syncing of WordPress instance via Rest API, to maintain ID's please ensure [CAWebPublishing Development Toolbox](https://github.com/CAWebPublishing/caweb-dev/) plugin is installed. 
-- Adds config.yml to both cli containers.  
-<b>Example config.yml file</b>
-<pre>
-    path: /var/www/html
-    apache_modules:
-      - mod_rewrite
-</pre>
-
-
-## Command Reference
-### `caweb start`  
-Generates the required wp-env.json, starts the WordPress environment, downloads any CAWebPublishing sources and approved plugins.  
-<pre>
-Usage: caweb start [options]
-
-Starts two CAWebPublishing WordPress instances
-development on port 8888 (​http://localhost:8888​) (override with WP_ENV_PORT)
-tests on port 8889 (​http://localhost:8889​) (override with WP_ENV_TESTS_PORT).
-After first install, use the '--update' flag to download updates to mapped sources and to re-apply CAWeb configuration options.
-
-Options:
-  --bare           True if excluding any downloads from CAWeb, use this if you want to use a local version of the CAWeb Theme, Configurations will still be applied. (default: false)
-  -h, --help       display help for command
-  -m, --multisite  True if converting to multisite. (default: false)
-  -p, --plugin     True if root directory is a plugin. (default: false)
-  --scripts        Execute any configured lifecycle scripts. (default: true)
-  --subdomain      If passed, the network will use subdomains, instead of subdirectories. Doesn't work with 'localhost', make sure to set Port to 80. (default: false)
-  -t, --theme      True if root directory is a theme. (default: false)
-  --update         Download source updates and apply WordPress configuration. (default: false)
-  --xdebug <mode>  Enables Xdebug. If not passed, Xdebug is turned off. If no modes are set, uses "debug". You may set multiple Xdebug modes by passing them in a comma-separated list:
-                   `--xdebug=develop,coverage`. See https://xdebug.org/docs/all_settings#mode for information about Xdebug modes.
-</pre>
-### `caweb stop`  
-<pre>
-Usage: caweb stop
-
-Stops running WordPress for development and tests and frees the ports.
-
-Options:
-  --debug    Enable debug output.                     [boolean] [default: false]
-</pre>
-### `caweb clean [environment]`  
-<pre>
-Usage: caweb clean [environment]
-
-Cleans the WordPress databases.
-
-Positionals:
-  environment  Which environments' databases to clean.
-            [string] [choices: "all", "development", "tests"] [default: "tests"]
-
-Options:
-  --debug    Enable debug output.                     [boolean] [default: false]
-  --scripts  Execute any configured lifecycle scripts. [boolean] [default: true]
-</pre>
-### `caweb run <container> [command...]`  
-<pre>
-Usage: caweb run &lt;container&gt; [command...]
-
-Runs an arbitrary command in one of the underlying Docker containers. A double
-dash can be used to pass arguments to the container without parsing them. This
-is necessary if you are using an option that is defined below. You can use
-`bash` to open a shell session and both `composer` and `phpunit` are available
-in all WordPress and CLI containers. WP-CLI is also available in the CLI
-containers.
-
-Positionals:
-  container  The underlying Docker service to run the command on.
-              [string] [required] [choices: "mysql", "tests-mysql", "wordpress",
-                                          "tests-wordpress", "cli", "tests-cli"]
-  command    The command to run.                           [array] [default: []]
-
-Options:
-  --debug    Enable debug output.                     [boolean] [default: false]
-  --env-cwd  The command's working directory inside of the container. Paths
-             without a leading slash are relative to the WordPress root.
-                                                         [string] [default: "."]
-</pre>
-### `caweb destroy`  
-<pre>
-Usage: caweb destroy
-
-Destroy the WordPress environment. Deletes docker containers, volumes, and
-networks associated with the WordPress environment and removes local files.
-
-Options:
-  --debug    Enable debug output.                     [boolean] [default: false]
-  --scripts  Execute any configured lifecycle scripts. [boolean] [default: true]
-</pre>
-### `caweb logs [environment]`  
-<pre>
-Usage: caweb logs [environment]
-
-displays PHP and Docker logs for given WordPress environment.
-
-Positionals:
-  environment  Which environment to display the logs from.
-      [string] [choices: "development", "tests", "all"] [default: "development"]
-
-Options:
-  --debug    Enable debug output.                     [boolean] [default: false]
-  --watch    Watch for logs as they happen.            [boolean] [default: true]
-</pre>
-### `caweb install-path`  
-<pre>
-Usage: caweb install-path
-
-Get the path where all of the environment files are stored. This includes the
-Docker files, WordPress, PHPUnit files, and any sources that were downloaded.
-
-Options:
-  --debug    Enable debug output.                     [boolean] [default: false]
-</pre>
-### `caweb shell [environment]`  
-<pre>
-Usage: caweb shell [environment]
-
-Open shell terminal in WordPress environment.
-
-Positionals:
-  environment  Which environment to open terminal in.
-             [string] [choices: "development", "tests"] [default: "development"]
-
-Options:
-  --debug    Enable debug output.                     [boolean] [default: false]
-</pre>
-### `caweb update-plugins [environment]`  
-<pre>
-Usage: caweb update-plugins [environment]
-
-Updates all plugins in the WordPress environment.
-
-Positionals:
-  environment  Which environment to update.
-             [string] [choices: "development", "tests"] [default: "development"]
-
-Options:
-  --debug    Enable debug output.                     [boolean] [default: false]
-</pre>
-
-### `caweb create-block [options] <slug>`  
-<pre>
-Usage: caweb create-block [options] &lt;slug&gt;
-
-Scaffold for WordPress plugin to register CA.gov Design System Block.
-
-Arguments:
-  slug           Plugin slug to use.
-
-Options:
-  -h, --help     display help for command
-</pre>
-### `caweb update-block [options] <slug>`  
-<pre>
-Usage: caweb update-block [options] &lt;slug&gt;
-
-Updates a CA.gov Design System Block.
-
-Arguments:
-  slug           Plugin slug to update.
-
-Options:
-  -h, --help     display help for command
-</pre>
-### `caweb sync <from> <to>`  
-In order for the sync process to work correctly, you must have a caweb.json file in the project root directory. For more information read [caweb.json](./docs/SYNC.MD) configuration.
-<pre>
-Usage: caweb sync &lt;from&gt; &lt;to&gt;
-
-Sync changes from one destination to another.
-
-Arguments:
-  from               Target Site URL with current changes.
-  to                 Destination Site URL that should be synced.
-
-Options:
-  -h, --help         display help for command
-  -i, --include [include...]     IDs to of taxonomies to include. Omitting this option will sync all items for given taxonomy.
-  -t, --tax [tax...]  Taxonomy that should be synced. Omitting this option will sync the full site. (choices: "pages", "posts", "media", "menus")
-</pre>
-### `caweb a11y <url>`  
-Runs accessibility checks.
-<pre>
-Usage: caweb a11y url
-
-Runs accessibility checks.
-
-Arguments:
-  url               URL or local file to scan for accessibility checks.
-
-Options:
-  -h, --help         display help for command
-</pre>
-### `caweb a11y <url>`  
-Runs WordPress CSS Audit tool against projects.
-<pre>
-Usage: caweb audit [options] [files...]
-
-Runs WordPress CSS Audit tool against projects.
-
-Arguments:
-  files          Files or directory path to CSS files. (default: "build")
-
-Options:
-  -h, --help         display help for command
-</pre>
+- Allows for generation of  WordPress CSS Audits 
+- Allows for IBM Accessibility Scan reports.

package/commands/index.js

@@ -14,9 +14,15 @@ import installPath from '@wordpress/env/lib/commands/install-path.js';
  */
 import webpack from './webpack/webpack.js';
 
-import a11y from './a11y.js';
 
-import audit from './audit.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';
 
@@ -46,6 +52,7 @@ export {
     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

@@ -4,8 +4,10 @@
  * External dependencies
  */
 import path from 'path';
-import fs from 'fs';
+import fs, { watch } from 'fs';
 import deepmerge from 'deepmerge';
+import Webpack from 'webpack';
+import webpackServer from 'webpack-dev-server';
 
 /**
  * Internal dependencies
@@ -13,28 +15,27 @@ import deepmerge from 'deepmerge';
 import { 
     runCmd, 
     projectPath,
-    appPath
+    appPath,
+    wpPrimary,
+    wpGreen,
+    wpRed
 } 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,
+    spinner,
 	debug, 
-    audit
+    audit,
+    a11y,
+    selectors
 } ) {
-
-    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' );
@@ -61,7 +62,7 @@ export default async function webpack({
             '--merge'
         )
 
-        customConfig = await import('file://' + path.join(appPath, 'webpack.config.cjs' ));
+        customConfig = await import('file://' + path.join(appPath, 'webpack.config.cjs' )).default;
 
     // ESM
     }else if( fs.existsSync(path.join(appPath, 'webpack.config.js' )) ){
@@ -77,16 +78,18 @@ export default async function webpack({
     if( customConfig.length ){
         webpackConfig = deepmerge(webpackConfig.default, customConfig.default);
     }
-
+    
     // we always run the build command.
     let result = await runCmd(
 		'webpack', 
-		['build', ...webPackArgs]
+		['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.*/, '') )
+            //console.log( stderr.toString().replace(/.*`punycode`.*\n.*/, '') )
         }
         
         if(stdout){
@@ -97,21 +100,46 @@ export default async function webpack({
 
     // if serving.
     if( 'serve' === webpackCommand ){
-        webPackArgs.push(
-            '--open',
-        )
+        let hostUrl = 'localhost' === webpackConfig.default.devServer.host ? `http://${webpackConfig.default.devServer.host}`: webpackConfig.default.devServer.host;
+        let hostPort = webpackConfig.default.devServer.port;
 
-        // run css-auditor
-        if( audit ){
-            await auditor({ spinner, debug });
+        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();
 
-        console.log( "Webpack Server is preparing to launch...\nPress Ctrl + C to shutdown the server.");
+        //process.stdin.resume();
 
         // run webpack serve command
-        await runCmd(
+        /*await runCmd(
             'webpack', 
-            ['serve', ...webPackArgs]
+            ['serve', ...webPackArgs],
+            {
+                stdio: 'inherit'
+            }
         ).then(({stdout, stderr}) => {
             // if an error was thrown, and no output
             if( stderr && ! stdout){
@@ -122,12 +150,17 @@ export default async function webpack({
                 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!";
+        //spinner.prefixText = result;
+        //spinner.text = "Done!";
     }
 
 };

package/configs/webpack.config.js

@@ -15,7 +15,9 @@ import fs from 'fs';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import {HtmlWebpackSkipAssetsPlugin} from 'html-webpack-skip-assets-plugin';
 
-import MiniCssExtractPlugin from "mini-css-extract-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
@@ -25,11 +27,11 @@ import {
   appPath
 } from '../lib/index.js';
 
+
 const samplePath = path.join( appPath, 'sample');
 const srcPath = path.join( appPath, 'src');
 const dataPath = path.join( srcPath, 'data');
 
-import SiteGenerator from '../gen/site-generator.js';
 
 // Update some of the default WordPress webpack rules.
 baseConfig.module.rules.forEach((rule, i) => {
@@ -38,17 +40,17 @@ baseConfig.module.rules.forEach((rule, i) => {
   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]';
+      rule.generator.filename = 'images/[name][ext]';
       break;
     case new RegExp(/\.(woff|woff2|eot|ttf|otf)$/i).toString():
-      rule.generator.filename = 'fonts/[name].[ext]';
+      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]' };
+        rule.generator = { filename: 'fonts/[name][ext]' };
 
         delete rule.issuer;
       }
@@ -63,7 +65,7 @@ let webpackConfig = {
   cache: false,
   output: {
     ...baseConfig.output,
-    publicPath: `/`,
+    publicPath: `/public`,
     clean: true
   },
   performance: {
@@ -102,7 +104,12 @@ if( 'serve' === process.argv[2] ){
     templateParameters: {
       "title" : path.basename(appPath)
     },
-    skipAssets: ['**/index-rtl.css']
+    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.
@@ -119,7 +126,23 @@ if( 'serve' === process.argv[2] ){
 
   webpackConfig.plugins.push(
     new HtmlWebpackPlugin(sample),
-    new HtmlWebpackSkipAssetsPlugin()
+    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 = {
@@ -129,6 +152,8 @@ if( 'serve' === process.argv[2] ){
     headers: {
     },
     hot: true,
+    open: ['http://localhost:9000'],
+    //client: 'verbose',
     allowedHosts: 'auto',
     host: 'localhost',
     port: 9000,
@@ -138,7 +163,7 @@ if( 'serve' === process.argv[2] ){
         directory: path.join( appPath, 'build'),
       },
       {
-        directory: path.join(appPath, 'public'),
+        directory: path.join(appPath, 'public')
       },
       {
         directory: path.join(appPath, 'node_modules'),
@@ -146,9 +171,6 @@ if( 'serve' === process.argv[2] ){
       {
         directory: path.join(appPath, 'src'),
       },
-      {
-        directory: path.join(projectPath, 'bin', 'css-audit', 'public'),
-      }
     ],
     proxy: [
       {