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

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

@@ -159,8 +159,6 @@ 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[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lipemat/js-boilerplate",
-  "version": "10.3.0-beta.3",
+  "version": "10.3.0-beta.4",
   "description": "Dependencies and scripts for a no config JavaScript app",
   "author": "Mat Lipe",
   "license": "MIT",
@@ -42,6 +42,7 @@
     "@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",

package/scripts/browserslist.js

@@ -1,5 +1,6 @@
 const browserslist = require( 'browserslist' );
-const {getBrowsersList} = require( '../helpers/config' );
+const {getBrowsersList, 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' );