@caweb/cli 1.4.1 → 1.4.3

package/configs/webpack.config.js

@@ -10,113 +10,161 @@
  * 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 MiniCssExtractPlugin from "mini-css-extract-plugin";
 
 /**
  * Internal dependencies
  */
-import SiteGenerator from '../gen/site-generator.js';
+import {
+  projectPath,
+  appPath
+} from '../lib/index.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
-      }
-      
-    }
-   
-});
+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 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: `/`,
     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']
+  }
+
+  // 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()
+  );
+
+  webpackConfig.devServer = {
+    devMiddleware: {
+      writeToDisk: true
+    },
+    headers: {
+    },
+    hot: true,
+    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'),
+      },
+      {
+        directory: path.join(projectPath, 'bin', 'css-audit', 'public'),
+      }
+    ],
+    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/docs/CREDITS.MD

@@ -25,3 +25,8 @@
 
 ### <ins>phpMyAdmin</ins> 
 [Docker](https://hub.docker.com/_/phpmyadmin)
+
+### <ins>css-audit</ins>
+[Documentation](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/)  
+[Documentation](https://make.wordpress.org/core/2021/05/17/introducing-the-wordpress-css-audit-tool/)  
+[Github](https://github.com/wordpress/css-audit)   

package/docs/ROADMAP.MD

@@ -1,4 +1,10 @@
 # Roadmap Features:
+## Validation with:
+
+- SNYK  
+    https://www.npmjs.com/package/snyk
+- CSS-Audit  
+    https://github.com/wordpress/css-audit
 
 ## Testaro
 https://www.npmjs.com/package/testaro  
@@ -9,11 +15,6 @@ https://www.npmjs.com/package/sonarqube-scanner
 ## BrowserStack
 https://www.npmjs.com/package/browserstack
 
-## Accessibility Checker
-https://www.npmjs.com/package/accessibility-checker
-
 ## Control Panel
 https://aapanel.com/new/download.html
 
-## SNYK
-https://www.npmjs.com/package/snyk

package/lib/cli.js

@@ -212,18 +212,19 @@ export default function cli() {
 	program.command('build')
 		.description('Builds the current project.')
 		.allowUnknownOption(true)
-		.action(withSpinner(env.build))
+		.action(withSpinner(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.'
+			'--audit',
+			'Add CSS-Audit Page to pages served.',
+			false
 		)
 		.allowUnknownOption(true)
-		.action(withSpinner(env.serve))
+		.action(withSpinner(env.webpack))
 
 	// a11y Command.
 	program.command('a11y')
@@ -232,6 +233,14 @@ export default function cli() {
 		.allowUnknownOption(true)
 		.action(withSpinner(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.')
+		.allowUnknownOption(true)
+		.action(withSpinner(env.audit))
+
 	// Update Plugins Command.
 	program.command('update-plugins')
 		.description('Updates all plugins in the WordPress environment.')

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;	

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caweb/cli",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "CAWebPublishing Command Line Interface.",
   "exports": "./lib/env.js",
   "type": "module",
@@ -9,7 +9,8 @@
   "author": "CAWebPublishing",
   "license": "ISC",
   "bin": {
-    "caweb": "bin/caweb.js"
+    "caweb": "bin/caweb.js",
+    "auditor": "bin/css-audit/index.js"
   },
   "files": [
     "assets",
@@ -23,7 +24,8 @@
   ],
   "scripts": {
     "doc": "node ./docs/tool/index.js",
-    "test": "echo \"Error: run tests from root\" && exit 0"
+    "test": "echo \"Error: run tests from root\" && exit 0",
+    "postinstall": "cd bin/css-audit && npm ci"
   },
   "homepage": "https://github.com/CAWebPublishing/cli#readme",
   "repository": {
@@ -41,7 +43,7 @@
     "access": "public"
   },
   "config": {
-    "WP_VER": "6.5.4",
+    "WP_VER": "6.5.5",
     "PHP_VER": "8.1",
     "DEFAULTS": {
       "FS_METHOD": "direct",
@@ -59,29 +61,34 @@
     }
   },
   "dependencies": {
-    "@wordpress/create-block": "^4.44.0",
-    "@wordpress/env": "^10.1.0",
-    "@wordpress/scripts": "^28.1.0",
+    "@wordpress/create-block": "^4.45.0",
+    "@wordpress/env": "^10.2.0",
+    "@wordpress/scripts": "^28.2.0",
     "accessibility-checker": "^3.1.73",
     "autoprefixer": "^10.4.19",
     "axios": "^1.7.2",
-    "axios-retry": "^4.4.0",
+    "axios-retry": "^4.4.1",
     "chalk": "^5.3.0",
     "check-valid-url": "^0.1.0",
     "commander": "^12.1.0",
     "cross-spawn": "^7.0.3",
+    "css-audit": "file:css-audit",
     "css-loader": "^7.1.2",
+    "deepmerge": "^4.3.1",
     "docker-compose": "^0.24.8",
     "fs-extra": "^11.2.0",
+    "get-all-files": "^5.0.0",
     "got": "^14.4.1",
     "handlebars-loader": "^1.7.3",
     "html-to-json-parser": "^2.0.1",
     "html-webpack-plugin": "^5.6.0",
+    "html-webpack-skip-assets-plugin": "^1.0.4",
     "mini-css-extract-plugin": "^2.9.0",
     "ora": "^8.0.1",
     "postcss-loader": "^8.1.1",
     "resolve-bin": "^1.0.1",
     "sass-loader": "^14.2.1",
+    "snyk": "^1.1292.1",
     "terminal-link": "^3.0.0",
     "url": "^0.11.3",
     "webpack": "^5.92.1"

package/commands/build.js

@@ -1,80 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * External dependencies
- */
-import path from 'path';
-import fs from 'fs';
-
-/**
- * Internal dependencies
- */
-import { 
-    runCmd, 
-    projectPath,
-    appPath
-} from '../lib/index.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.
- */
-export default async function build({
-	spinner,
-	debug, 
-} ) {
-
-    // Spinner not needed at the moment
-	spinner.stop()
-
-    // Since we use @wordpress/scripts webpack config we can leverage
-    // the environment variables as well.
-    process.env.WP_COPY_PHP_FILES_TO_DIST  = true;
-
-    // Our default Webpack Configuration 
-    const defaultConfig = path.join( projectPath, 'configs', 'webpack.config.js' );
-
-    // 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 = [
-        '--mode=none',
-        '--progress',
-        '--config',
-        defaultConfig
-    ];
-
-    // CommonJS
-    if( fs.existsSync( path.join(appPath, 'webpack.config.cjs' ))){
-        webPackArgs.push(
-            '--config',
-            path.join(appPath, 'webpack.config.cjs' ),
-            '--merge'
-        )
-    // ESM
-    }else if( fs.existsSync(path.join(appPath, 'webpack.config.js' )) ){
-        webPackArgs.push(
-            '--config',
-            path.join(appPath, 'webpack.config.js' ),
-            '--merge'
-        )
-    }
-
-    // run webpack with our arguments.
-    await runCmd(
-		'webpack', 
-		webPackArgs, 
-	).then(({stdout, stderr}) => {
-        // if an error was thrown, and no output
-        if( stderr && ! stdout.toString() ){
-            console.log( stderr.toString() )
-        }else{
-            spinner.text = 'Done'
-        }
-    });
-
-};

package/commands/serve.js

@@ -1,94 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * External dependencies
- */
-import path from 'path';
-import fs from 'fs';
-
-/**
- * Internal dependencies
- */
-import { 
-    projectPath,
-    appPath,
-    runCmd
- } from '../lib/index.js';
-
-import a11y from './a11y.js';
-
-/**
- * Serves 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.template   Disables inclusion of the template page header & footer, starting off with a plain html page.
- */
-export default async function serve({
-	spinner,
-	debug,
-	template,
-} ) {
-    spinner.stop();
-    
-    // Since we use @wordpress/scripts webpack config we can leverage
-    // the environment variables as well.
-    process.env.WP_COPY_PHP_FILES_TO_DIST  = true;
-
-
-    // This lets the parser know to include the template 
-    // Otherwise we load a blank html page
-    process.env.CDT_TEMPLATE = template;
-    
-    // Let our webpack config know it's serving not building
-    process.env.CAWEB_SERVE = true;
-
-   // Our default Webpack Configuration 
-   const defaultConfig = path.join( projectPath, 'configs', 'webpack.config.js' );
-
-   let webPackArgs = [
-      'serve',
-      '--open',
-      '--mode=none',
-      '--config',
-      defaultConfig
-    ];
-
-   // merge user configurations
-   // CommonJS
-   if( fs.existsSync(path.join( appPath, 'webpack.config.cjs' ))){
-       webPackArgs.push(
-           '--config',
-           path.join( appPath, 'webpack.config.cjs' ),
-           '--merge'
-       )
-   // ESM
-   }else if( fs.existsSync(path.join( appPath, 'webpack.config.js' )) ){
-       webPackArgs.push(
-           '--config',
-           path.join( appPath, 'webpack.config.js' ),
-           '--merge'
-       )
-   }
-
-    // run webpack with our configuration.
-    await runCmd(
-		  'webpack', 
-      webPackArgs
-    ).then(({stdout, stderr}) => {
-        // if an error was thrown, and no output
-        if( stderr && ! stdout.toString() ){
-            console.log( stderr.toString() )
-        }else{
-                    
-            // run a11y checker as well
-            //await a11y({spinner, debug, url: './public/index.html' })
-
-            //return;
-            spinner.text = 'Done'
-        }
-    });
-    
-
-};