newspack-scripts 5.5.0 → 5.5.1-alpha.2

package/.circleci/config.yml

@@ -24,7 +24,7 @@ jobs:
           command: node --version
       - run:
           name: install
-          command: npm install
+          command: npm install --legacy-peer-deps
       - run:
           name: release
           command: npm run semantic-release || true

package/.eslintrc.js

@@ -0,0 +1,9 @@
+require( '@rushstack/eslint-patch/modern-module-resolution' );
+
+module.exports = {
+	extends: [ './config/eslintrc.js' ],
+	ignorePatterns: [ 'node_modules' ],
+	rules: {
+		'@typescript-eslint/no-var-requires': 'off',
+	},
+};

package/.nvmrc

@@ -1 +1 @@
-16.11.1
+lts/*

package/README.md

@@ -15,11 +15,11 @@ Will run `jest` tests. Useful flags:
 
 ### build
 
-Will run `calypso-build`, creating optimised production builds.
+Will run `wp-scripts build` to create optimised production builds.
 
 ### watch
 
-Will run `calypso-build` in watch mode.
+Will run `wp-scripts start` to start a development build in devserver/watch mode.
 
 ### commit
 
@@ -47,6 +47,15 @@ Will validate TypeScript code in the project. This requires a `tsconfig.json` fi
 }
 ```
 
+### proxy
+
+Allows you to proxy NPM CLI commands through this repository's dependencies, so if a repository consumes the `newspack-scripts` NPM package, it can access any executables installed as a dependency in [package.json](https://github.com/Automattic/newspack-scripts/blob/trunk/package.json). e.g. `newspack-scripts proxy semantic-release --dry-run` will run `semantic-release --dry-run` but using the executable from `newspack-scripts` instead of whatever repository you're running the command from. This allows for more flexible use of NPM commands where the prefab configs and scripts this repo provides are too opinionated or aren't sufficient.
+
+Other examples:
+
+- `newspack-scripts proxy eslint 'src/**/*.{js,jsx,ts,tsx}'` will lint all JS/JSX/TS/TSX files inside the `./src` directory.
+- `newspack-scripts proxy stylelint 'src/**/*.scss'` will lint all SCSS files inside the `./src` directory.
+
 ---
 
 ## Semantic Release
@@ -154,10 +163,10 @@ module.exports = {
 
 ### stylelint
 
-Install `stylelint` via npm and reference this package's config file when running it, e.g.:
+Use this package's stylelint executable and config file when running it, e.g.:
 
 ```shell
-stylelint '**/*.scss' --syntax scss --config=./node_modules/newspack-scripts/config/stylelint.config.js
+newspack-scripts proxy stylelint '**/*.scss' --customSyntax postcss-scss --config=./node_modules/newspack-scripts/config/stylelint.config.js
 ```
 
 _Note: Due to issue with dependency resolving, you might end up a different version of `prettier` in project's `node_modules` and `node_modules/newspack-scripts/node_modules`. See https://github.com/Automattic/newspack-scripts/issues/1 for more information._
@@ -207,4 +216,4 @@ Note that before the first time updating you'll need to set the API key for Circ
 
 ### `@wordpress/*` packages
 
-This project list [`@wordpress/*` packages](https://github.com/WordPress/gutenberg/tree/trunk/packages) as dependencies in order to provide them to consumers. In a project using `calypso-build` (e.g. a consumer of `newspack-scripts`), the `@wordpress/*` packages are sourced from WP Core, not `node_modules`. The packages should be included in `node_modules`, though, to be available in other environments – notably when running tests. See [Dependency Extraction Webpack Plugin](https://www.npmjs.com/package/@wordpress/dependency-extraction-webpack-plugin) for more information.
+This project list [`@wordpress/*` packages](https://github.com/WordPress/gutenberg/tree/trunk/packages) as dependencies in order to provide them to consumers. In a project using `@wordpress/scripts` (e.g. a consumer of `newspack-scripts`), the `@wordpress/*` packages are sourced from WP Core, not `node_modules`. The packages should be included in `node_modules`, though, to be available in other environments – notably when running tests. See [Dependency Extraction Webpack Plugin](https://www.npmjs.com/package/@wordpress/dependency-extraction-webpack-plugin) for more information.

package/bin/newspack-scripts.js

@@ -1,43 +1,46 @@
 #!/usr/bin/env node
 
-const spawn = require("cross-spawn");
-const utils = require("../scripts/utils/index.js");
+const spawn = require( 'cross-spawn' );
+const utils = require( '../scripts/utils/index.js' );
 
-const [scriptName, ...nodeArgs] = process.argv.slice(2);
+const [ scriptName, ...nodeArgs ] = process.argv.slice( 2 );
 
 if (
-  [
-    "test",
-    "build",
-    "watch",
-    "commit",
-    "commitlint",
-    "release",
-    "typescript-check",
-  ].includes(scriptName)
+	[
+		'test',
+		'build',
+		'watch',
+		'commit',
+		'commitlint',
+		'eslint',
+		'proxy',
+		'stylelint',
+		'release',
+		'typescript-check',
+	].includes( scriptName )
 ) {
-  const result = spawn.sync(
-    process.execPath,
-    [require.resolve("../scripts/" + scriptName), ...nodeArgs],
-    { stdio: "inherit" }
-  );
-  if (result.signal) {
-    if (result.signal === "SIGKILL") {
-      utils.log(
-        "The build failed because the process exited too early. " +
-          "This probably means the system ran out of memory or someone called " +
-          "`kill -9` on the process."
-      );
-    } else if (result.signal === "SIGTERM") {
-      utils.log(
-        "The build failed because the process exited too early. " +
-          "Someone might have called `kill` or `killall`, or the system could " +
-          "be shutting down."
-      );
-    }
-    process.exit(1);
-  }
-  process.exit(result.status);
+	const result = spawn.sync(
+		process.execPath,
+		[ require.resolve( '../scripts/' + scriptName ), ...nodeArgs ],
+		{ stdio: 'inherit' }
+	);
+	if ( result.signal ) {
+		if ( result.signal === 'SIGKILL' ) {
+			utils.log(
+				'The build failed because the process exited too early. ' +
+          'This probably means the system ran out of memory or someone called ' +
+          '`kill -9` on the process.'
+			);
+		} else if ( result.signal === 'SIGTERM' ) {
+			utils.log(
+				'The build failed because the process exited too early. ' +
+          'Someone might have called `kill` or `killall`, or the system could ' +
+          'be shutting down.'
+			);
+		}
+		process.exit( 1 );
+	}
+	process.exit( result.status );
 } else {
-  utils.log(`Unknown script "${scriptName}".`);
+	utils.log( `Unknown script "${ scriptName }".` );
 }

package/config/babel.config.js

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

package/config/commitlint.config.js

@@ -1 +1 @@
-module.exports = { extends: ["@commitlint/config-conventional"] };
+module.exports = { extends: [ '@commitlint/config-conventional' ] };

package/config/eslintrc.js

@@ -1,65 +1,74 @@
-// Assume `@wordpress/*` packages are available. This is because `calypso-build` is using
+const wpRecommended = require.resolve( '@wordpress/eslint-plugin/configs/recommended' );
+const reactRecommended = require.resolve( '@wordpress/eslint-plugin/configs/react' );
+
+// Assume `@wordpress/*` packages are available. This is because `@wordpress/scripts` is using
 // Dependency Extraction Webpack Plugin to use core WP packages instead of those from
 // node_modules. The packages should still be part of the project (they are listed in this
 // project's package.json) so that they are available in testing environment.
 // More on this:
 // - https://www.npmjs.com/package/@wordpress/dependency-extraction-webpack-plugin
 // - https://github.com/WordPress/gutenberg/issues/35630
-const GLOBALLY_AVAILABLE_PACKAGES = ["@wordpress/.*"];
+const GLOBALLY_AVAILABLE_PACKAGES = [ '@wordpress/.*' ];
 
 module.exports = {
-  extends: [
-    "plugin:@wordpress/eslint-plugin/recommended",
-    "plugin:react/recommended",
-    "plugin:import/errors",
-    "plugin:import/warnings",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
-  ],
-  env: {
-    browser: true,
-    jest: true,
-  },
-  parser: "@typescript-eslint/parser",
-  plugins: ["@typescript-eslint"],
-  settings: {
-    "import/resolver": {
-      node: {
-        extensions: [".js", ".jsx", ".ts", ".tsx"],
-      },
-    },
-  },
-  ignorePatterns: ["dist/", "node_modules/"],
-  parser: "@typescript-eslint/parser",
-  rules: {
-    "no-console": "off",
-    camelcase: "off",
-    // Some dependencies are injected by WP, and should not be declared in package.json (won't be used anyway).
-    // See https://github.com/WordPress/gutenberg/blob/e035f71/packages/dependency-extraction-webpack-plugin/README.md#behavior-with-scripts
-    // Unfortunately there's no "ignore" option for this rule, so it's disabled altogether.
-    "import/no-extraneous-dependencies": "off",
-    "import/no-unresolved": ["error", { ignore: GLOBALLY_AVAILABLE_PACKAGES }],
-    // There's a conflict with prettier here:
-    "react/jsx-curly-spacing": "off",
-    // Skip prop types validation for now
-    "react/prop-types": "off",
-    "react/react-in-jsx-scope": "off",
-    "react/self-closing-comp": "error",
-    // JSDoc rules overrides
-    "jsdoc/require-returns": "off",
-    "jsdoc/require-param": "off",
-    // Deprecated rules
-    "jsx-a11y/no-onchange": "off",
-    // For TypeScript type declarations.
-    camelcase: "off",
-    "@typescript-eslint/no-empty-function": "off",
-    // Fail on unused vars.
-    "@typescript-eslint/no-unused-vars": "error",
-    // Disallow logging.
-    "no-console": "error",
-    // Handle the issue where no-shadow is a false positive when declaring TS enums.
-    // See https://github.com/typescript-eslint/typescript-eslint/issues/2483
-    "no-shadow": "off",
-    "@typescript-eslint/no-shadow": "error",
-  },
+	extends: [
+		'plugin:import/errors',
+		'plugin:import/warnings',
+		'plugin:@typescript-eslint/eslint-recommended',
+		'plugin:@typescript-eslint/recommended',
+		wpRecommended,
+		reactRecommended,
+	],
+	env: {
+		browser: true,
+		jest: true,
+	},
+	parser: '@typescript-eslint/parser',
+	plugins: [ '@typescript-eslint' ],
+	settings: {
+		'import/resolver': {
+			node: {
+				extensions: [ '.js', '.jsx', '.ts', '.tsx' ],
+			},
+		},
+	},
+	ignorePatterns: [ 'dist/', 'node_modules/', 'scripts/' ],
+	parser: '@typescript-eslint/parser',
+	rules: {
+		'arrow-parens': 'off',
+		camelcase: 'off',
+		'no-console': 'off',
+		'no-mixed-operators': 'off',
+		'space-before-function-paren': 'off',
+		'wrap-iife': 'off',
+		// Some dependencies are injected by WP, and should not be declared in package.json (won't be used anyway).
+		// See https://github.com/WordPress/gutenberg/blob/e035f71/packages/dependency-extraction-webpack-plugin/README.md#behavior-with-scripts
+		// Unfortunately there's no "ignore" option for this rule, so it's disabled altogether.
+		'import/no-extraneous-dependencies': 'off',
+		'import/no-unresolved': [ 'error', { ignore: GLOBALLY_AVAILABLE_PACKAGES } ],
+		'import/namespace': 'off',
+		// There's a conflict with prettier here:
+		'react/jsx-curly-spacing': 'off',
+		// Skip prop types validation for now
+		'react/prop-types': 'off',
+		'react/react-in-jsx-scope': 'off',
+		'react/self-closing-comp': 'error',
+		'react-hooks/exhaustive-deps': 'off',
+		// JSDoc rules overrides
+		'jsdoc/require-returns': 'off',
+		'jsdoc/require-param': 'off',
+		// Deprecated rules
+		'jsx-a11y/no-onchange': 'off',
+		'@typescript-eslint/no-empty-function': 'off',
+		// Fail on unused vars.
+		'@typescript-eslint/no-unused-vars': 'error',
+		// Disallow logging.
+		'no-console': 'error',
+		// Handle the issue where no-shadow is a false positive when declaring TS enums.
+		// See https://github.com/typescript-eslint/typescript-eslint/issues/2483
+		'no-shadow': 'off',
+		'@typescript-eslint/no-shadow': 'error',
+		'@typescript-eslint/ban-ts-comment': 'warn',
+		'@typescript-eslint/no-explicit-any': 'warn',
+	},
 };

package/config/getWebpackConfig.js

@@ -1,27 +1,25 @@
-const path = require("path");
+const path = require( 'path' );
+require( '@wordpress/browserslist-config' );
+const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
 
-const getWebpackConfig = require("@automattic/calypso-build/webpack.config.js");
+module.exports = ( ...args ) => {
+	let config = { ...defaultConfig };
 
-module.exports = (...args) => {
-  const config = getWebpackConfig(...args);
+	// Merge config extensions into default config.
+	args.forEach( extension => {
+		config = { ...config, ...extension };
+	} );
 
-  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;
+	// Ensure that webpack resolves modules from the Newspack Scripts node_modules as well as the root repo's node_modules.
+	config.resolve.modules = [
+		path.resolve( __dirname, '../node_modules' ),
+		'node_modules',
+	];
+
+	// Clear cacheGroups so that CSS files don't get the `style-` prefix.
+	if ( config?.optimization?.splitChunks?.cacheGroups?.style ) {
+		delete config.optimization.splitChunks.cacheGroups.style;
+	}
+
+	return config;
 };

package/config/postcss.config.js

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

package/config/stylelint.config.js

@@ -1,30 +1,32 @@
 module.exports = {
-  extends: ["stylelint-config-standard"],
-  rules: {
-    "rule-empty-line-before": null,
-    "at-rule-empty-line-before": null,
-    "comment-empty-line-before": null,
-    "no-descending-specificity": null,
-    "function-url-quotes": null,
-    "font-weight-notation": null,
-    "color-named": null,
-    "selector-class-pattern": null,
-    "custom-property-pattern": null,
-    "at-rule-no-unknown": null,
-    "alpha-value-notation": null,
-    "color-function-notation": null,
-    "selector-not-notation": null,
-    "function-no-unknown": [
-      true,
-      {
-        ignoreFunctions: ["/color/"],
-      },
-    ],
-    "annotation-no-unknown": [
-      true,
-      {
-        ignoreAnnotations: ["/default/"],
-      },
-    ],
-  },
+	extends: [ 'stylelint-config-standard' ],
+	rules: {
+		'rule-empty-line-before': null,
+		'at-rule-empty-line-before': null,
+		'comment-empty-line-before': null,
+		'no-descending-specificity': null,
+		'function-url-quotes': null,
+		'font-weight-notation': null,
+		'color-named': null,
+		'selector-class-pattern': null,
+		'custom-property-pattern': null,
+		'at-rule-no-unknown': null,
+		'alpha-value-notation': null,
+		'color-function-notation': null,
+		'selector-not-notation': null,
+		'function-no-unknown': [
+			true,
+			{
+				ignoreFunctions: [ '/color/' ],
+			},
+		],
+		'annotation-no-unknown': [
+			true,
+			{
+				ignoreAnnotations: [ '/default/' ],
+			},
+		],
+		'media-query-no-invalid': null,
+		'media-feature-range-notation': null,
+	},
 };

package/config/tsconfig.json

@@ -1,21 +1,25 @@
 {
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "compilerOptions": {
-    "noEmit": true,
-    "composite": true,
-    "noEmitHelpers": true,
-    "skipLibCheck": true,
-    "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "target": "es6",
-    "module": "ESNext",
-    "esModuleInterop": true,
-    "jsx": "react-jsx",
-    "strict": true,
-    "isolatedModules": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "forceConsistentCasingInFileNames": true,
-    "allowJs": true,
-    "checkJs": false
-  }
-}
+	"$schema": "https://json.schemastore.org/tsconfig",
+	"compilerOptions": {
+		"noEmit": true,
+		"composite": true,
+		"noEmitHelpers": true,
+		"skipLibCheck": true,
+		"lib": [
+			"ESNext",
+			"DOM",
+			"DOM.Iterable"
+		],
+		"target": "es6",
+		"module": "ESNext",
+		"esModuleInterop": true,
+		"jsx": "react-jsx",
+		"strict": true,
+		"isolatedModules": true,
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"forceConsistentCasingInFileNames": true,
+		"allowJs": true,
+		"checkJs": false
+	}
+}