Merge pull request #235 from salsify/postcss-8

Author: dfreeman

CHANGELOG.md

@@ -1,3 +1,18 @@
+## Unreleased
+### Added
+- We now support a wider range of dependencies that includes PostCSS 8 out of the box. Depending on your package manager, you'll likely see this upgrade take effect automatically when you update ECM, and you may see deprecation warnings for any older PostCSS plugins you're using.
+
+### Upgrade Notes
+If you're using older PostCSS plugins or an older Node version and wish to continue using PostCSS 7, the appropriate dependency versions are still in range for ECM, and we still run tests against them. The easiest way to lock to those versions locally is likely with `resolutions` entries, which you can see [an example of](test-packages/old-app/package.json) in `test-package/old-app`.
+
+```json
+  "resolutions": {
+    "ember-css-modules/broccoli-css-modules": "^0.7.0",
+    "ember-css-modules/broccoli-postcss": "^4.0.3",
+    "ember-css-modules/postcss": "^7.0.35"
+  },
+```
+
 ## 1.3.4 (February 2, 2021)
 ### Fixed
 - Ensure styles from addons that define a custom `moduleName` use correct import paths ([#220](https://github.com/salsify/ember-css-modules/pull/220); thank you [@timlindvall](https://github.com/timlindvall)!)

packages/ember-css-modules/lib/make-postcss-plugin.js

@@ -0,0 +1,18 @@
+const semver = require('semver');
+const postcssVersion = require('postcss/package.json').version;
+
+if (semver.lt(postcssVersion, '8.0.0')) {
+  module.exports = require('postcss').plugin;
+} else {
+  module.exports = function(name, callback) {
+    let plugin = (options = {}) => {
+      let handler = callback(options);
+      return {
+        postcssPlugin: name,
+        Once: handler
+      };
+    };
+    plugin.postcss = true;
+    return plugin;
+  };
+}

packages/ember-css-modules/lib/modules-preprocessor.js

@@ -194,7 +194,7 @@ module.exports = class ModulesPreprocessor {
   }
 
   rootPathPlugin() {
-    return require('postcss').plugin('root-path-tag', () => (css) => {
+    return require('./make-postcss-plugin')('root-path-tag', () => (css) => {
       css.source.input.rootPath = this._modulesTree.inputPaths[0];
     });
   }

packages/ember-css-modules/lib/output-styles-preprocessor.js

@@ -31,7 +31,8 @@ module.exports = class OutputStylesPreprocessor {
       debug('running postprocess plugins: %o', postprocessPlugins);
 
       concat = new PostCSS(concat, {
-        plugins: postprocessPlugins
+        plugins: postprocessPlugins,
+        exclude: ['**/*.map']
       });
     }
 

packages/ember-css-modules/lib/postcss-module-order-directive.js

@@ -1,10 +1,10 @@
 'use strict';
 
-const postcss = require('postcss');
 const ensurePosixPath = require('ensure-posix-path');
+const makePostCSSPlugin = require('./make-postcss-plugin');
 
 // Report all discovered @after-module rules in a module and strip them out of the source
-module.exports = postcss.plugin('ember-css-modules-ordering', (options) => {
+module.exports = makePostCSSPlugin('ember-css-modules-ordering', (options) => {
   return (css) => {
     let dependencies = [];
     let input = css.source.input;

packages/ember-css-modules/package.json

@@ -51,7 +51,7 @@
     "eslint-plugin-ember": "^5.2.0",
     "eslint-plugin-node": "^7.0.1",
     "loader.js": "^4.7.0",
-    "postcss-color-rebeccapurple": "^3.0.0",
+    "postcss-color-rebeccapurple": "^6.0.0",
     "qunit-dom": "^0.7.1",
     "qunitjs": "^2.4.1",
     "sinon": "^4.3.0",
@@ -71,10 +71,10 @@
   "dependencies": {
     "broccoli-bridge": "^1.0.0",
     "broccoli-concat": "^3.2.2",
-    "broccoli-css-modules": "^0.7.0",
+    "broccoli-css-modules": "^0.7.0 || ^0.8.0",
     "broccoli-funnel": "^2.0.1",
     "broccoli-merge-trees": "^2.0.0",
-    "broccoli-postcss": "^4.0.1",
+    "broccoli-postcss": "^4.0.1 || ^5.0.0 || ^6.0.0",
     "calculate-cache-key-for-tree": "^1.1.0",
     "debug": "^3.1.0",
     "ember-cli-babel": "^7.7.3",
@@ -83,7 +83,7 @@
     "ensure-posix-path": "^1.0.2",
     "hash-string": "^1.0.0",
     "lodash.merge": "^4.6.1",
-    "postcss": "^6.0.19",
+    "postcss": "^7.0.35 || ^8.0.0",
     "semver": "^5.5.0",
     "toposort": "^1.0.6"
   },

packages/ember-css-modules/tests/dummy/app/styles/testing/ordering/x.css

@@ -1,4 +1,4 @@
-@value z from './z';
-@value x: 'x';
+@value zValue from './z';
+@value xValue: 'x';
 
 .x {}

packages/ember-css-modules/tests/dummy/app/styles/testing/ordering/y.css

@@ -1,4 +1,4 @@
-@value x from './x';
-@value z from './z';
+@value xValue from './x';
+@value zValue from './z';
 
 .y {}

packages/ember-css-modules/tests/dummy/app/styles/testing/ordering/z.css

@@ -1,3 +1,3 @@
-@value z: 'z';
+@value zValue: 'z';
 
 .z {}

test-packages/old-app/README.md

@@ -5,6 +5,9 @@ This test package contains an app set up with the oldest ecosystem components we
  - `ember-cli-babel@6`
  - `[email protected]`
  - `@ember-decorators/babel-transforms@2`
+ - `[email protected]`
+ - `broccoli-postcss@4`
+ - `postcss@7`
 
 Additionally, the test suite for this app is run under Node 6, as that's the oldest Node version we currently support.
 Because of that, it's not part of the yarn workspaces setup at the root of this repo, as many other transitive (development) dependencies have dropped support for older Node versions.