@lipemat/js-boilerplate 8.6.0-beta.5 → 8.6.0

package/config/postcss.config.js

@@ -1,24 +1,7 @@
 const postcssPresetEnv = require( 'postcss-preset-env' );
-const packageConfig = require( '../helpers/package-config' );
-const path = require( 'path' );
-const fs = require( 'fs' );
 const {getDefaultBrowsersList} = require( '../helpers/config' );
 
-/**
- * Files containing CSS properties to be provided to `postcss-preset-env`.
- * Allows rendering the values in the finished CSS for IE11.
- *
- * If none of the CSS files exist, or properties are not provided in them,
- * the variable won't work in IE11.
- *
- * @link https://github.com/csstools/postcss-preset-env#importfrom
- */
 const presetEnv = {
-	importFrom: [
-		path.resolve( packageConfig.workingDirectory, 'src/globals/pcss/variables.css' ),
-		path.resolve( packageConfig.workingDirectory, '../pcss/globals/variables.css' ),
-	].filter( filePath => fs.existsSync( filePath ) ),
-
 	features: {
 		/**
 		 * Fixes `focus-visible` feature for CSS modules (included by preset-env anywhere
@@ -42,8 +25,7 @@ const presetEnv = {
 };
 
 /**
- * If browserslist is not specified, we fallback to WordPress defaults
- * except for IE11 which we don't support by default.
+ * If browserslist is not specified, we fallback to WordPress defaults.
  *
  * @link https://github.com/csstools/postcss-preset-env#browsers
  */

package/config/webpack.dev.js

@@ -5,7 +5,7 @@ const fs = require( 'fs' );
 const ForkTsCheckerWebpackPlugin = require( 'fork-ts-checker-webpack-plugin' );
 const config = require( '../helpers/package-config' );
 
-const postCSSOptions = getConfig( 'postcss.config.js' );
+const postcssOptions = getConfig( 'postcss.config.js' );
 const babelOptions = getConfig( 'babel.config.js' );
 const cssLoaderOptions = getConfig( 'css-loader.config.js' );
 
@@ -97,8 +97,10 @@ module.exports = {
 						options: cssLoaderOptions,
 					},
 					{
-						loader: '@lipemat/postcss-loader',
-						options: postCSSOptions,
+						loader: 'postcss-loader',
+						options: {
+							postcssOptions,
+						},
 					},
 				],
 			},

package/config/webpack.dist.js

@@ -9,7 +9,7 @@ const WebpackAssetsManifest = require( 'webpack-assets-manifest' );
 const SriPlugin = require( 'webpack-subresource-integrity' );
 const config = require( '../helpers/package-config' );
 
-const postCSSOptions = getConfig( 'postcss.config.js' );
+const postcssOptions = getConfig( 'postcss.config.js' );
 const babelOptions = getConfig( 'babel.config.js' );
 const cssLoaderOptions = getConfig( 'css-loader.config.js' );
 
@@ -105,8 +105,10 @@ module.exports = {
 						options: cssLoaderOptions,
 					},
 					{
-						loader: '@lipemat/postcss-loader',
-						options: postCSSOptions,
+						loader: 'postcss-loader',
+						options: {
+							postcssOptions,
+						},
 					},
 				],
 			},

package/lib/postcss-clean.js

@@ -3,13 +3,12 @@
 /**
  * Mimic the postcss-clean plugin.
  *
- * Override due to the plugin using version 4 of clean-css which
- * has issues with PostCSS 7 and results in inconstant CSS.
+ * Override due to the plugin using version 4 of clean-css, which
+ * has issues with PostCSS 7/8 and results in inconstant CSS.
  *
  * This may potentially be removed in favor of using that plugin again if
- * they change the version of PostCSS to 7 and Clean CSS to 5.
- * We've already tested using those versions and it works, just need the
- * maintainer to bump the versions.
+ * they change the version of PostCSS to 8 and Clean CSS to 5.
+ *
  * Decided to use this `lib` instead of maintaining another fork.
  *
  * @link https://www.npmjs.com/package/postcss-clean
@@ -18,25 +17,28 @@
 const postcss = require( 'postcss' );
 const CleanCss = require( 'clean-css' );
 
-const initializer = ( opts = {} ) => {
-	const cleancss = new CleanCss( opts );
+module.exports = ( opts = {} ) => {
+	const clean = new CleanCss( opts );
 
-	return ( css, res ) => {
-		return new Promise( ( resolve, reject ) => {
-			cleancss.minify( css.toString(), ( err, min ) => {
-				if ( err ) {
-					return reject( new Error( err.join( '\n' ) ) );
-				}
+	return {
+		postcssPlugin: 'clean',
+		OnceExit( css, {result} ) {
+			return new Promise( ( resolve, reject ) => {
+				clean.minify( css.toString(), ( err, min ) => {
+					if ( err ) {
+						return reject( new Error( err.join( '\n' ) ) );
+					}
 
-				for ( const w of min.warnings ) {
-					res.warn( w );
-				}
+					if ( min.warnings.length > 0 ) {
+						return reject( new Error( 'postcss-clean minify failed! \n' + min.warnings.join( '\n' ) ) );
+					}
 
-				res.root = postcss.parse( min.styles );
-				resolve();
+					result.root = postcss.parse( min.styles );
+					resolve();
+				} );
 			} );
-		} );
+		},
 	};
 };
 
-module.exports = postcss.plugin( 'clean', initializer );
+module.exports.postcss = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lipemat/js-boilerplate",
-  "version": "8.6.0-beta.5",
+  "version": "8.6.0",
   "description": "Dependencies and scripts for a no config JavaScript app",
   "author": "Mat Lipe",
   "license": "MIT",
@@ -43,9 +43,8 @@
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@hot-loader/react-dom": "^17.0.1",
-    "@lipemat/css-mqpacker": "^8.0.1",
+    "@lipemat/css-mqpacker": "^9.0.0-beta.2",
     "@lipemat/eslint-config": "^2.0.1",
-    "@lipemat/postcss-loader": "^3.1.2",
     "@lipemat/webpack-cleanup-plugin": "^1.0.0",
     "@types/lipemat__js-boilerplate": "lipemat/types-js-boilerplate#semver:^1.3.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
@@ -54,10 +53,10 @@
     "babel-jest": "^24.7.1",
     "babel-loader": "^8.2.2",
     "browserslist": "^4.17.0",
-    "clean-css": "^5.2.1",
+    "clean-css": "^5.3.0",
     "core-js": "^3.8.3",
     "cross-spawn": "^6.0.5",
-    "css-loader": "6.4.0",
+    "css-loader": "6.7.1",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.5.0",
     "fork-ts-checker-webpack-plugin": "^6.0.7",
@@ -67,26 +66,27 @@
     "jest-cli": "^26.6.3",
     "lodash": "^4.17.19",
     "mini-css-extract-plugin": "^1.3.3",
-    "postcss": "^7.0.14",
+    "postcss": "^8.4.13",
     "postcss-color-mod-function": "^3.0.3",
-    "postcss-custom-media": "^6.0.0",
-    "postcss-import": "^12.0.1",
-    "postcss-nested": "^4.1.2",
-    "postcss-preset-env": "^6.6.0",
-    "postcss-scss": "^2.0.0",
+    "postcss-custom-media": "^8.0.1",
+    "postcss-import": "^14.1.0",
+    "postcss-loader": "^6.2.1",
+    "postcss-nested": "^5.0.6",
+    "postcss-preset-env": "^7.5.0",
+    "postcss-scss": "^4.0.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-hot-loader": "^4.8.3",
     "react-test-renderer": "^17.0.2",
     "react-transition-group": "^4.4.1",
-    "style-loader": "^3.2.1",
+    "style-loader": "^3.3.1",
     "typescript": "^4.2.4",
     "update-notifier": "^4.1.3",
-    "webpack": "^5.65.0",
+    "webpack": "^5.72.1",
     "webpack-assets-manifest": "^5.0.6",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.7.2",
     "webpack-subresource-integrity": "^1.5.2"
   },
-  "packageManager": "yarn@3.2.0"
+  "packageManager": "yarn@3.2.1"
 }