ember-css-modules 1.6.0 → 2.0.0

package/lib/modules-preprocessor.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const Funnel = require('broccoli-funnel');
+const { Funnel } = require('broccoli-funnel');
 const MergeTrees = require('broccoli-merge-trees');
 const Bridge = require('broccoli-bridge');
 const ensurePosixPath = require('ensure-posix-path');
@@ -31,35 +31,37 @@ module.exports = class ModulesPreprocessor {
   }
 
   toTree(inputTree, path) {
-    if (path !== '/') { return inputTree; }
+    if (path !== '/') {
+      return inputTree;
+    }
 
-    let merged = new MergeTrees([inputTree, this.buildModulesTree(inputTree)], { overwrite: true });
+    let merged = new MergeTrees([inputTree, this.buildModulesTree(inputTree)], {
+      overwrite: true,
+    });
 
     // Exclude the individual CSS files – those will be concatenated into the styles tree later
-    return new Funnel(merged, { exclude: ['**/*.' + this.owner.getFileExtension()] });
+    return new Funnel(merged, {
+      exclude: ['**/*.' + this.owner.getFileExtension()],
+    });
   }
 
   buildModulesTree(modulesInput) {
     if (!this._modulesTree) {
-      let inputRoot = this.owner.belongsToAddon() ? this.owner.getParentAddonTree() : this.owner.app.trees.app;
-      let outputRoot = (this.owner.belongsToAddon() ? this.owner.getAddonModulesRoot() : '');
-
-      if (outputRoot) {
-        inputRoot = new Funnel(inputRoot, {
-          destDir: outputRoot,
-        });
-      }
+      let inputRoot = this.owner.belongsToAddon()
+        ? this.owner.getParentAddonTree()
+        : this.owner.app.trees.app;
 
       // 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;
+      let ownerName = ownerParent.moduleName
+        ? ownerParent.moduleName()
+        : this._parentName;
       this._ownerName = ownerName;
 
       let modulesSources = new ModuleSourceFunnel(inputRoot, modulesInput, {
         include: ['**/*.' + this.owner.getFileExtension()],
-        outputRoot,
         parentName: ownerName,
       });
 
@@ -67,12 +69,12 @@ module.exports = class ModulesPreprocessor {
         extension: this.owner.getFileExtension(),
         plugins: this.getPostcssPlugins(),
         enableSourceMaps: this.owner.enableSourceMaps(),
-        sourceMapBaseDir: this.owner.belongsToAddon() ? this.owner.getAddonModulesRoot() : '',
+        sourceMapBaseDir: '',
         postcssOptions: this.owner.getPostcssOptions(),
         virtualModules: this.owner.getVirtualModules(),
         generateScopedName: this.scopedNameGenerator(),
         resolvePath: this.resolveAndRecordPath.bind(this),
-        getJSFilePath: cssPath => this.getJSFilePath(cssPath, modulesSources),
+        getJSFilePath: (cssPath) => this.getJSFilePath(cssPath, modulesSources),
         onBuildStart: () => this.owner.notifyPlugins('buildStart'),
         onBuildEnd: () => this.owner.notifyPlugins('buildEnd'),
         onBuildSuccess: () => this.owner.notifyPlugins('buildSuccess'),
@@ -80,7 +82,7 @@ module.exports = class ModulesPreprocessor {
         onProcessFile: this.resetFileDependencies.bind(this),
         onModuleResolutionFailure: this.onModuleResolutionFailure.bind(this),
         onImportResolutionFailure: this.onImportResolutionFailure.bind(this),
-        formatJS: formatJS
+        formatJS: formatJS,
       });
 
       this._modulesTree = modulesTree;
@@ -108,7 +110,10 @@ module.exports = class ModulesPreprocessor {
     }
 
     let extensionRegex = new RegExp(`\\.${this.owner.getFileExtension()}$`);
-    let cssPathWithoutExtension = cssPathWithExtension.replace(extensionRegex, '');
+    let cssPathWithoutExtension = cssPathWithExtension.replace(
+      extensionRegex,
+      ''
+    );
 
     if (modulesSource.has(`${cssPathWithoutExtension}.hbs`)) {
       return `${cssPathWithExtension}.js`;
@@ -119,7 +124,7 @@ module.exports = class ModulesPreprocessor {
 
   scopedNameGenerator() {
     let generator = this.owner.getScopedNameGenerator();
-    return function(className, modulePath, fullRule, dependency) {
+    return function (className, modulePath, fullRule, dependency) {
       let realPath = '/' + (dependency.keyPath || modulePath);
       return generator(className, realPath, fullRule);
     };
@@ -142,7 +147,7 @@ module.exports = class ModulesPreprocessor {
 
       this._plugins = {
         before: [this.rootPathPlugin()].concat(plugins.before || []),
-        after: [this.dependenciesPlugin()].concat(plugins.after || [])
+        after: plugins.after || [],
       };
     }
 
@@ -150,7 +155,9 @@ module.exports = class ModulesPreprocessor {
   }
 
   onModuleResolutionFailure(failure, modulePath, fromFile) {
-    throw new Error('Unable to locate module "' + modulePath + '" imported from ' + fromFile);
+    throw new Error(
+      'Unable to locate module "' + modulePath + '" imported from ' + fromFile
+    );
   }
 
   onImportResolutionFailure(symbol, modulePath, fromFile) {
@@ -161,42 +168,34 @@ module.exports = class ModulesPreprocessor {
       absolutePath = this.resolvePath(modulePath, fromFile);
     }
 
-    throw new Error(`No class or value named '${symbol}' was found in ${absolutePath}, imported from ${ fromFile}.`);
-  }
-
-  recordDependencies(fromFile, type, resolvedPaths) {
-    debug('recording %s dependencies from %s to %o', type, fromFile, resolvedPaths);
-    let deps = this.getDependencies();
-    let fileDeps = deps[fromFile] || (deps[fromFile] = {});
-    fileDeps[type] = (fileDeps[type] || []).concat(resolvedPaths);
+    throw new Error(
+      `No class or value named '${symbol}' was found in ${absolutePath}, imported from ${fromFile}.`
+    );
   }
 
   // Records dependencies from `composes` and `@value` imports
   resolveAndRecordPath(importPath, fromFile) {
-    let resolved = this.resolvePath(importPath, fromFile);
-    this.recordDependencies(fromFile, 'implicit', [resolved]);
-    return resolved;
-  }
+    let resolvedPath = this.resolvePath(importPath, fromFile);
+    let allDependencies = this.getDependencies();
+    let fileDependencies =
+      allDependencies[fromFile] || (allDependencies[fromFile] = []);
 
-  // Records explicit `@after-module` dependency declarations
-  dependenciesPlugin() {
-    let recordDependencies = this.recordDependencies.bind(this);
-    let resolve = this.resolvePath.bind(this);
-    return require('./postcss-module-order-directive')({
-      ui: this.owner.ui,
-      emitDeprecationWarning: !this.owner.cssModulesOptions._silenceAfterModuleDeprecation,
-      updateDependencies: function(fromFile, relativePaths) {
-        recordDependencies(fromFile, 'explicit', relativePaths.map(function(relativePath) {
-          return resolve(relativePath, fromFile);
-        }));
-      }
-    });
+    debug('recording dependency from %s to %s', fromFile, resolvedPath);
+    fileDependencies.push(resolvedPath);
+
+    return resolvedPath;
   }
 
   rootPathPlugin() {
-    return require('./make-postcss-plugin')('root-path-tag', () => (css) => {
-      css.source.input.rootPath = this._modulesTree.inputPaths[0];
-    });
+    return Object.assign(
+      () => ({
+        postcssPlugin: 'root-path-tag',
+        Once: (css) => {
+          css.source.input.rootPath = this._modulesTree.inputPaths[0];
+        },
+      }),
+      { postcss: true }
+    );
   }
 
   resolvePath(importPath, fromFile) {
@@ -206,10 +205,9 @@ module.exports = class ModulesPreprocessor {
       defaultExtension: this.owner.getFileExtension(),
       ownerName: this._ownerName,
       parentName: this._parentName,
-      addonModulesRoot: this.owner.getAddonModulesRoot(),
       root: ensurePosixPath(this._modulesTree.inputPaths[0]),
       parent: this.owner.getParent(),
-      ui: this.owner.ui
+      ui: this.owner.ui,
     });
   }
 };
@@ -223,23 +221,28 @@ function formatJS(classMapping) {
 
 class ModuleSourceFunnel extends Funnel {
   constructor(input, stylesTree, options) {
-    super(input, options);
-    this.stylesTree = stylesTree;
+    super([input, stylesTree], options);
     this.parentName = options.parentName;
-    this.destDir = options.outputRoot;
     this.inputHasParentName = null;
   }
 
   has(filePath) {
-    let relativePath = this.inputHasParentName ? filePath : filePath.replace(`${this.parentName}/`, '');
+    let relativePath = this.inputHasParentName
+      ? filePath
+      : filePath.replace(`${this.parentName}/`, '');
     return fs.existsSync(`${this.inputPaths[0]}/${relativePath}`);
   }
 
   build() {
     if (this.inputHasParentName === null) {
-      this.inputHasParentName = fs.existsSync(`${this.inputPaths[0]}/${this.parentName}`);
-
-      let stylesTreeHasParentName = fs.existsSync(`${this.stylesTree.outputPath}/${this.parentName}`);
+      this.inputHasParentName = fs.existsSync(
+        `${this.inputPaths[0]}/${this.parentName}`
+      );
+
+      let stylesTreePath = this.inputPaths[1];
+      let stylesTreeHasParentName = fs.existsSync(
+        `${stylesTreePath}/${this.parentName}`
+      );
       if (stylesTreeHasParentName && !this.inputHasParentName) {
         this.destDir += `/${this.parentName}`;
       }

package/lib/output-styles-preprocessor.js

@@ -4,7 +4,7 @@ const debug = require('debug')('ember-css-modules:output-styles-preprocessor');
 const Concat = require('broccoli-concat');
 const MergeTrees = require('broccoli-merge-trees');
 const PostCSS = require('broccoli-postcss');
-const Funnel = require('broccoli-funnel');
+const { Funnel } = require('broccoli-funnel');
 
 module.exports = class OutputStylesPreprocessor {
   constructor(options) {
@@ -12,12 +12,14 @@ module.exports = class OutputStylesPreprocessor {
   }
 
   toTree(inputNode, inputPath, outputDirectory, options) {
-    let outputFile = this.owner.getIntermediateOutputPath() || options.outputPaths[this.owner.belongsToAddon() ? 'addon' : 'app'];
+    let outputFile =
+      this.owner.getIntermediateOutputPath() ||
+      options.outputPaths[this.owner.belongsToAddon() ? 'addon' : 'app'];
     let concatOptions = {
       inputFiles: ['**/*.' + this.owner.getFileExtension()],
       outputFile: outputFile,
       allowNone: true,
-      sourceMapConfig: this.sourceMapConfig()
+      sourceMapConfig: this.sourceMapConfig(),
     };
 
     debug('concatenating module stylesheets: %o', concatOptions);
@@ -32,7 +34,7 @@ module.exports = class OutputStylesPreprocessor {
 
       concat = new PostCSS(concat, {
         plugins: postprocessPlugins,
-        exclude: ['**/*.map']
+        exclude: ['**/*.map'],
       });
     }
 
@@ -41,7 +43,9 @@ module.exports = class OutputStylesPreprocessor {
     if (this.owner.getIntermediateOutputPath()) {
       let passthroughExtensions = this.owner.getPassthroughFileExtensions();
       if (passthroughExtensions.length) {
-        inputNode = new Funnel(inputNode, { include: passthroughExtensions.map(ext => `**/*.${ext}`) });
+        inputNode = new Funnel(inputNode, {
+          include: passthroughExtensions.map((ext) => `**/*.${ext}`),
+        });
       }
       return new MergeTrees([inputNode, concat], { overwrite: true });
     } else {
@@ -50,20 +54,27 @@ module.exports = class OutputStylesPreprocessor {
   }
 
   /*
-   * A broccoli-concat tree that will dynamically order header files based on our @after-module directives.
+   * A broccoli-concat tree that will dynamically order header files based on dependencies
+   * between modules and declared header files.
    */
   dynamicHeaderConcat(options) {
     let modulesTree = this.owner.getModulesTree();
     let fixedHeaders = this.owner.getFixedModules('header');
     let fixedFooters = this.owner.getFixedModules('footer');
-    let getHeaderFiles = this.getHeaderFiles.bind(this, new Set(fixedHeaders.concat(fixedFooters)));
+    let getDependentFiles = this.getDependentFiles.bind(
+      this,
+      new Set(fixedHeaders.concat(fixedFooters))
+    );
 
     let concat = new Concat(modulesTree, options);
     let build = concat.build;
-    concat.build = function() {
+    concat.build = function () {
       this.footerFiles = fixedFooters;
-      this.headerFiles = fixedHeaders.concat(getHeaderFiles());
-      this._headerFooterFilesIndex = makeIndex(this.headerFiles, this.footerFiles);
+      this.headerFiles = fixedHeaders.concat(getDependentFiles());
+      this._headerFooterFilesIndex = makeIndex(
+        this.headerFiles,
+        this.footerFiles
+      );
       return build.apply(this, arguments);
     };
 
@@ -71,54 +82,27 @@ module.exports = class OutputStylesPreprocessor {
   }
 
   /*
-   * Based on the @after-module directives in the source files, produces an ordered list of files that should be
-   * boosted to the top of the concatenated output.
+   * Based on dependencies between modules, produce an ordered list of modules that
+   * should be boosted to the top of output, just below
    */
-  getHeaderFiles(fixedModules) {
-    let explicitDeps = this.explicitDependencies(fixedModules);
+  getDependentFiles(fixedModules) {
     let implicitDeps = this.implicitDependencies(fixedModules);
-    let sorted = require('toposort')(explicitDeps.concat(implicitDeps));
+    let sorted = require('toposort')(implicitDeps);
     debug('sorted dependencies %o', sorted);
-    return sorted.filter(file => !fixedModules.has(file));
-  }
-
-  // Dependencies due to explicit `@after-module` declarations
-  explicitDependencies(fixedModules) {
-    let edges = [];
-
-    this.eachFileWithDependencies('explicit', function(file, deps) {
-      let currentFile = file, dep;
-
-      if (fixedModules.has(currentFile)) {
-        throw new Error(`Configured headerFiles and footerFiles can't use @after-module`);
-      }
-
-      // For each file with explicit dependencies, create a chain of edges in the reverse order they appear in source
-      for (let i = deps.length - 1; i >= 0; i--) {
-        dep = deps[i];
-
-        if (fixedModules.has(dep)) {
-          throw new Error(`Configured headerFiles and footerFiles can't be the target of @after-module`);
-        }
-
-        edges.push([dep, currentFile]);
-        currentFile = dep;
-      }
-    });
-
-    debug('explicit dependencies: %o', edges);
-    return edges;
+    return sorted.filter((file) => !fixedModules.has(file));
   }
 
   // Dependencies stemming from `composes:` and `@value` directives
   implicitDependencies(fixedModules) {
     let edges = [];
 
-    this.eachFileWithDependencies('implicit', function(file, deps) {
+    this.eachFileWithDependencies(function (file, deps) {
       // headerFiles and footerFiles ignore implicit ordering constraints
-      if (fixedModules.has(file)) { return; }
+      if (fixedModules.has(file)) {
+        return;
+      }
 
-      deps.forEach(function(dep) {
+      deps.forEach(function (dep) {
         if (!fixedModules.has(dep)) {
           edges.push([dep, file]);
         }
@@ -129,19 +113,26 @@ module.exports = class OutputStylesPreprocessor {
     return edges;
   }
 
-  eachFileWithDependencies(type, callback) {
+  eachFileWithDependencies(callback) {
     let depMap = this.owner.getModuleDependencies();
 
     Object.keys(depMap).forEach((file) => {
-      let deps = depMap[file] && depMap[file][type];
-      if (!deps || !deps.length) { return; }
+      let deps = depMap[file] && depMap[file];
+      if (!deps || !deps.length) {
+        return;
+      }
 
       let relativeFile = this.owner.getModuleRelativePath(file);
-      callback(relativeFile, deps.filter(function(dep) {
-        return dep.type === 'internal';
-      }).map(function(dep) {
-        return dep.keyPath;
-      }));
+      callback(
+        relativeFile,
+        deps
+          .filter(function (dep) {
+            return dep.type === 'internal';
+          })
+          .map(function (dep) {
+            return dep.keyPath;
+          })
+      );
     });
   }
 
@@ -149,7 +140,7 @@ module.exports = class OutputStylesPreprocessor {
     if (this.owner.enableSourceMaps()) {
       return {
         extensions: ['css'],
-        mapCommentType: 'block'
+        mapCommentType: 'block',
       };
     }
   }
@@ -159,7 +150,7 @@ module.exports = class OutputStylesPreprocessor {
 function makeIndex(a, b) {
   let index = Object.create(null);
 
-  ((a || []).concat(b ||[])).forEach(function(a) {
+  (a || []).concat(b || []).forEach(function (a) {
     index[a] = true;
   });
 

package/lib/plugin/registry.js

@@ -38,13 +38,25 @@ module.exports = class PluginRegistry {
   }
 
   _instantiatePlugins() {
-    let plugins = this._discoverPlugins(this.parent.addons, 'ember-css-modules-plugin');
+    let plugins = this._discoverPlugins(
+      this.parent.addons,
+      'ember-css-modules-plugin'
+    );
 
     // For addons under development, crawl the host app's available plugins for linting tools so they can be devDependencies
-    if (typeof this.parent.isDevelopingAddon === 'function' && this.parent.isDevelopingAddon()) {
-      let parentAddonNames = new Set(this.parent.addons.map(addon => addon.name));
-      let hostAddons = this.parent.project.addons.filter(addon => !parentAddonNames.has(addon.name));
-      plugins = plugins.concat(this._discoverPlugins(hostAddons, 'ember-css-modules-lint-plugin'));
+    if (
+      typeof this.parent.isDevelopingAddon === 'function' &&
+      this.parent.isDevelopingAddon()
+    ) {
+      let parentAddonNames = new Set(
+        this.parent.addons.map((addon) => addon.name)
+      );
+      let hostAddons = this.parent.project.addons.filter(
+        (addon) => !parentAddonNames.has(addon.name)
+      );
+      plugins = plugins.concat(
+        this._discoverPlugins(hostAddons, 'ember-css-modules-lint-plugin')
+      );
     }
 
     return plugins;
@@ -52,14 +64,16 @@ module.exports = class PluginRegistry {
 
   _discoverPlugins(addons, keyword) {
     return addons
-      .filter(addon => this._isPlugin(addon, keyword))
-      .map(addon => this._instantiatePluginFor(addon));
+      .filter((addon) => this._isPlugin(addon, keyword))
+      .map((addon) => this._instantiatePluginFor(addon));
   }
 
   _isPlugin(addon, keyword) {
-    return addon.pkg
-      && addon.pkg.keywords
-      && addon.pkg.keywords.indexOf(keyword) >= 0;
+    return (
+      addon.pkg &&
+      addon.pkg.keywords &&
+      addon.pkg.keywords.indexOf(keyword) >= 0
+    );
   }
 
   _instantiatePluginFor(addon) {
@@ -83,4 +97,4 @@ module.exports = class PluginRegistry {
     }
     return options;
   }
-}
+};

package/lib/resolve-path.js

@@ -4,24 +4,39 @@ const path = require('path');
 const ensurePosixPath = require('ensure-posix-path');
 
 module.exports = function resolvePath(importPath, fromFile, options) {
-  let pathWithExtension = path.extname(importPath) ? importPath : (importPath + '.' + options.defaultExtension);
+  let pathWithExtension = path.extname(importPath)
+    ? importPath
+    : importPath + '.' + options.defaultExtension;
 
   if (isRelativePath(pathWithExtension)) {
     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);
+    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
+        '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);
+    return resolveExternalPath(
+      pathWithExtension,
+      importPath,
+      fromFile,
+      options
+    );
   }
 };
 
@@ -34,17 +49,24 @@ function isLocalPath(importPath, options) {
 }
 
 function isLocalPathWithOldPackageNameRef(importPath, options) {
-  return (options.ownerName !== options.parentName) && importPath.indexOf(options.parentName + '/') === 0;
+  return (
+    options.ownerName !== options.parentName &&
+    importPath.indexOf(options.parentName + '/') === 0
+  );
 }
 
 function resolveRelativePath(importPath, fromFile, options) {
-  let absolutePath = ensurePosixPath(path.resolve(path.dirname(fromFile), importPath));
+  let absolutePath = ensurePosixPath(
+    path.resolve(path.dirname(fromFile), importPath)
+  );
   return internalDep(absolutePath, options);
 }
 
 // Resolve absolute paths pointing to the same app/addon as the importer
 function resolveLocalPath(importPath, fromFile, options) {
-  const fromFileStartsWithOwnerName = fromFile.substring(options.root.length + 1).startsWith(options.ownerName);
+  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
@@ -71,15 +93,17 @@ function resolveExternalPath(importPath, originalPath, fromFile, options) {
   if (!addon) {
     throw new Error(
       `Unable to resolve styles module '${originalPath}' imported from '${fromFile}'. ` +
-      `No virtual module with that name was defined and no corresponding addon was found.`
+        `No virtual module with that name was defined and no corresponding addon was found.`
     );
   }
 
   let pathWithinAddon = importPath.substring(addonName.length + 1);
   let addonTreePath = path.join(addon.root, addon.treePaths.addon);
 
-  let absolutePath = ensurePosixPath(path.resolve(addonTreePath, pathWithinAddon));
-  let keyPath = options.addonModulesRoot + addonName + '/' + pathWithinAddon;
+  let absolutePath = ensurePosixPath(
+    path.resolve(addonTreePath, pathWithinAddon)
+  );
+  let keyPath = addonName + '/' + pathWithinAddon;
   return new DependencyPath('external', absolutePath, keyPath);
 }
 

package/lib/utils/normalize-postcss-plugins.js

@@ -10,4 +10,4 @@ module.exports = function normalizePostcssPlugins(plugins) {
   }
 
   return result;
-}
+};