newspack-scripts 1.0.1 → 1.2.0

package/bin/newspack-scripts.js

@@ -4,7 +4,7 @@ const spawn = require("cross-spawn");
 
 const [scriptName, ...nodeArgs] = process.argv.slice(2);
 
-if (["test"].includes(scriptName)) {
+if (["test", "build", "start"].includes(scriptName)) {
   const result = spawn.sync(
     process.execPath,
     [require.resolve("../scripts/" + scriptName), ...nodeArgs],

package/config/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = api => {
+  api.cache(true);
+  return {
+    presets: [
+      "@automattic/calypso-build/babel/default",
+      "@automattic/calypso-build/babel/wordpress-element"
+    ]
+  };
+};

package/config/getWebpackConfig.js

@@ -0,0 +1,27 @@
+const path = require("path");
+
+const getWebpackConfig = require("@automattic/calypso-build/webpack.config.js");
+
+module.exports = (...args) => {
+  const config = getWebpackConfig(...args);
+
+  const scssRuleIndex = config.module.rules.findIndex(rule =>
+    rule.test.toString().match(/\(sc\|sa\|c\)ss/)
+  );
+  if (scssRuleIndex !== -1) {
+    const scssRule = config.module.rules[scssRuleIndex];
+    const postCssLoaderIndex = scssRule.use.findIndex(
+      loader => loader.loader && loader.loader.indexOf("postcss") > 0
+    );
+    if (postCssLoaderIndex !== -1) {
+      const postCssLoader = scssRule.use[postCssLoaderIndex];
+      const postCssConfigPath = path.resolve(__dirname, "postcss.config.js");
+      // Replace calypso-build's PostCSS config with this project's one.
+      postCssLoader.options.postcssOptions.config = postCssConfigPath;
+      config.module.rules[scssRuleIndex].use[
+        postCssLoaderIndex
+      ] = postCssLoader;
+    }
+  }
+  return config;
+};

package/config/postcss.config.js

@@ -0,0 +1,6 @@
+const postcssFocusWithin = require("postcss-focus-within");
+const autoprefixer = require("autoprefixer");
+
+module.exports = {
+  plugins: [autoprefixer(), postcssFocusWithin()]
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "newspack-scripts",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "",
   "bin": {
     "newspack-scripts": "./bin/newspack-scripts.js"
@@ -8,14 +8,18 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@babel/core": "^7.16.0",
+    "@automattic/calypso-build": "^10.0.0",
+    "@babel/preset-env": "^7.16.4",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^12.1.2",
+    "autoprefixer": "^10.4.0",
     "babel-jest": "^27.4.2",
-    "babel-loader": "^8.2.3",
     "cross-spawn": "^7.0.3",
     "jest": "^27.4.3",
-    "jest-environment-jsdom": "^27.4.3"
+    "jest-environment-jsdom": "^27.4.3",
+    "postcss": "^8.4.4",
+    "postcss-focus-within": "^5.0.1",
+    "webpack": "^5.65.0"
   },
   "scripts": {
     "semantic-release": "semantic-release"

package/scripts/build.js

@@ -0,0 +1,10 @@
+"use strict";
+
+const spawn = require("cross-spawn");
+const modules = require("./utils/modules");
+
+spawn.sync(process.execPath, [modules.calypsoBuild], {
+  cwd: modules.rootDirectory,
+  stdio: "inherit",
+  env: { ...process.env, NODE_ENV: "production" }
+});

package/scripts/start.js

@@ -0,0 +1,10 @@
+"use strict";
+
+const spawn = require("cross-spawn");
+const modules = require("./utils/modules");
+
+spawn.sync(process.execPath, [modules.calypsoBuild, "--watch"], {
+  cwd: modules.rootDirectory,
+  stdio: "inherit",
+  env: { ...process.env, NODE_ENV: "development" }
+});

package/scripts/test.js

@@ -4,23 +4,22 @@ process.env.BABEL_ENV = "test";
 process.env.NODE_ENV = "test";
 
 const jest = require("jest");
-const fs = require("fs");
 const path = require("path");
-const execSync = require("child_process").execSync;
 
-let argv = process.argv.slice(2);
+const modules = require("./utils/modules");
 
-const appDirectory = fs.realpathSync(process.cwd());
+let argv = process.argv.slice(2);
 
 const JEST_CONFIG = {
-  rootDir: path.resolve(appDirectory),
-  setupFilesAfterEnv: [path.resolve(__dirname, "utils/jest-setup.js")],
+  rootDir: modules.rootDirectory,
+  setupFilesAfterEnv: [path.resolve(__dirname, "utils/jestSetup.js")],
   testMatch: ["<rootDir>/**/*test.js?(x)"],
   transform: {
-    "^.+\\.js?$": "babel-jest"
+    "^.+\\.js?$": path.resolve(__dirname, "utils/babelJestTransformer.js")
   },
+  transformIgnorePatterns: ["/node_modules/(?!newspack-scripts/)"],
   moduleNameMapper: {
-    "\\.(scss|css)$": "babel-jest"
+    "\\.(scss|css)$": path.resolve(__dirname, "utils/babelJestTransformer.js")
   },
   testEnvironment: "jsdom",
   collectCoverageFrom: [

package/scripts/utils/babelJestTransformer.js

@@ -0,0 +1,13 @@
+"use strict";
+
+const babelJest = require("babel-jest").default;
+
+module.exports = babelJest.createTransformer({
+  presets: [
+    require.resolve("@babel/preset-env"),
+    require.resolve("@automattic/calypso-build/babel/default"),
+    require.resolve("@automattic/calypso-build/babel/wordpress-element")
+  ],
+  babelrc: false,
+  configFile: false
+});

package/scripts/utils/modules.js

@@ -0,0 +1,7 @@
+const fs = require("fs");
+const path = require("path");
+
+module.exports = {
+  rootDirectory: fs.realpathSync(process.cwd()),
+  calypsoBuild: require.resolve("@automattic/calypso-build/bin/calypso-build")
+};