wp-blank-scripts 3.0.0-beta.0 → 3.0.0-beta.10

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/cli/{settings.js → config.js}

@@ -1,7 +1,7 @@
 const chalk = require('chalk');
 const inquirer = require('inquirer');
 
-const addSettings = require('../lib/addSettings');
+const addDeployConfig = require('../lib/addDeployConfig');
 
 const logger = require('../logger');
 const getCliOptions = require('../utils/getCliOptions');
@@ -64,23 +64,23 @@ module.exports = async () => {
       {
         name: 'urlProduction',
         message: 'What is the production URL?',
-        when: answers => answers.environment === 'production',
+        when: (answers) => answers.environment === 'production',
       },
       {
         name: 'hostProduction',
         message: 'What is the production server host?',
-        when: answers => answers.environment === 'production',
+        when: (answers) => answers.environment === 'production',
       },
       {
         name: 'userProduction',
         message: 'What is the production server user?',
-        when: answers => answers.environment === 'production',
+        when: (answers) => answers.environment === 'production',
       },
       {
         name: 'destinationProduction',
         message: 'What is the production path?',
-        when: answers => answers.environment === 'production',
-        default: answers => {
+        when: (answers) => answers.environment === 'production',
+        default: (answers) => {
           const user = answers.userProduction;
           return `/home/${user}/public_html`;
         },
@@ -88,40 +88,40 @@ module.exports = async () => {
       {
         name: 'dbNameProduction',
         message: 'Production database name?',
-        when: answers => answers.environment === 'production',
+        when: (answers) => answers.environment === 'production',
       },
       {
         name: 'dbUserNameProduction',
         message: 'Production database username?',
-        when: answers => answers.environment === 'production',
+        when: (answers) => answers.environment === 'production',
       },
       {
         name: 'dbPasswordProduction',
         message: 'Production database password?',
-        when: answers => answers.environment === 'production',
+        when: (answers) => answers.environment === 'production',
       },
       {
         name: 'urlStaging',
         message: 'What is the staging URL?',
-        when: answers => answers.environment === 'staging',
+        when: (answers) => answers.environment === 'staging',
       },
       {
         name: 'hostStaging',
         message: 'What is the staging server host?',
-        when: answers => answers.environment === 'staging',
+        when: (answers) => answers.environment === 'staging',
         default: 'staging.vivo.digital',
       },
       {
         name: 'userStaging',
         message: 'What is the staging server user?',
-        when: answers => answers.environment === 'staging',
+        when: (answers) => answers.environment === 'staging',
         default: 'stagingvivo',
       },
       {
         name: 'destinationStaging',
         message: 'What is the staging path?',
-        when: answers => answers.environment === 'staging',
-        default: answers => {
+        when: (answers) => answers.environment === 'staging',
+        default: (answers) => {
           const user = answers.userStaging;
           let url = answers.urlStaging;
           url = url && url.replace('https://', '');
@@ -132,17 +132,17 @@ module.exports = async () => {
       {
         name: 'dbNameStaging',
         message: 'Staging database name?',
-        when: answers => answers.environment === 'staging',
+        when: (answers) => answers.environment === 'staging',
       },
       {
         name: 'dbUserNameStaging',
         message: 'Staging database username?',
-        when: answers => answers.environment === 'staging',
+        when: (answers) => answers.environment === 'staging',
       },
       {
         name: 'dbPasswordStaging',
         message: 'Staging database password?',
-        when: answers => answers.environment === 'staging',
+        when: (answers) => answers.environment === 'staging',
       },
     ]);
 
@@ -150,7 +150,7 @@ module.exports = async () => {
     const confirmed = options.didPrompt ? await confirmOptions(options) : true;
 
     if (confirmed) {
-      await addSettings(options);
+      await addDeployConfig(options);
       logger.success(`${options.environment} Settings updated!`);
     }
   } catch (err) {

package/config/.eslintrc.react.js

@@ -26,6 +26,7 @@ module.exports = {
     'react/forbid-prop-types': 0,
     'react/require-default-props': 0,
     'react/sort-comp': 0,
+    'react/function-component-definition': 0,
     'prefer-destructuring': 0,
     'no-nested-ternary': 0,
     'no-continue': 0,

package/config/.prettierrc.js

@@ -8,7 +8,7 @@ module.exports = {
     {
       files: '*.php',
       options: {
-        phpVersion: '7.2',
+        phpVersion: '7.4',
         tabWidth: 4,
         braceStyle: '1tbs',
       },

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/index.js

@@ -10,11 +10,9 @@ const deploy = require('./cli/deploy');
 const importSQL = require('./cli/import');
 const exportSQL = require('./cli/export');
 const pullSQL = require('./cli/pull');
-const upgrade = require('./cli/upgrade');
-const settings = require('./cli/settings'); //@TODO rename... addDeployConfig
+const addDeployConfig = require('./cli/config');
 
 const exitWithError = require('./utils/exitWithError');
-const logger = require('./logger');
 
 const _ = () => {};
 
@@ -23,7 +21,7 @@ yargs
   .command(
     'build',
     'Build',
-    yargs =>
+    (yargs) =>
       yargs.option('environment', {
         describe: 'The environment to build for.',
       }),
@@ -34,7 +32,7 @@ yargs
   .command(
     'setup',
     'Setup Project',
-    yargs =>
+    (yargs) =>
       yargs
         .option('projectLocation', {
           describe: 'Where is the project located?',
@@ -59,7 +57,7 @@ yargs
   .command(
     'deploy',
     'Deploy',
-    yargs =>
+    (yargs) =>
       yargs
         .option('environment', {
           describe: 'The environment to deploy to.',
@@ -81,7 +79,7 @@ yargs
   .command(
     'import',
     'Import SQL',
-    yargs =>
+    (yargs) =>
       yargs
         .option('file', {
           describe: 'The path to the file to import.',
@@ -103,7 +101,7 @@ yargs
   .command(
     'export',
     'Export SQL',
-    yargs =>
+    (yargs) =>
       yargs.option('environment', {
         describe: 'The environment you are exporting for.',
       }),
@@ -112,7 +110,7 @@ yargs
   .command(
     'pull',
     'Pull SQL',
-    yargs =>
+    (yargs) =>
       yargs.option('environment', {
         describe: 'The environment you are pulling from.',
       }),
@@ -121,31 +119,30 @@ yargs
   .command(
     'hooks',
     'Run a git hook',
-    yargs =>
+    (yargs) =>
       yargs.option('type', {
         describe: 'The git hook to run.',
       }),
     hooks
   )
-  .command('upgrade', 'Upgrade to v0.4', _, upgrade)
   .command(
-    'settings',
-    'Add Deployment Settings',
-    yargs =>
+    'config',
+    'Add deployment config',
+    (yargs) =>
       yargs.option('environment', {
-        describe: 'What environment are you adding settings for?',
+        describe: 'What environment are you adding deployment config for?',
       }),
-    settings
+    addDeployConfig
   )
   .help()
   .alias('h', 'help')
   .demandCommand()
   .strict().argv;
 
-process.on('uncaughtException', err => {
+process.on('uncaughtException', (err) => {
   exitWithError(err.message);
 });
 
-process.on('unhandledRejection', err => {
+process.on('unhandledRejection', (err) => {
   exitWithError(err instanceof Error ? err.stack || err.message : 'Something went wrong');
 });

package/lib/{addSettings.js → addDeployConfig.js}

@@ -1,12 +1,11 @@
 const fs = require('fs');
 const glob = require('glob');
-const slugify = require('slugify');
 const replace = require('replace-in-file');
 
 const logger = require('../logger');
 const getProjectPath = require('../utils/getProjectPath');
 
-const getReplacements = options => {
+const getReplacements = (options) => {
   if (options.environment === 'production') {
     return [
       ['{{url_production}}', options.urlProduction],
@@ -32,7 +31,7 @@ const getReplacements = options => {
   return;
 };
 
-module.exports = async options => {
+module.exports = async (options) => {
   const projectPath = getProjectPath();
   const filesToReplace = [
     ...glob.sync('config/*', { cwd: projectPath, dot: true }),
@@ -44,7 +43,7 @@ module.exports = async options => {
   let files = filesToReplace;
   if (getProjectPath() !== process.cwd()) {
     // Check if the script is being run from outside of the project and then fix the paths
-    files = files.map(file => getProjectPath(file));
+    files = files.map((file) => getProjectPath(file));
   }
 
   // Remove any files that don't exist

package/lib/buildProject.js

@@ -1,5 +1,4 @@
 const chalk = require('chalk');
-const opn = require('opn');
 const rimraf = require('rimraf');
 const webpack = require('webpack');
 const { merge } = require('webpack-merge');
@@ -88,12 +87,22 @@ module.exports = async (envConfig = {}, buildOptions, failOnError = false) => {
     const settings = getSettings();
     const url = settings.url[options.environment];
 
-    const compiler = webpack(config, (err, stats) => {
-      if (err || stats.hasErrors()) {
+    const compiler = webpack(config, (err) => {
+      if (err) {
         logger.error(err.stack || err);
+
+        if (err.details) {
+          logger.error(err.details);
+        }
+
+        if (failOnError) {
+          exitWithError();
+        }
+
         return;
       }
     });
+
     const devMiddleware = webpackDevMiddleware(compiler, {
       publicPath: config.output.publicPath,
       stats: {
@@ -103,12 +112,13 @@ module.exports = async (envConfig = {}, buildOptions, failOnError = false) => {
       },
       writeToDisk: true,
     });
+
     const hotMiddleware = webpackHotMiddleware(compiler);
 
     browserSync({
       host: 'localhost',
       https: process.env.HTTPS,
-      open: false,
+      open: true,
       port: process.env.PORT || 3000,
       proxy: {
         target: url,
@@ -122,7 +132,6 @@ module.exports = async (envConfig = {}, buildOptions, failOnError = false) => {
     });
 
     devMiddleware.waitUntilValid(() => {
-      opn(url.replace('8888', process.env.PORT));
       logger.success('Build finished successfully!');
     });
 
@@ -149,11 +158,11 @@ module.exports = async (envConfig = {}, buildOptions, failOnError = false) => {
     const info = stats.toJson();
 
     if (stats.hasWarnings()) {
-      info.warnings.forEach(warning => logger.warn(warning));
+      info.warnings.forEach((warning) => logger.warn(warning));
     }
 
     if (stats.hasErrors()) {
-      info.errors.forEach(error => {
+      info.errors.forEach((error) => {
         logger.error(chalk.red(error));
       });
 

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/overridable/index.js

@@ -1,20 +1,12 @@
 const fs = require('fs');
 const path = require('path');
 
-const logger = require('../logger');
-
 let overrides;
 const overridesPath = path.resolve(process.cwd(), './tasks/overrides.js');
 if (fs.existsSync(overridesPath)) {
   overrides = require(overridesPath);
 }
 
-if (overrides.copyFxClasses) {
-  logger.warn(
-    `You are using the old "copyFxClasses" override, please upgrade your code to use the new "copyFx" API.`
-  );
-}
-
 const checkProjectDependencies = require('./checkProjectDependencies');
 const copyFx = require('./copyFx');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wp-blank-scripts",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.10",
   "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",
@@ -31,8 +31,10 @@
   "author": "ViVO Digital",
   "license": "ISC",
   "dependencies": {
-    "@hot-loader/react-dom": "^17.0.2",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@prettier/plugin-php": "^0.19.6",
+    "@swc/cli": "^0.1.62",
+    "@swc/core": "^1.3.67",
     "browser-sync": "^2.29.3",
     "chalk": "4.1.2",
     "copy-webpack-plugin": "^11.0.0",
@@ -58,15 +60,13 @@
     "mini-css-extract-plugin": "^2.7.6",
     "mysql": "^2.18.1",
     "node-fetch": "2",
-    "normalize.css": "^8.0.1",
-    "opn": "^6.0.0",
     "ora": "^5.4.1",
     "postcss": "^8.4.24",
     "postcss-loader": "^7.3.3",
     "postcss-preset-env": "^8.5.0",
     "prettier": "^2.8.8",
     "raw-loader": "^4.0.2",
-    "react-hot-loader": "^4.13.1",
+    "react-refresh": "^0.14.0",
     "replace-in-file": "^7.0.1",
     "rimraf": "^5.0.1",
     "rsync": "^0.6.1",
@@ -77,9 +77,9 @@
     "slugify": "^1.6.6",
     "ssh2": "0.8.9",
     "style-loader": "^3.3.3",
+    "swc-loader": "^0.2.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,
@@ -168,14 +172,15 @@ function makeBaseConfig(options) {
       rules: [
         {
           test: /\.[jt]sx?$/,
-          exclude: /node_modules\/(?!(dom7|swiper)\/)/,
+          exclude: /node_modules/,
           use: {
-            loader: 'esbuild-loader',
+            loader: 'swc-loader',
             options: {
-              loader: 'jsx',
-              // TODO: Remove in react build
-              jsxFactory: 'wp.element.createElement',
-              target: 'es2015',
+              jsc: {
+                parser: {
+                  jsx: true,
+                },
+              },
             },
           },
           ...loaderOverrides.js,
@@ -197,11 +202,11 @@ function makeBaseConfig(options) {
               loader: 'postcss-loader',
               options: {
                 postcssOptions: {
-                  postcssOptions: {
-                    plugins: [
-                      postcssPresetEnv({ browsers: 'last 2 versions' }),
-                      ...(isProd ? [postcssPresetEnv(), cssnano()] : []),
-                    ],
+                  plugins() {
+                    if (isProd) {
+                      return [postcssPresetEnv(), cssnano()];
+                    }
+                    return [postcssPresetEnv({ browsers: 'last 2 versions' })];
                   },
                 },
                 sourceMap: !isProd,
@@ -211,7 +216,7 @@ function makeBaseConfig(options) {
               loader: 'sass-loader',
               options: {
                 sourceMap: !isProd,
-                prependData: sassVariables,
+                additionalData: sassVariables,
               },
             },
           ],
@@ -241,8 +246,6 @@ function makeBaseConfig(options) {
       ],
     },
     plugins: [
-      // TODO: See if we can remove
-      // new TimeFixPlugin(),
       new CopyPlugin({ patterns: filesToCopy }),
       new RemoveEmptyScriptsPlugin({ silent: true }),
     ],

package/webpack.react.config.js

@@ -6,6 +6,7 @@ const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const postcssPresetEnv = require('postcss-preset-env');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const cssnano = require('cssnano');
 
 const getSettings = require('./utils/projectSettings');
@@ -16,26 +17,28 @@ function makeReactWebpackConfig(options) {
   const isProd = mode === 'production';
   const sourceDir = 'app';
   const sourcePath = path.join(process.cwd(), sourceDir);
-  const entryPath = path.join(sourcePath, 'index.js');
+  const entryPath = [path.join(sourcePath, 'index.js')];
   const globalVariablesPath = path.join(sourcePath, 'variables.scss');
 
   const settings = getSettings();
   const themeDir = path.join('wp-content', 'themes', settings.project);
 
-  if (!fs.existsSync(entryPath)) {
-    const relativeEntryPath = path.relative(process.cwd(), entryPath);
+  if (!fs.existsSync(entryPath[0])) {
+    const relativeEntryPath = path.relative(process.cwd(), entryPath[0]);
     exitWithError(`This project is a React project, but the entry file is missing.
        Please create ${chalk.yellow(relativeEntryPath)} to continue.`);
   }
 
+  if (!isProd) {
+    entryPath.unshift('webpack-hot-middleware/client');
+  }
+
   const config = {
     entry: {
-      // Make sure global is first
-      style: ['normalize.css'],
       main: entryPath,
     },
     output: {
-      filename: chunkData => {
+      filename: (chunkData) => {
         if (chunkData.chunk.name === 'adminScripts') {
           return path.join(themeDir, 'assets', 'js', 'admin.js');
         }
@@ -46,16 +49,33 @@ function makeReactWebpackConfig(options) {
     },
     module: {
       rules: [
+        {
+          test: /\.[jt]sx?$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'swc-loader',
+            options: {
+              sourceMap: true,
+              jsc: {
+                parser: {
+                  jsx: true,
+                },
+                transform: {
+                  react: {
+                    development: !isProd,
+                    refresh: !isProd,
+                  },
+                },
+              },
+            },
+          },
+        },
         {
           test: /\.css$/,
           include: [sourcePath],
           use: [
             {
-              loader: MiniCssExtractPlugin.loader,
-              options: {
-                hmr: !isProd,
-                reloadAll: true,
-              },
+              loader: !isProd ? 'style-loader' : MiniCssExtractPlugin.loader,
             },
             {
               loader: 'css-loader',
@@ -64,14 +84,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 +100,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 +114,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 +139,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 +169,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: {
@@ -210,15 +208,9 @@ function makeReactWebpackConfig(options) {
       version: false,
     },
   };
-
   if (!isProd) {
-    config.entry.main = [
-      'webpack-hot-middleware/client',
-      'react-hot-loader/patch',
-      config.entry.main,
-    ];
     config.plugins.push(new webpack.HotModuleReplacementPlugin());
-    config.resolve.alias['react-dom'] = '@hot-loader/react-dom';
+    config.plugins.push(new ReactRefreshWebpackPlugin({ overlay: false }));
   }
 
   return config;

package/webpack.wp.config.js

@@ -13,7 +13,6 @@ const getSettings = require('./utils/projectSettings');
 
 function makeWpWebpackConfig() {
   const mode = process.env.NODE_ENV || 'development';
-  const isProd = mode === 'production';
 
   const settings = getSettings();
 
@@ -25,12 +24,12 @@ function makeWpWebpackConfig() {
 
   // Source entries
   const mainScripts = {};
-  glob.sync(path.join(sourcePath, 'assets', 'js', '*.js')).forEach(filePath => {
+  glob.sync(path.join(sourcePath, 'assets', 'js', '*.js')).forEach((filePath) => {
     const name = path.basename(filePath, '.js');
     mainScripts[name] = [filePath];
   });
 
-  glob.sync(path.join(sourcePath, 'assets', 'js', 'gutenberg', '*.js')).forEach(filePath => {
+  glob.sync(path.join(sourcePath, 'assets', 'js', 'gutenberg', '*.js')).forEach((filePath) => {
     const name = path.basename(filePath, '.js');
     mainScripts[`gutenberg/${name}`] = [filePath];
   });
@@ -52,7 +51,7 @@ function makeWpWebpackConfig() {
   return {
     entry: {
       ...mainScripts,
-      style: ['normalize.css', ...fxFiles.sass, ...mainStyles],
+      style: [...fxFiles.sass, ...mainStyles],
     },
     plugins: [
       new MiniCssExtractPlugin({

package/cli/upgrade.js

@@ -1,150 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const rimraf = require('rimraf');
-const replace = require('replace-in-file');
-const ora = require('ora');
-
-const execAsync = require('../utils/execAsync');
-const logger = require('../logger');
-
-const unusedPackages = [
-  'pace-progress',
-  '@babel/polyfill',
-  '@babel/runtime',
-  'babel-polyfill',
-  'babel-runtime',
-];
-
-const filesToChange = [
-  [path.join('config', 'htaccess.txt'), path.join('config', '.htaccess')],
-  [
-    path.join('config', 'htaccess-staging.txt'),
-    path.join('config', '.htaccess-staging'),
-  ],
-  [
-    path.join('config', 'htaccess-production.txt'),
-    path.join('config', '.htaccess-production'),
-  ],
-];
-
-module.exports = async () => {
-  logger.log('Upgrading your project to the latest wp-blank-scripts');
-
-  // Rename files
-  filesToChange.forEach(([to, from]) => {
-    if (fs.existsSync(to)) {
-      fs.renameSync(to, from);
-      logger.log(`Renamed ${to} to ${from}`);
-    }
-  });
-
-  const pckFile = fs.readFileSync('package.json');
-  const pck = JSON.parse(pckFile);
-
-  // Remove browserify-shim from package.json
-  delete pck['browserify-shim'];
-  delete pck['browserify'];
-  logger.log('Removed browserify & browserify-shim config');
-
-  // Add new pull command
-  pck.scripts.pull = 'wp-scripts pull';
-
-  // Add new vivo config
-  pck.vivo = {
-    'dev-command': 'start',
-    designs: [],
-  };
-
-  logger.log('Added new fields to project package');
-
-  fs.writeFileSync('package.json', JSON.stringify(pck, null, 2));
-
-  // Remove pace-progress occurences from style.scss, preloader.scss, main.js
-  const scriptFilePP = path.join('src', 'assets', 'js', 'main.js');
-  const styleFilePP = path.join(
-    'src',
-    'assets',
-    'css',
-    'partials',
-    'preloader.scss'
-  );
-  const mainStyleFile = path.join('src', 'assets', 'css', 'style.scss');
-
-  // Remove from main.js
-  const importLinesPreloader = [
-    '// Pace',
-    'import pace from \'pace-progress\';',
-    'pace.start();',
-  ];
-  replace.sync({
-    files: scriptFilePP,
-    from: importLinesPreloader,
-    to: '',
-  });
-
-  // Delete preloader.scss
-  rimraf.sync(styleFilePP);
-  logger.log('Removed pace-progress from project');
-
-  // Remove import from style.scss
-  const importPreloaderStyles = '@import \'partials/preloader\';';
-  replace.sync({
-    files: mainStyleFile,
-    from: importPreloaderStyles,
-    to: '',
-  });
-
-  // Rename admin.css
-  const enqueueFile = path.join('src', 'inc', 'fx-enqueue.php');
-  replace.sync({
-    files: enqueueFile,
-    from: 'admin.css',
-    to: 'admin.style.css',
-  });
-  logger.log('Renamed admin styles in enqueue');
-
-  // Remove normalize.css
-  const normalizeFile = path.join(
-    'src',
-    'assets',
-    'css',
-    'vendor',
-    'normalize.scss'
-  );
-  rimraf.sync(normalizeFile);
-  const styleFile = path.join('src', 'assets', 'css', 'style.scss');
-  const importLine = '@import \'vendor/normalize\';';
-  replace.sync({
-    files: styleFile,
-    from: importLine,
-    to: '',
-  });
-  logger.log('Removed normalize.css from project');
-
-  // Remove deployment.log
-  rimraf.sync('deployment.log');
-  logger.log('Removed deployment.log from project');
-
-  const packagesToRemove = unusedPackages.filter(p =>
-    Boolean(pck.dependencies[p] || pck.devDependencies[p])
-  );
-
-  if (packagesToRemove.length > 0) {
-    // Remove unused packages
-    logger.log('Removing unused packages...');
-
-    const spinner = ora();
-    spinner.prefixText = logger.prefix;
-    spinner.start();
-    await execAsync(`yarn remove ${packagesToRemove.join(' ')}`);
-
-    spinner.stop();
-    logger.log(
-      `Removed ${packagesToRemove.length} package${
-        packagesToRemove.length === 1 ? '' : 's'
-      }`
-    );
-  }
-
-  logger.success('Upgraded to wp-blank-scripts v0.4, you\'re good to go!');
-};

package/config/.huskyrc.js

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