wp-blank-scripts 3.0.0-beta.1 → 3.0.0-beta.5

package/README.md

@@ -2,7 +2,26 @@
 
 CLI and build tool for Wordpress projects.
 
-### Project Structure
+## Upgrade to v3
+
+Surprisingly there are no breaking changes.
+
+**v3 Warnings**
+
+#### Sass division outside of calc() deprecated
+
+Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
+Recommendation: math.div(-$grid-gutter, 2) or calc(-1 * $grid-gutter / 2). More info and automated migrator: https://sass-lang.com/d/slash-div
+
+Fix:
+
+```
+npm install -g sass-migrator
+sass-migrator division **/*.scss
+
+```
+
+## Project Structure
 
 ```
 /
@@ -290,21 +309,13 @@ exports.copyFiles = (paths) => {
     },
     {
       // Copy files inside a directory the the theme
-      from: path.join(sourceDir, 'new-directory', '**', '*'),
+      from: path.join(sourceDir, 'new-directory'),
       to: themePath,
-      transformPath(targetPath) {
-        // Need to fix the path
-        return targetPath.replace(path.join(sourceDir, 'new-directory'), '');
-      },
     },
     {
       // Copy file from a directory to the root directory
       from: path.join(sourceDir, 'directory-file-was-in', 'file.txt'),
       to: '',
-      transformPath(targetPath) {
-        // Need to fix the path again, otherwise it will stay in the directory
-        return targetPath.replace('directory-file-was-in', '');
-      },
     },
     {
       // Copy all files from vendor (except vivo-digital & johnpbloch) to the theme/inc/vendor

package/config/lint-staged.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  '*.{js,jsx,scss,css,php}': ['prettier --write', 'git add'],
+  '*.{js,jsx,scss,css,php}': ['prettier --write'],
 };

package/logger.js

@@ -30,4 +30,4 @@ module.exports = {
     if (!this.enabled) return;
     log('info', chalk.blue('ℹ'), ...args);
   },
-}
+};

package/overridable/checkProjectDependencies.js

@@ -1,34 +1,12 @@
 const fs = require('fs');
 const chalk = require('chalk');
+const rimraf = require('rimraf');
 
 const logger = require('../logger');
 const getProjectPath = require('../utils/getProjectPath');
+const execAsync = require('../utils/execAsync');
 
-const BABEL = ['@babel/polyfill', '@babel/runtime', 'babel-polyfill', 'babel-runtime'];
-
-function checkProjectDependencies() {
-  const projectPackage = getProjectPath('package.json');
-  const pck = JSON.parse(fs.readFileSync(projectPackage, 'utf8'));
-  const { dependencies, devDependencies } = pck;
-
-  // Babel polyfill/runtime check
-  if (BABEL.some(name => dependencies[name])) {
-    logger.warn(
-      `${chalk.bold('babel polyfill or runtimeyfi')} is no longer required with >=0.4.0.
-       Please remove it from your project devDependencies: ${chalk.yellow(
-         `yarn remove ${BABEL.join(' ')}`
-       )}`
-    );
-  }
-
-  // mamp-cli
-  if (devDependencies['mamp-cli']) {
-    logger.warn(
-      `${chalk.bold('mamp-cli')} is no longer required with >=2.0.0.
-       Please remove it from your project devDependencies: ${chalk.yellow('yarn remove mamp-cli')}`
-    );
-  }
-
+async function checkProjectDependencies() {
   const vendorDir = getProjectPath('vendor');
   const hasInstalledComposer = fs.existsSync(vendorDir);
   if (!hasInstalledComposer) {
@@ -45,6 +23,31 @@ function checkProjectDependencies() {
     // Warn if fx-classes < v2 is being used
     logger.warn('You are using an old version of fx-classes, please upgrade to at least v2.');
   }
+
+  // Husky pre-commit hooks activation and migration from v4 to v8
+  const huskyDirectory = getProjectPath('.husky');
+  const oldHuskyConfig = getProjectPath('.huskyrc.js');
+
+  // Delete old config if it exists
+  if (fs.existsSync(oldHuskyConfig)) {
+    try {
+      rimraf.sync(oldHuskyConfig);
+      logger.info('Old Husky config deleted');
+    } catch (err) {
+      console.warn('Error while deleting old Husky config:', err);
+    }
+  }
+
+  if (!fs.existsSync(huskyDirectory)) {
+    // Husky now requires a "one-time" explicit git hook activation
+    const husky = `node_modules/.bin/husky`;
+
+    await execAsync(`${husky} install`);
+    logger.info('Upgrading Husky git hooks config');
+    await execAsync(`${husky} add .husky/pre-commit 'npx lint-staged'`);
+    await execAsync(`${husky} add .husky/post-merge 'wp-scripts hooks --type="post-merge"'`);
+    logger.success('Husky upgrade successful!');
+  }
 }
 
 module.exports = checkProjectDependencies;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wp-blank-scripts",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.5",
   "description": "Personal Wordpress Scripts",
   "main": "index.js",
   "bin": {
@@ -10,7 +10,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "engines": {
-    "node": ">=9"
+    "node": ">=10"
   },
   "files": [
     "cli",
@@ -79,7 +79,6 @@
     "style-loader": "^3.3.3",
     "tempy": "^0.2.1",
     "terser-webpack-plugin": "^5.3.9",
-    "time-fix-plugin": "^2.0.7",
     "webpack": "^5.87.0",
     "webpack-dev-middleware": "^6.1.1",
     "webpack-hot-middleware": "^2.25.3",

package/utils/checkNodeVersion.js

@@ -34,7 +34,9 @@ async function checkNodeVerion() {
   const currentVersion = await getCurrentNodeVersion();
 
   if (projectVersion && !isValidNodeVersion(projectVersion, currentVersion)) {
-    logger.warn(`Your node version (v${currentVersion}) is not valid. This project require node ${projectVersion}.`);
+    logger.warn(
+      `Your node version (v${currentVersion}) is not valid. This project requires node ${projectVersion}.`
+    );
   }
 }
 

package/webpack.base.config.js

@@ -5,7 +5,6 @@ const CopyPlugin = require('copy-webpack-plugin');
 const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-const TimeFixPlugin = require('time-fix-plugin');
 const cssnano = require('cssnano');
 const glob = require('glob');
 const postcssPresetEnv = require('postcss-preset-env');
@@ -35,6 +34,7 @@ function makeBaseConfig(options) {
   const themePath = path.join(buildPath, themeDir);
 
   const fxFiles = getFxFiles(copyFx());
+  const fontsDir = path.join(sourceDir, 'assets', 'fonts');
 
   const sourceFiles = [
     {
@@ -51,11 +51,15 @@ function makeBaseConfig(options) {
       to: path.join(themePath, 'assets', 'img'),
       globOptions: { ignore: ['.DS_Store'] },
     },
-    {
-      from: path.join(sourceDir, 'assets', 'fonts'),
-      to: path.join(themePath, 'assets', 'fonts'),
-      globOptions: { ignore: ['.DS_Store'] },
-    },
+    ...(fs.existsSync(fontsDir)
+      ? [
+          {
+            from: fontsDir,
+            to: path.join(themePath, 'assets', 'fonts'),
+            globOptions: { ignore: ['.DS_Store'] },
+          },
+        ]
+      : []),
     {
       from: path.join(sourceDir, 'templates'),
       to: themePath,
@@ -173,7 +177,6 @@ function makeBaseConfig(options) {
             loader: 'esbuild-loader',
             options: {
               loader: 'jsx',
-              // TODO: Remove in react build
               jsxFactory: 'wp.element.createElement',
               target: 'es2015',
             },
@@ -248,11 +251,6 @@ function makeBaseConfig(options) {
     ],
     resolve: {
       symlinks: false,
-      alias: {
-        scrollmagic: path.resolve(
-          'node_modules/scrollmagic/scrollmagic/minified/ScrollMagic.min.js'
-        ),
-      },
     },
     devtool: isProd ? undefined : 'cheap-module-source-map',
     performance: {

package/webpack.react.config.js

@@ -35,7 +35,7 @@ function makeReactWebpackConfig(options) {
       main: entryPath,
     },
     output: {
-      filename: chunkData => {
+      filename: (chunkData) => {
         if (chunkData.chunk.name === 'adminScripts') {
           return path.join(themeDir, 'assets', 'js', 'admin.js');
         }
@@ -46,16 +46,24 @@ function makeReactWebpackConfig(options) {
     },
     module: {
       rules: [
+        {
+          test: /\.[jt]sx?$/,
+          exclude: /node_modules\/(?!(dom7|swiper)\/)/,
+          use: {
+            loader: 'esbuild-loader',
+            options: {
+              loader: 'jsx',
+              jsxFactory: 'React.createElement',
+              target: 'es2015',
+            },
+          },
+        },
         {
           test: /\.css$/,
           include: [sourcePath],
           use: [
             {
-              loader: MiniCssExtractPlugin.loader,
-              options: {
-                hmr: !isProd,
-                reloadAll: true,
-              },
+              loader: !isProd ? 'style-loader' : MiniCssExtractPlugin.loader,
             },
             {
               loader: 'css-loader',
@@ -64,14 +72,15 @@ function makeReactWebpackConfig(options) {
             {
               loader: 'postcss-loader',
               options: {
-                ident: 'postcss',
-                plugins() {
-                  if (isProd) {
-                    return [postcssPresetEnv(), cssnano()];
-                  }
-                  return [postcssPresetEnv({ browsers: 'last 2 versions' })];
+                postcssOptions: {
+                  plugins() {
+                    if (isProd) {
+                      return [postcssPresetEnv(), cssnano()];
+                    }
+                    return [postcssPresetEnv({ browsers: 'last 2 versions' })];
+                  },
+                  sourceMap: !isProd,
                 },
-                sourceMap: true,
               },
             },
           ],
@@ -79,13 +88,9 @@ function makeReactWebpackConfig(options) {
         {
           test: /\.scss$/,
           include: [sourcePath],
-          loader: [
+          use: [
             {
-              loader: MiniCssExtractPlugin.loader,
-              options: {
-                hmr: !isProd,
-                reloadAll: true,
-              },
+              loader: !isProd ? 'style-loader' : MiniCssExtractPlugin.loader,
             },
             {
               loader: 'css-loader',
@@ -97,14 +102,15 @@ function makeReactWebpackConfig(options) {
             {
               loader: 'postcss-loader',
               options: {
-                ident: 'postcss',
-                plugins() {
-                  if (isProd) {
-                    return [postcssPresetEnv(), cssnano()];
-                  }
-                  return [postcssPresetEnv({ browsers: 'last 2 versions' })];
+                postcssOptions: {
+                  plugins() {
+                    if (isProd) {
+                      return [postcssPresetEnv(), cssnano()];
+                    }
+                    return [postcssPresetEnv({ browsers: 'last 2 versions' })];
+                  },
+                  sourceMap: !isProd,
                 },
-                sourceMap: true,
               },
             },
             {
@@ -121,19 +127,6 @@ function makeReactWebpackConfig(options) {
             },
           ],
         },
-        {
-          test: /\.(eot|ttf|woff|woff2)$/,
-          include: [sourcePath],
-          use: [
-            {
-              loader: 'file-loader',
-              options: {
-                name: '[contenthash].[ext]',
-                outputPath: path.join(themeDir, 'assets', 'fonts'),
-              },
-            },
-          ],
-        },
         {
           test: /.*\.(gif|png|svg|jpe?g)$/i,
           include: [sourcePath],
@@ -164,20 +157,13 @@ function makeReactWebpackConfig(options) {
         excludeChunks: ['adminScripts', 'admin.style'],
       }),
       new MiniCssExtractPlugin({
-        moduleFilename({ name }) {
+        filename({ name }) {
           if (name === 'admin.style') {
             return path.join(themeDir, 'assets', 'css', 'admin.style.css');
           }
 
           return path.join(themeDir, 'assets', 'css', isProd ? '[contenthash].css' : '[name].css');
         },
-        fallback: 'style-loader',
-        use: [
-          {
-            loader: 'css-loader',
-            options: { minimize: isProd, url: false, sourceMap: !isProd },
-          },
-        ],
       }),
     ],
     optimization: {

package/config/.huskyrc.js

@@ -1,6 +0,0 @@
-module.exports = {
-  hooks: {
-    'pre-commit': 'lint-staged',
-    'post-merge': 'wp-scripts hooks --type="post-merge"',
-  },
-};