wp-blank-scripts 4.0.0-alpha.1 → 4.0.0-alpha.2

package/README.md

@@ -4,7 +4,7 @@ CLI and build tool for WordPress projects at ViVO Digital.
 
 ## Requirements
 
-- Node `>=22`
+- Node `>=18`
 - MAMP (optional — skipped automatically if not installed)
 
 ## Project Structure

package/cli/import.js

@@ -1,3 +1,7 @@
+const fs = require('fs');
+const path = require('path');
+
+const chalk = require('chalk');
 const glob = require('glob');
 
 const importSQL = require('../lib/importSQL');
@@ -10,10 +14,35 @@ const getMostRecentSqlFile = require('../utils/getMostRecentSqlFile');
 // Constants
 const { ENV_OPTIONS, SQL_FILE_NAME_ENV } = require('../constants');
 
+function getRelativeTime(file) {
+  const diffMs = Date.now() - fs.statSync(file).mtime;
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  return `${diffDays}d ago`;
+}
+
+function buildSqlChoices(files) {
+  const sorted = [...files].sort((a, b) => fs.statSync(b).mtime - fs.statSync(a).mtime);
+  const prodFiles = sorted.filter((f) => path.basename(f).includes(SQL_FILE_NAME_ENV.production));
+  const latestProd = prodFiles[0];
+  return sorted.map((file) => {
+    const name = path.basename(file);
+    const time = chalk.dim(`(${getRelativeTime(file)})`);
+    const isLatestProd = file === latestProd;
+    const label = isLatestProd
+      ? `${chalk.green(name)} ${chalk.green('(latest)')} ${time}`
+      : `${name} ${time}`;
+    return { name: label, value: file, short: name };
+  });
+}
+
 function getEnvironmentFromFileName(file) {
   let env;
 
-  Object.keys(SQL_FILE_NAME_ENV).forEach(key => {
+  Object.keys(SQL_FILE_NAME_ENV).forEach((key) => {
     const namePrefix = SQL_FILE_NAME_ENV[key];
     if (file.includes(namePrefix)) {
       env = key;
@@ -27,13 +56,14 @@ module.exports = async () => {
   const settings = getSettings();
   const sqlDir = settings.directories.sql;
   const sqlFiles = glob.sync(`${sqlDir}/**/*.sql`);
+  const sqlChoices = buildSqlChoices(sqlFiles);
 
   try {
     const options = await getCliOptions([
       {
         name: 'file',
         message: 'Which file do you want to import?',
-        choices: sqlFiles,
+        choices: sqlChoices,
         type: 'list',
         when: () => sqlFiles && sqlFiles.length,
       },
@@ -42,14 +72,14 @@ module.exports = async () => {
         message: 'Do you need to replace urls in the sql?',
         type: 'confirm',
         default: false,
-        when: answers => answers.file,
+        when: (answers) => answers.file,
       },
       {
         name: 'environment',
         message: 'Where environment are you importing from?',
         choices: ENV_OPTIONS,
         type: 'list',
-        when: answers => answers.replace,
+        when: (answers) => answers.replace,
       },
       {
         name: 'currentEnvironment',
@@ -57,7 +87,7 @@ module.exports = async () => {
         choices: ENV_OPTIONS,
         default: 'local',
         type: 'list',
-        when: answers => answers.replace,
+        when: (answers) => answers.replace,
       },
     ]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wp-blank-scripts",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.2",
   "description": "Personal Wordpress Scripts",
   "main": "index.js",
   "bin": {

package/webpack.base.config.js

@@ -301,8 +301,31 @@ function makeBaseConfig(options) {
               options: {
                 api: 'modern',
                 sourceMap: !isProd,
-                additionalData: sassVariables,
+                additionalData: (content, loaderContext) =>
+                  loaderContext.resourcePath.endsWith('.css') ? content : sassVariables + content,
                 sassOptions: {
+                  loadPaths: [process.cwd()],
+                  // Handle @import 'node_modules/foo/bar' resolving to a .css file.
+                  // Dart Sass won't find .css files when the extension is omitted, so
+                  // we intercept those imports and load them manually.
+                  importers: [
+                    {
+                      canonicalize(url) {
+                        if (path.extname(url)) return null;
+                        const cssPath = path.resolve(process.cwd(), url + '.css');
+                        if (fs.existsSync(cssPath)) {
+                          return new URL(`file://${cssPath}`);
+                        }
+                        return null;
+                      },
+                      load(canonicalUrl) {
+                        return {
+                          contents: fs.readFileSync(canonicalUrl.pathname, 'utf-8'),
+                          syntax: 'css',
+                        };
+                      },
+                    },
+                  ],
                   // Silence Dart Sass 2+ deprecation warnings from legacy project SCSS.
                   // These are expected in older projects and will need to be migrated
                   // project-by-project via: wp-scripts migrate-sass

package/webpack.react.config.js

@@ -137,7 +137,12 @@ function makeReactWebpackConfig(options) {
               options: {
                 sourceMap: !isProd,
                 api: 'modern',
-                additionalData: globalVariables || undefined,
+                additionalData: globalVariables
+                  ? (content, loaderContext) =>
+                      loaderContext.resourcePath.endsWith('.css')
+                        ? content
+                        : globalVariables + content
+                  : undefined,
               },
             },
           ],