ember-css-modules 1.3.3 → 1.6.0

package/addon/mixins/component-mixin.js

@@ -4,7 +4,7 @@ import { computed, defineProperty } from '@ember/object';
 import Mixin from '@ember/object/mixin';
 import { dasherize } from '@ember/string';
 import { getOwner } from '@ember/application';
-import { assert } from '@ember/debug';
+import { assert, deprecate } from '@ember/debug';
 
 export default Mixin.create({
   localClassNames: null,
@@ -42,6 +42,22 @@ export default Mixin.create({
       layout
     );
 
+    deprecate(
+      'Support for `localClassNames`, `localClassNameBindings` and the `@localClassName` and `@localClassNames` ' +
+      'decorators will be removed in the next major release of ember-css-modules. The `' + name + '` component ' +
+      'uses one or more of these APIs. See the ECM 1.5.0 release notes for further details and migration options: ' +
+      'https://github.com/salsify/ember-css-modules/releases/tag/v1.5.0',
+      false,
+      {
+        id: 'ember-css-modules.classic-component-apis',
+        for: 'ember-css-modules',
+        until: '2.0.0',
+        since: {
+          enabled: '1.5.0'
+        }
+      }
+    );
+
     // Since https://github.com/emberjs/ember.js/pull/18096
     if (typeof layout === 'function') layout = layout(getOwner(this));
 

package/index.js

@@ -43,7 +43,13 @@ module.exports = {
 
   treeForAddon() {
     let addonTree = this._super.treeForAddon.apply(this, arguments);
-    return new MergeTrees([addonTree, `${__dirname}/vendor`]);
+
+    // Allow to opt-out from automatic Component.reopen()
+    if (this.cssModulesOptions.patchClassicComponent !== false) {
+      return new MergeTrees([addonTree, `${__dirname}/vendor`]);
+    } else {
+      return addonTree;
+    }
   },
 
   cacheKeyForTree(treeType) {

package/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;
+  };
+}

package/lib/modules-preprocessor.js

@@ -15,6 +15,19 @@ module.exports = class ModulesPreprocessor {
     this._modulesTree = null;
     this._modulesBasePath = null;
     this._modulesBridge = new Bridge();
+
+    /*
+     * The addon name we should use to look up modules.
+     * Uses moduleName if defined, else uses the parent/package name.
+     */
+    this._ownerName = null;
+
+    /*
+     * The parent/package name. This is used as a fallback to look up
+     * paths that may reference the package name instead of the
+     * module name. (See resolve-path.js)
+     */
+    this._parentName = null;
   }
 
   toTree(inputTree, path) {
@@ -37,10 +50,17 @@ module.exports = class ModulesPreprocessor {
         });
       }
 
+      // If moduleName is defined, that should override the parent's name.
+      // Otherwise, the template and generated module will disagree as to what the path should be.
+      let ownerParent = this.owner.getParent();
+      this._parentName = this.owner.getParentName();
+      let ownerName = ownerParent.moduleName ? ownerParent.moduleName() : this._parentName;
+      this._ownerName = ownerName;
+
       let modulesSources = new ModuleSourceFunnel(inputRoot, modulesInput, {
         include: ['**/*.' + this.owner.getFileExtension()],
         outputRoot,
-        parentName: this.owner.getParentName()
+        parentName: ownerName,
       });
 
       let modulesTree = new (require('broccoli-css-modules'))(modulesSources, {
@@ -174,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];
     });
   }
@@ -184,10 +204,12 @@ module.exports = class ModulesPreprocessor {
 
     return this._resolvePath(importPath, fromFile, {
       defaultExtension: this.owner.getFileExtension(),
-      ownerName: this.owner.getParentName(),
+      ownerName: this._ownerName,
+      parentName: this._parentName,
       addonModulesRoot: this.owner.getAddonModulesRoot(),
       root: ensurePosixPath(this._modulesTree.inputPaths[0]),
-      parent: this.owner.getParent()
+      parent: this.owner.getParent(),
+      ui: this.owner.ui
     });
   }
 };

package/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']
       });
     }
 

package/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;

package/lib/resolve-path.js

@@ -10,6 +10,16 @@ module.exports = function resolvePath(importPath, fromFile, options) {
     return resolveRelativePath(pathWithExtension, fromFile, options);
   } else if (isLocalPath(pathWithExtension, options)) {
     return resolveLocalPath(pathWithExtension, fromFile, options);
+  } else if (isLocalPathWithOldPackageNameRef(pathWithExtension, options)) {
+    const amendedPathWithExtension = pathWithExtension.replace(options.parentName, options.ownerName);
+    options.ui.writeWarnLine(
+      'For addons that define a moduleName, you should reference any CSS Modules provided by that addon ' +
+      'using its moduleName instead of the package name.\n' +
+      'Current path: ' + importPath + '\n' +
+      'Replace with: ' + importPath.replace(options.parentName, options.ownerName) + '\n' +
+      'File: ' + fromFile
+    );
+    return resolveLocalPath(amendedPathWithExtension, fromFile, options);
   } else {
     return resolveExternalPath(pathWithExtension, importPath, fromFile, options);
   }
@@ -23,6 +33,10 @@ function isLocalPath(importPath, options) {
   return importPath.indexOf(options.ownerName + '/') === 0;
 }
 
+function isLocalPathWithOldPackageNameRef(importPath, options) {
+  return (options.ownerName !== options.parentName) && importPath.indexOf(options.parentName + '/') === 0;
+}
+
 function resolveRelativePath(importPath, fromFile, options) {
   let absolutePath = ensurePosixPath(path.resolve(path.dirname(fromFile), importPath));
   return internalDep(absolutePath, options);
@@ -30,18 +44,16 @@ function resolveRelativePath(importPath, fromFile, options) {
 
 // Resolve absolute paths pointing to the same app/addon as the importer
 function resolveLocalPath(importPath, fromFile, options) {
-  let appOrAddonDirIndex = fromFile.indexOf(options.ownerName, options.root.length);
+  const fromFileStartsWithOwnerName = fromFile.substring(options.root.length + 1).startsWith(options.ownerName);
 
   // Depending on the exact version of Ember CLI and/or Embroider in play, the
   // app/addon name may or may not be included in `fromFile`'s path. If not, we
   // need to strip that prefix from the import path.
-  if (appOrAddonDirIndex === -1) {
-    appOrAddonDirIndex = options.root.length;
-    importPath = ensurePosixPath(importPath).replace(new RegExp('^' + options.ownerName + '/?'), '');
+  if (!fromFileStartsWithOwnerName) {
+    importPath = importPath.substring(options.ownerName.length + 1);
   }
 
-  let prefix = fromFile.substring(0, appOrAddonDirIndex);
-  let absolutePath = ensurePosixPath(path.resolve(prefix, importPath));
+  let absolutePath = ensurePosixPath(path.resolve(options.root, importPath));
   return internalDep(absolutePath, options);
 }
 
@@ -49,7 +61,12 @@ function resolveLocalPath(importPath, fromFile, options) {
 function resolveExternalPath(importPath, originalPath, fromFile, options) {
   let baseIndex = importPath[0] === '@' ? importPath.indexOf('/') + 1 : 0;
   let addonName = importPath.substring(0, importPath.indexOf('/', baseIndex));
-  let addon = options.parent.addons.find(addon => addon.name === addonName);
+  let addon = options.parent.addons.find((addon) => {
+    if (addon.moduleName) {
+      return addon.moduleName() === addonName;
+    }
+    return addon.name === addonName;
+  });
 
   if (!addon) {
     throw new Error(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-css-modules",
-  "version": "1.3.3",
+  "version": "1.6.0",
   "description": "CSS Modules for ambitious applications",
   "scripts": {
     "build": "ember build",
@@ -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"
   },