Support for PostCSS@7.

ckeditor · Oct 14, 2021 · a3174e6 · a3174e6
1 parent 69a4c00
commit a3174e6
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 34 deletions.
diff --git a/packages/ckeditor5-dev-utils/lib/styles/themeimporter.js b/packages/ckeditor5-dev-utils/lib/styles/themeimporter.js
@@ -9,11 +9,17 @@
 
 const fs = require( 'fs' );
 const path = require( 'path' );
-const postcss = require( 'postcss' );
+
 const chalk = require( 'chalk' );
+const semver = require( 'semver' );
 const log = require( '../logger' )();
 const getPackageName = require( './utils/getpackagename' );
 
+const { version: postcssVersion } = require( 'postcss/package.json' );
+const postcss = require( 'postcss' );
+
+const PLUGIN_NAME = 'postcss-ckeditor5-theme-importer';
+
 /**
  * A PostCSS plugin that loads a theme files from specified path.
  *
@@ -39,32 +45,43 @@ const getPackageName = require( './utils/getpackagename' );
  * [documentation](http://api.postcss.org/postcss.html#.plugin) of the project.
  *
  * @param {ThemeImporterOptions} pluginOptions
- * @returns {Object} A PostCSS plugin.
+ * @returns {Function|Object} A PostCSS plugin.
  */
-module.exports = ( pluginOptions = {} ) => {
-	return {
-		postcssPlugin: 'postcss-ckeditor5-theme-importer',
-		Once( root, { result } ) {
-			// Clone the options, don't alter the original options object.
-			const options = Object.assign( {}, pluginOptions, {
-				debug: pluginOptions.debug || false,
-				postCssOptions: {
-					plugins: [
-						require( 'postcss-import' )(),
-						require( 'postcss-mixins' )(),
-						require( 'postcss-nesting' )(),
-						require( './themelogger' )()
-					]
-				},
-				root, result
-			} );
-
-			return importThemeFile( options );
-		}
+// PostCSS 8+.
+if ( semver.gte( postcssVersion, '8.0.0' ) ) {
+	module.exports = ( pluginOptions = {} ) => {
+		return {
+			postcssPlugin: PLUGIN_NAME,
+			Once( root, { result } ) {
+				return themeImporterPlugin( pluginOptions, root, result );
+			}
+		};
 	};
-};
 
-module.exports.postcss = true;
+	module.exports.postcss = true;
+}
+// PostCSS <8.
+else {
+	module.exports = postcss.plugin( PLUGIN_NAME, ( pluginOptions = {} ) => {
+		return ( root, result ) => themeImporterPlugin( pluginOptions, root, result );
+	} );
+}
+
+function themeImporterPlugin( pluginOptions, root, result ) {
+	// Clone the options, don't alter the original options object.
+	const options = Object.assign( {}, pluginOptions, {
+		debug: pluginOptions.debug || false,
+		postCssOptions: {
+			plugins: [
+				require( 'postcss-import' )(),
+				require( './themelogger' )()
+			]
+		},
+		root, result
+	} );
+
+	return importThemeFile( options );
+}
 
 // Imports a complementary theme file corresponding with a CSS file being processed by
 // PostCSS, if such theme file exists.

diff --git a/packages/ckeditor5-dev-utils/lib/styles/themelogger.js b/packages/ckeditor5-dev-utils/lib/styles/themelogger.js
@@ -7,19 +7,38 @@
 
 /* eslint-env node */
 
+const semver = require( 'semver' );
+const postcss = require( 'postcss' );
+const { version: postcssVersion } = require( 'postcss/package.json' );
+
+const PLUGIN_NAME = 'postcss-ckeditor5-theme-logger';
+
 /**
  * A plugin that prepends a path to the file in the comment for each file
  * processed by PostCSS.
  *
- * @returns {Object} A PostCSS plugin.
+ * @returns {Function|Object} A PostCSS plugin.
  */
-module.exports = () => {
-	return {
-		postcssPlugin: 'postcss-ckeditor5-theme-logger',
-		Once( root ) {
-			return root.prepend( `/* ${ root.source.input.file } */ \n` );
-		}
+// PostCSS 8+.
+if ( semver.gte( postcssVersion, '8.0.0' ) ) {
+	module.exports = () => {
+		return {
+			postcssPlugin: PLUGIN_NAME,
+			Once( root ) {
+				return themeLoggerPlugin( root );
+			}
+		};
 	};
-};
 
-module.exports.postcss = true;
+	module.exports.postcss = true;
+}
+// PostCSS <8.
+else {
+	module.exports = postcss.plugin( PLUGIN_NAME, () => {
+		return root => themeLoggerPlugin( root );
+	} );
+}
+
+function themeLoggerPlugin( root ) {
+	return root.prepend( `/* ${ root.source.input.file } */\n` );
+}
diff --git a/packages/ckeditor5-dev-utils/package.json b/packages/ckeditor5-dev-utils/package.json
@@ -15,12 +15,12 @@
     "fs-extra": "^8.1.0",
     "javascript-stringify": "^1.6.0",
     "pofile": "^1.0.9",
-    "postcss": "^8.3.9",
     "postcss-import": "^14.0.2",
     "postcss-loader": "^4.3.0",
     "postcss-mixins": "^8.1.0",
     "postcss-nesting": "^8.0.1",
     "raw-loader": "^4.0.2",
+    "semver": "^7.3.5",
     "shelljs": "^0.8.1",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^5.2.4",
@@ -35,6 +35,9 @@
     "sinon": "^7.3.2",
     "vinyl": "^2.1.0"
   },
+  "peerDependencies": {
+    "postcss": "^7.0.0 || ^8.0.0"
+  },
   "engines": {
     "node": ">=12.0.0",
     "npm": ">=5.7.1"