@lipemat/js-boilerplate 10.3.0-beta.3 → 10.3.0-beta.6

package/config/babel.config.js

@@ -3,7 +3,7 @@ const {getBrowsersList} = require( '../helpers/config' );
 const presetEnv = {
 	bugfixes: true,
 	corejs: {
-		version: '3.31',
+		version: '3.30',
 	},
 	shippedProposals: true,
 	targets: {

package/config/postcss.config.js

@@ -29,24 +29,25 @@ const presetEnv = {
 };
 
 /**
- * If a media-queries files exist, automatically load them.
+ * Provide CSS properties and media queries to all postcss plugins.
  *
- * 1. pcss/globals/media-queries.pcss
- * 2. js/src/pcss/media-queries.pcss
+ * If a media-queries files exist, automatically load them.
+ * If CSS variables exist, automatically load them.
  *
- * @notice `@import` will not work inside the media-queries file so
- *          there is no point in having a JS version if all it does is
- *          import from the global pcss version.
+ * 1. pcss/globals/variables.pcss
+ * 2. js/src/pcss/variables.pcss
+ * 3. pcss/globals/media-queries.pcss
+ * 4. js/src/pcss/media-queries.pcss
  */
-const customMedia = {
-	importFrom: [],
-};
+const externalFiles = [];
 [
 	path.resolve( packageConfig.packageDirectory, 'pcss/globals/media-queries.pcss' ),
+	path.resolve( packageConfig.packageDirectory, 'pcss/globals/variables.pcss' ),
 	path.resolve( packageConfig.workingDirectory, 'src/pcss/media-queries.pcss' ),
+	path.resolve( packageConfig.workingDirectory, 'src/pcss/variables.pcss' ),
 ].forEach( possibleFile => {
 	if ( fs.existsSync( possibleFile ) ) {
-		customMedia.importFrom.push( possibleFile );
+		externalFiles.push( possibleFile );
 	}
 } );
 
@@ -56,10 +57,13 @@ const customMedia = {
  */
 const config = {
 	plugins: [
+		require( '@csstools/postcss-global-data' )( {
+			files: externalFiles,
+		} ),
 		require( 'postcss-import' )( {
 			skipDuplicates: false,
 		} ),
-		require( 'postcss-custom-media' )( customMedia ),
+		require( 'postcss-custom-media' ),
 		require( 'postcss-nested' ),
 		postcssPresetEnv( presetEnv ),
 		require( 'postcss-color-mod-function' ),

package/helpers/config.js

@@ -141,10 +141,7 @@ function getTsConfigFile() {
 function getBrowsersList() {
 	const projectBrowsersList = browserslist();
 	if ( browserslist( browserslist.defaults ) === projectBrowsersList ) {
-		return require( '@wordpress/browserslist-config' ).map( range => {
-			// Swap out "> 1%" for "> 2%".
-			return '> 1%' === range ? '> 2%' : range;
-		} );
+		return require( '@wordpress/browserslist-config' );
 	}
 	return projectBrowsersList;
 }
@@ -159,23 +156,13 @@ function getBrowsersList() {
  * Used in cases where we can fall back to standard browserslist config if the project
  * has not specified one.
  *
- * @deprecated Use getBrowsersList instead.
- *
  * @link https://github.com/browserslist/browserslist#config-file
  *
  * @return {boolean | string[]}
  */
 const getDefaultBrowsersList = once( () => {
-	// JEST requires the default browsers list for JSDOM to work.
-	if ( typeof global.__TEST__ !== 'undefined' && global.__TEST__ ) {
-		return false;
-	}
-
 	if ( browserslist( browserslist.defaults ) === browserslist() ) {
-		return require( '@wordpress/browserslist-config' ).map( range => {
-			// Swap out "> 1%" for "> 2%".
-			return '> 1%' === range ? '> 2%' : range;
-		} );
+		return require( '@wordpress/browserslist-config' );
 	}
 	return false;
 } );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lipemat/js-boilerplate",
-  "version": "10.3.0-beta.3",
+  "version": "10.3.0-beta.6",
   "description": "Dependencies and scripts for a no config JavaScript app",
   "author": "Mat Lipe",
   "license": "MIT",
@@ -42,18 +42,19 @@
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
+    "@csstools/postcss-global-data": "^2.0.0",
     "@lipemat/css-mqpacker": "^9.0.0",
     "@lipemat/eslint-config": "^3.0.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@wordpress/browserslist-config": "^5.19.0",
     "are-you-es5": "^2.1.1",
     "babel-jest": "^29.0.0",
-    "babel-loader": "^9.1.2",
-    "browserslist": "^4.17.0",
+    "babel-loader": "9.1.2",
+    "browserslist": "^4.21.9",
     "clean-css": "^5.3.0",
     "clean-webpack-plugin": "^4.0.0",
     "compression-webpack-plugin": "^10.0.0",
-    "core-js": "^3.31.1",
+    "core-js": "~3.30.2",
     "cross-spawn": "^6.0.5",
     "css-loader": "6.7.1",
     "fork-ts-checker-webpack-plugin": "^7.2.13",

package/scripts/browserslist.js

@@ -1,5 +1,6 @@
 const browserslist = require( 'browserslist' );
-const {getBrowsersList} = require( '../helpers/config' );
+const {getDefaultBrowsersList} = require( '../helpers/config' );
+const path = require( 'path' );
 
 const help = `
 	List browsers being targeted by Babel and PostCSS.
@@ -18,7 +19,9 @@ if ( args[ 0 ] && ( '-h' === args[ 0 ] || '--help' === args[ 0 ] ) ) {
 }
 
 
-const provided = getBrowsersList();
+const provided = getDefaultBrowsersList() || browserslist.loadConfig( {
+	path: path.resolve( '.' ),
+} );
 
 console.log( '' );
 console.log( 'JS Provided Browserslist' );