ember-css-modules 2.1.0 → 3.0.0-alpha.1

package/addon/-runtime.js

@@ -0,0 +1 @@
+export * from 'glimmer-local-class-transform/-runtime';

package/index.js

@@ -4,10 +4,10 @@ const path = require('path');
 const fs = require('fs');
 const debug = require('debug')('ember-css-modules:addon');
 
-const HtmlbarsPlugin = require('./lib/htmlbars-plugin');
+const { localClassRegistryPlugin } = require('glimmer-local-class-transform');
 const ModulesPreprocessor = require('./lib/modules-preprocessor');
 const OutputStylesPreprocessor = require('./lib/output-styles-preprocessor');
-const PluginRegistry = require('./lib/plugin/registry');
+const normalizePostcssPlugins = require('./lib/utils/normalize-postcss-plugins');
 
 module.exports = {
   name: require('./package.json').name,
@@ -18,7 +18,6 @@ module.exports = {
     this.outputStylesPreprocessor = new OutputStylesPreprocessor({
       owner: this,
     });
-    this.plugins = new PluginRegistry(this.parent);
   },
 
   included(includer) {
@@ -31,9 +30,11 @@ module.exports = {
 
     this._super.included.apply(this, arguments);
 
-    this.cssModulesOptions = this.plugins.computeOptions(
-      includer.options && includer.options.cssModules
+    this.cssModulesOptions = includer.options?.cssModules ?? {};
+    this.cssModulesOptions.plugins = normalizePostcssPlugins(
+      this.cssModulesOptions.plugins
     );
+
     this.setupTemplateTransform();
   },
 
@@ -61,12 +62,20 @@ module.exports = {
       );
     }
 
+    let fileExtension = `.${this.getFileExtension()}`;
+    let defaultExtension = this.includeExtensionInModulePath()
+      ? fileExtension
+      : '';
+    let runtimeModule = 'ember-css-modules/-runtime';
+    let pathMapping = {
+      '/template\\.hbs$': `/styles${defaultExtension}`,
+      '/templates/(.*/)?(.*)\\.hbs$': `/styles/$1$2${defaultExtension}`,
+      '(\\.g?[tj]s|\\.hbs)+$': fileExtension,
+    };
+
     this.parentPreprocessorRegistry.add(
       'htmlbars-ast-plugin',
-      HtmlbarsPlugin.instantiate({
-        fileExtension: this.getFileExtension(),
-        includeExtensionInModulePath: this.includeExtensionInModulePath(),
-      })
+      localClassRegistryPlugin({ pathMapping, runtimeModule })
     );
   },
 
@@ -86,10 +95,6 @@ module.exports = {
     }
   },
 
-  notifyPlugins(event) {
-    this.plugins.notify(event);
-  },
-
   getParentName() {
     return this.app ? this.app.name : this.parent.name;
   },
@@ -151,9 +156,7 @@ module.exports = {
   },
 
   getFileExtension() {
-    return (
-      (this.cssModulesOptions && this.cssModulesOptions.extension) || 'css'
-    );
+    return (this.cssModulesOptions.extension ?? 'css').replace(/^\./, '');
   },
 
   includeExtensionInModulePath() {

package/lib/modules-preprocessor.js

@@ -75,10 +75,6 @@ module.exports = class ModulesPreprocessor {
         generateScopedName: this.scopedNameGenerator(),
         resolvePath: this.resolveAndRecordPath.bind(this),
         getJSFilePath: (cssPath) => this.getJSFilePath(cssPath, modulesSources),
-        onBuildStart: () => this.owner.notifyPlugins('buildStart'),
-        onBuildEnd: () => this.owner.notifyPlugins('buildEnd'),
-        onBuildSuccess: () => this.owner.notifyPlugins('buildSuccess'),
-        onBuildError: () => this.owner.notifyPlugins('buildError'),
         onProcessFile: this.resetFileDependencies.bind(this),
         onModuleResolutionFailure: this.onModuleResolutionFailure.bind(this),
         onImportResolutionFailure: this.onImportResolutionFailure.bind(this),
@@ -115,7 +111,11 @@ module.exports = class ModulesPreprocessor {
       ''
     );
 
-    if (modulesSource.has(`${cssPathWithoutExtension}.hbs`)) {
+    if (
+      ['hbs', 'gjs', 'gts'].some((ext) =>
+        modulesSource.has(`${cssPathWithoutExtension}.${ext}`)
+      )
+    ) {
       return `${cssPathWithExtension}.js`;
     } else {
       return `${cssPathWithoutExtension}.js`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-css-modules",
-  "version": "2.1.0",
+  "version": "3.0.0-alpha.1",
   "description": "CSS Modules for ambitious applications",
   "scripts": {
     "build": "ember build --environment=production",
@@ -17,14 +17,20 @@
     "test:node": "qunit tests-node/**/*-test.js"
   },
   "engines": {
-    "node": "12.* || 14.* || >= 16"
+    "node": ">= 22.15.0"
   },
   "bugs": {
     "url": "https://github.com/salsify/ember-css-modules/issues"
   },
-  "homepage": "https://github.com/salsify/ember-css-modules#readme",
+  "homepage": "https://github.com/salsify/ember-css-modules/tree/master/packages/ember-local-class",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/salsify/ember-css-modules.git",
+    "directory": "packages/ember-css-modules"
+  },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
+    "@ember/string": "^3.1.1",
     "@ember/test-helpers": "^2.4.2",
     "@embroider/test-setup": "^0.43.5",
     "@glimmer/component": "^1.0.4",
@@ -33,15 +39,15 @@
     "broccoli-plugin": "^1.3.1",
     "console-ui": "^2.2.2",
     "ember-auto-import": "^2.2.4",
-    "ember-cli": "~3.28.4",
-    "ember-cli-dependency-checker": "^3.2.0",
+    "ember-cli": "~5.8.0",
+    "ember-cli-htmlbars": "^6.3.0",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^6.2.2",
     "ember-qunit": "^5.1.4",
     "ember-resolver": "^8.0.3",
-    "ember-source": "~3.28.0",
+    "ember-source": "~5.8.0",
     "ember-source-channel-url": "^3.0.0",
     "ember-template-lint": "^3.6.0",
     "ember-try": "^1.4.0",
@@ -58,17 +64,12 @@
     "qunit": "^2.17.2",
     "qunit-dom": "^2.0.0",
     "sinon": "^4.3.0",
-    "template-stuff": "link:tests/dummy/lib/template-stuff",
     "webpack": "^5.64.1"
   },
   "keywords": [
     "ember-addon",
     "css-modules"
   ],
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@github.com/salsify/ember-css-modules.git"
-  },
   "license": "MIT",
   "author": "Dan Freeman",
   "dependencies": {
@@ -79,14 +80,18 @@
     "broccoli-merge-trees": "^4.2.0",
     "broccoli-postcss": "^6.0.0",
     "debug": "^4.3.2",
-    "ember-cli-babel": "^7.26.6",
-    "ember-cli-htmlbars": "^6.0.0",
+    "ember-auto-import": "^2.7.3",
+    "ember-cli-babel": "^8.2.0",
     "ensure-posix-path": "^1.0.2",
+    "glimmer-local-class-transform": "^1.0.0-alpha.0",
     "hash-string": "^1.0.0",
     "lodash.merge": "^4.6.1",
     "postcss": "^8.0.0",
     "toposort": "^2.0.2"
   },
+  "peerDependencies": {
+    "@babel/core": "^7.0.0"
+  },
   "ember": {
     "edition": "octane"
   },
@@ -105,6 +110,6 @@
     ]
   },
   "volta": {
-    "node": "16.13.0"
+    "extends": "../../package.json"
   }
 }

package/addon/helpers/local-class.js

@@ -1,34 +0,0 @@
-import { helper } from '@ember/component/helper';
-import { assert } from '@ember/debug';
-import require from 'require';
-
-export function localClass(params, hash) {
-  assert('No source specified to local-class lookup', 'from' in hash);
-  if (!hash.from) {
-    return '';
-  }
-
-  let styles = resolveSource(hash.from);
-  let classes = (params[0] || '').split(/\s+/);
-
-  return classes
-    .map((style) => styles[style])
-    .filter(Boolean)
-    .join(' ');
-}
-
-export default helper(localClass);
-
-function resolveSource(source) {
-  if (typeof source === 'string') {
-    if (require.has(source)) {
-      return require(source).default;
-    } else {
-      throw new Error(
-        `Unable to resolve local class names from ${source}; does the styles file exist?`
-      );
-    }
-  } else {
-    return source;
-  }
-}

package/addon/templates/static-helpers-hack.hbs

@@ -1 +0,0 @@
-{{local-class "hello"}}

package/app/helpers/local-class.js

@@ -1 +0,0 @@
-export { default, localClass } from 'ember-css-modules/helpers/local-class';

package/app/initializers/ensure-local-class-included.js

@@ -1,12 +0,0 @@
-import 'ember-css-modules/templates/static-helpers-hack';
-
-export default {
-  initialize() {
-    // This file exists to support Embroider's `staticHelpers` option.
-    // ECM relies on the existence of a `local-class` helper, but that
-    // helper may never be statically referenced in an application template.
-    // Instead, we reference it in our own template, and then import that
-    // template from a file (an initializer) that we know must always
-    // be loaded in order to boot the app and/or run tests.
-  },
-};

package/lib/htmlbars-plugin/index.js

@@ -1,248 +0,0 @@
-'use strict';
-
-const utils = require('./utils');
-
-module.exports = class ClassTransformPlugin {
-  constructor(env, options) {
-    this.syntax = env.syntax;
-    this.builders = env.syntax.builders;
-    this.options = options;
-    this.stylesModule = this.determineStylesModule(env);
-    this.visitor = this.buildVisitor(env);
-  }
-
-  static instantiate(options) {
-    return {
-      name: 'ember-css-modules',
-      plugin: (env) => new this(env, options),
-      parallelBabel: {
-        requireFile: __filename,
-        buildUsing: 'instantiate',
-        params: options,
-      },
-      baseDir() {
-        return `${__dirname}/../..`;
-      },
-    };
-  }
-
-  determineStylesModule(env) {
-    if (!env || !env.moduleName) return;
-
-    let includeExtension = this.options.includeExtensionInModulePath;
-    let name = env.moduleName.replace(/\.\w+$/, '');
-
-    if (name.endsWith('template')) {
-      name = name.replace(/template$/, 'styles');
-    } else if (name.includes('/templates/')) {
-      name = name.replace('/templates/', '/styles/');
-    } else if (name.includes('/components/')) {
-      includeExtension = true;
-    }
-
-    if (includeExtension) {
-      name = `${name}.${this.options.fileExtension}`;
-    }
-
-    return name;
-  }
-
-  buildVisitor(env) {
-    if (env.moduleName === env.filename) {
-      // No-op for the stage 1 Embroider pass (which only contains relative paths)
-      return {};
-    }
-
-    return {
-      ElementNode: (node) => this.transformElementNode(node),
-      MustacheStatement: (node) => this.transformStatement(node),
-      BlockStatement: (node) => this.transformStatement(node),
-      SubExpression: (node) => this.transformSubexpression(node),
-    };
-  }
-
-  transformStatement(node) {
-    if (node.path.original === 'local-class') {
-      this.transformLocalClassHelperInvocation(node);
-    } else {
-      this.transformPossibleComponentInvocation(node);
-    }
-  }
-
-  transformSubexpression(node) {
-    if (node.path.original === 'local-class') {
-      this.transformLocalClassHelperInvocation(node);
-    }
-  }
-
-  // Transform {{local-class 'foo'}} into {{local-class 'foo' from='path/to/styles-module'}}
-  transformLocalClassHelperInvocation(node) {
-    if (utils.getPair(node, 'from')) {
-      return;
-    }
-
-    node.hash.pairs.push(this.builders.pair('from', this.stylesModuleNode()));
-  }
-
-  transformPossibleComponentInvocation(node) {
-    let localClassPair = utils.getPair(node, 'local-class');
-    if (!localClassPair) {
-      return;
-    }
-
-    utils.removePair(node, localClassPair);
-
-    let classPair = utils.getPair(node, 'class');
-    let params = [];
-    let concatSexpr;
-
-    if (classPair) {
-      params.push(classPair.value);
-      utils.removePair(node, classPair);
-    }
-
-    utils.pushAll(params, this.localToPath(localClassPair.value));
-    this.divide(params, 'string');
-    concatSexpr = this.builders.sexpr(this.builders.path('concat'), params);
-    node.hash.pairs.push(this.builders.pair('class', concatSexpr));
-  }
-
-  transformElementNode(node) {
-    let localClassAttr = utils.getAttr(node, 'local-class');
-    if (!localClassAttr) {
-      return;
-    }
-
-    utils.removeAttr(node, localClassAttr);
-
-    let classAttr = utils.getAttr(node, 'class');
-    let parts = [];
-    let classAttrValue;
-
-    if (classAttr) {
-      utils.removeAttr(node, classAttr);
-      classAttrValue = classAttr.value;
-
-      // Unwrap the original class attribute value and transform
-      // the attr value into parts that make up the ConcatStatement
-      // that is returned from this method
-      if (classAttrValue.type === 'ConcatStatement') {
-        parts.push(
-          this.builders.mustache(
-            this.builders.path('concat'),
-            utils.concatStatementToParams(this.builders, classAttrValue)
-          )
-        );
-      } else if (classAttrValue.type === 'TextNode') {
-        parts.push(this.builders.text(classAttrValue.chars));
-      } else if (classAttrValue.type === 'MustacheStatement') {
-        parts.push(classAttrValue);
-      }
-    }
-
-    utils.pushAll(parts, this.localToPath(localClassAttr.value));
-    this.divide(parts, 'text');
-
-    let newClassAttr = this.builders.attr('class', this.builders.concat(parts));
-    node.attributes.unshift(newClassAttr);
-
-    // In new-enough versions of Ember (>= 3.25 or so), we need to create a
-    // fake good-enough `loc` whose content will start with `class=` to avoid
-    // triggering https://github.com/emberjs/ember.js/issues/19392
-    if (typeof localClassAttr.loc.slice === 'function') {
-      newClassAttr.loc = localClassAttr.loc.slice({
-        skipStart: 'local-'.length,
-      });
-    }
-  }
-
-  localToPath(node) {
-    if (~['SubExpression', 'MustacheStatement'].indexOf(node.type)) {
-      return this.dynamicLocalPath(node);
-    } else if (node.type === 'ConcatStatement') {
-      return this.concatLocalPath(node);
-    } else if (~['TextNode', 'StringLiteral'].indexOf(node.type)) {
-      return this.staticLocalPath(node);
-    } else {
-      throw new TypeError(
-        'ember-css-modules - invalid type, ' +
-          node.type +
-          ', passed to local-class attribute.'
-      );
-    }
-  }
-
-  dynamicLocalPath(node) {
-    let localClassPath = this.builders.path('local-class');
-
-    let builder;
-    if (node.type === 'SubExpression') {
-      builder = 'sexpr';
-    } else if (node.type === 'MustacheStatement') {
-      node = utils.mustacheToSexpr(this.builders, node);
-      builder = 'mustache';
-    }
-
-    let hash = this.builders.hash([
-      this.builders.pair('from', this.stylesModuleNode()),
-    ]);
-    let localClassInvocation = this.builders[builder](
-      localClassPath,
-      [node],
-      hash
-    );
-
-    return [localClassInvocation];
-  }
-
-  stylesModuleNode() {
-    if (!this.stylesModule) {
-      throw new Error(
-        'Unable to bind a local class in a template with an unknown moduleName'
-      );
-    }
-
-    return this.builders.string(this.stylesModule);
-  }
-
-  concatLocalPath(node) {
-    let concatPath = this.builders.path('concat');
-    let concatParts = utils.concatStatementToParams(this.builders, node);
-    let concatStatement = this.builders.mustache(concatPath, concatParts);
-    return this.dynamicLocalPath(concatStatement);
-  }
-
-  staticLocalPath(node) {
-    let locals = typeof node.chars === 'string' ? node.chars : node.value;
-    let exprBuilder = typeof node.chars === 'string' ? 'mustache' : 'sexpr';
-
-    return [
-      this.builders[exprBuilder](
-        'local-class',
-        [this.builders.string(locals)],
-        this.builders.hash([
-          this.builders.pair('from', this.stylesModuleNode()),
-        ])
-      ),
-    ];
-  }
-
-  divide(parts, builder) {
-    for (let i = 0; i < parts.length - 1; i++) {
-      if (~['StringLiteral', 'TextNode'].indexOf(parts[i].type)) {
-        utils.updateStringValue(parts[i], function (str) {
-          return str + ' ';
-        });
-      } else if (~['StringLiteral', 'TextNode'].indexOf(parts[i + 1].type)) {
-        utils.updateStringValue(parts[i + 1], function (str) {
-          return ' ' + str;
-        });
-      } else {
-        parts.splice(i + 1, 0, this.builders[builder](' '));
-        i++;
-      }
-    }
-
-    return parts;
-  }
-};

package/lib/htmlbars-plugin/utils.js

@@ -1,88 +0,0 @@
-'use strict';
-
-function removeAttr(node, attribute) {
-  node.attributes.splice(node.attributes.indexOf(attribute), 1);
-}
-
-function removePair(node, pair) {
-  node.hash.pairs.splice(node.hash.pairs.indexOf(pair), 1);
-}
-
-function getAttr(node, path) {
-  return findBy(node.attributes, 'name', path);
-}
-
-function getPair(node, path) {
-  return findBy(node.hash.pairs, 'key', path);
-}
-
-function updateStringValue(node, updater) {
-  if (node.type === 'TextNode') {
-    node.chars = updater(node.chars);
-  } else if (node.type === 'StringLiteral') {
-    node.value = updater(node.value);
-    node.original = updater(node.original);
-  } else {
-    throw new Error('Unknown node type ' + node.type + ' (not a string?)');
-  }
-}
-
-function mustacheToSexpr(builders, node) {
-  if (node.type !== 'MustacheStatement') {
-    return node;
-  }
-
-  var params = node.params.map(textToString.bind(null, builders));
-  return builders.sexpr(node.path, params, node.hash);
-}
-
-function textToString(builders, node) {
-  if (node.type === 'TextNode') {
-    return builders.string(node.chars);
-  } else {
-    return node;
-  }
-}
-
-function concatStatementToParams(builders, node) {
-  return node.parts.map(function (part) {
-    if (part.type === 'MustacheStatement') {
-      if (!part.params.length && !part.hash.pairs.length) {
-        return part.path;
-      } else {
-        return mustacheToSexpr(builders, part);
-      }
-    } else {
-      return textToString(builders, part);
-    }
-  });
-}
-
-function findBy(target, key, path) {
-  for (var i = 0, l = target.length; i < l; i++) {
-    if (target[i][key] === path) {
-      return target[i];
-    }
-  }
-
-  return false;
-}
-
-function pushAll(target, arr) {
-  for (var i = 0; i < arr.length; i++) {
-    target.push(arr[i]);
-  }
-
-  return target;
-}
-
-module.exports = {
-  pushAll: pushAll,
-  getPair: getPair,
-  getAttr: getAttr,
-  removePair: removePair,
-  removeAttr: removeAttr,
-  mustacheToSexpr: mustacheToSexpr,
-  updateStringValue: updateStringValue,
-  concatStatementToParams: concatStatementToParams,
-};

package/lib/plugin/index.js

@@ -1,29 +0,0 @@
-'use strict';
-
-const normalizePostcssPlugins = require('../utils/normalize-postcss-plugins');
-
-module.exports = class Plugin {
-  constructor(parent) {
-    this.parent = parent;
-  }
-
-  isForApp() {
-    return !this.parent.parent;
-  }
-
-  isForAddon() {
-    return !this.isForApp();
-  }
-
-  addPostcssPlugin(config, type, ...plugins) {
-    config.plugins = normalizePostcssPlugins(config.plugins);
-
-    if (type === 'before') {
-      config.plugins.before.unshift(...plugins);
-    } else if (type === 'after' || type === 'postprocess') {
-      config.plugins[type].push(...plugins);
-    } else {
-      throw new Error(`Unknown plugin type '${type}'`);
-    }
-  }
-};

package/lib/plugin/registry.js

@@ -1,100 +0,0 @@
-'use strict';
-
-// eslint-disable-next-line node/no-unpublished-require
-const EmberApp = require('ember-cli/lib/broccoli/ember-app');
-const Plugin = require('./index');
-const merge = require('lodash.merge');
-const debug = require('debug')('ember-css-modules:plugin-registry');
-const normalizePostcssPlugins = require('../utils/normalize-postcss-plugins');
-
-module.exports = class PluginRegistry {
-  constructor(parent) {
-    this.parent = parent;
-    this._plugins = null;
-  }
-
-  computeOptions(includerOptions) {
-    let env = EmberApp.env();
-    let baseOptions = merge({}, includerOptions);
-    baseOptions.plugins = normalizePostcssPlugins(baseOptions.plugins);
-
-    let pluginOptions = this._computePluginOptions(env, baseOptions);
-    return merge(pluginOptions, baseOptions);
-  }
-
-  notify(event) {
-    for (let plugin of this.getPlugins()) {
-      if (typeof plugin[event] === 'function') {
-        plugin[event]();
-      }
-    }
-  }
-
-  getPlugins() {
-    if (this._plugins === null) {
-      this._plugins = this._instantiatePlugins();
-    }
-    return this._plugins;
-  }
-
-  _instantiatePlugins() {
-    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')
-      );
-    }
-
-    return plugins;
-  }
-
-  _discoverPlugins(addons, keyword) {
-    return addons
-      .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
-    );
-  }
-
-  _instantiatePluginFor(addon) {
-    debug('instantiating plugin %s', addon.name);
-
-    const plugin = addon.createCssModulesPlugin(this.parent);
-    if (!(plugin instanceof Plugin)) {
-      this.parent.ui.writeWarnLine(
-        `Addon ${addon.name} did not return a Plugin instance from its createCssModulesPlugin hook`
-      );
-    }
-    return plugin;
-  }
-
-  _computePluginOptions(env, baseOptions) {
-    let options = merge({}, baseOptions);
-    for (let plugin of this.getPlugins()) {
-      if (plugin.config) {
-        merge(options, plugin.config(env, baseOptions));
-      }
-    }
-    return options;
-  }
-};