ember-css-modules 1.6.0 → 2.0.0

package/package.json

@@ -1,62 +1,65 @@
 {
   "name": "ember-css-modules",
-  "version": "1.6.0",
+  "version": "2.0.0",
   "description": "CSS Modules for ambitious applications",
   "scripts": {
-    "build": "ember build",
+    "build": "ember build --environment=production",
+    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
+    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
     "lint:hbs": "ember-template-lint .",
-    "lint:js": "eslint .",
+    "lint:hbs:fix": "ember-template-lint . --fix",
+    "lint:js": "eslint . --cache",
+    "lint:js:fix": "eslint . --fix",
     "start": "ember server",
-    "test": "ember test",
-    "test:node": "qunit tests-node/**/*-test.js",
-    "test:all": "ember try:each"
+    "test": "npm-run-all lint test:node test:ember",
+    "test:ember": "ember test",
+    "test:ember-compatibility": "ember try:each",
+    "test:node": "qunit tests-node/**/*-test.js"
   },
   "engines": {
-    "node": "6.* || 8.* || >= 10.*"
+    "node": "12.* || 14.* || >= 16"
   },
   "bugs": {
     "url": "https://github.com/salsify/ember-css-modules/issues"
   },
   "homepage": "https://github.com/salsify/ember-css-modules#readme",
   "devDependencies": {
-    "@ember-decorators/component": "^6.0.0",
-    "@ember/optional-features": "^0.6.3",
-    "babel-eslint": "^10.0.3",
+    "@ember/optional-features": "^2.0.0",
+    "@ember/test-helpers": "^2.4.2",
+    "@embroider/test-setup": "^0.43.5",
+    "@glimmer/component": "^1.0.4",
+    "@glimmer/tracking": "^1.0.4",
+    "babel-eslint": "^10.1.0",
     "broccoli-plugin": "^1.3.1",
     "console-ui": "^2.2.2",
-    "ember-ajax": "^3.1.0",
-    "ember-auto-import": "^1.5.3",
-    "ember-cli": "~3.4.1",
-    "ember-cli-addon-tests": "^0.11.0",
-    "ember-cli-dependency-checker": "^3.0.0",
-    "ember-cli-htmlbars-inline-precompile": "^1.0.3",
-    "ember-cli-inject-live-reload": "^1.8.2",
-    "ember-cli-qunit": "^4.3.2",
-    "ember-cli-sri": "^2.1.1",
-    "ember-cli-test-loader": "^2.2.0",
-    "ember-cli-uglify": "^2.1.0",
-    "ember-compatibility-helpers": "^1.0.2",
-    "ember-decorators-polyfill": "^1.0.3",
+    "ember-auto-import": "^2.2.4",
+    "ember-cli": "~3.28.4",
+    "ember-cli-dependency-checker": "^3.2.0",
+    "ember-cli-inject-live-reload": "^2.1.0",
     "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-export-application-global": "^2.0.0",
-    "ember-load-initializers": "^1.1.0",
-    "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-resolver": "^5.0.1",
-    "ember-sinon": "^3.1.0",
-    "ember-source": "~3.4.0",
-    "ember-source-channel-url": "^1.1.0",
-    "ember-template-lint": "^1.1.0",
-    "ember-try": "^1.0.0",
-    "eslint": "^6.5.1",
-    "eslint-plugin-ember": "^5.2.0",
-    "eslint-plugin-node": "^7.0.1",
+    "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-channel-url": "^3.0.0",
+    "ember-template-lint": "^3.6.0",
+    "ember-try": "^1.4.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-ember": "^10.5.4",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-qunit": "^6.2.0",
     "loader.js": "^4.7.0",
+    "npm-run-all": "^4.1.5",
     "postcss-color-rebeccapurple": "^6.0.0",
-    "qunit-dom": "^0.7.1",
-    "qunitjs": "^2.4.1",
+    "prettier": "^2.3.2",
+    "qunit": "^2.17.2",
+    "qunit-dom": "^2.0.0",
     "sinon": "^4.3.0",
     "template-stuff": "link:tests/dummy/lib/template-stuff",
-    "webpack": "^4.41.2"
+    "webpack": "^5.64.1"
   },
   "keywords": [
     "ember-addon",
@@ -70,22 +73,22 @@
   "author": "Dan Freeman",
   "dependencies": {
     "broccoli-bridge": "^1.0.0",
-    "broccoli-concat": "^3.2.2",
-    "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 || ^5.0.0 || ^6.0.0",
-    "calculate-cache-key-for-tree": "^1.1.0",
-    "debug": "^3.1.0",
-    "ember-cli-babel": "^7.7.3",
-    "ember-cli-htmlbars": "^3.0.0",
-    "ember-cli-version-checker": "^2.1.0",
+    "broccoli-concat": "^4.2.5",
+    "broccoli-css-modules": "^0.8.0",
+    "broccoli-funnel": "^3.0.8",
+    "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",
     "ensure-posix-path": "^1.0.2",
     "hash-string": "^1.0.0",
     "lodash.merge": "^4.6.1",
-    "postcss": "^7.0.35 || ^8.0.0",
-    "semver": "^5.5.0",
-    "toposort": "^1.0.6"
+    "postcss": "^8.0.0",
+    "toposort": "^2.0.2"
+  },
+  "ember": {
+    "edition": "octane"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config",
@@ -100,5 +103,8 @@
       "ember-cli-stylus",
       "ember-cli-postcss"
     ]
+  },
+  "volta": {
+    "node": "16.13.0"
   }
 }

package/.template-lintrc.js

@@ -1,8 +0,0 @@
-'use strict';
-
-module.exports = {
-  extends: 'recommended',
-  rules: {
-    quotes: false
-  }
-};

package/addon/decorators.js

@@ -1,168 +0,0 @@
-/*
-  The implementation of these decorators is based on the original work of the
-  ember-osf-web project, released under the Apache License 2.0:
-
-  https://github.com/CenterForOpenScience/ember-osf-web/blob/4675920c4d53e60c62eed7a87ea84e0f4c5ab018/app/decorators/css-modules.ts
-*/
-
-import { get } from '@ember/object';
-import { assert } from '@ember/debug';
-
-/**
-  Class decorator which specifies the local  class names to be applied to a
-  component. This replaces the `localClassNames` property on components in the
-  traditional Ember object model.
-
-  ```js
-  @localClassNames('a-static-class', 'another-static-class')
-  export default class ClassNamesDemoComponent extends Component {}
-  ```
-
-  @param {...string} classNames - The list of local classes to be applied to the component
-*/
-export const localClassNames = (...classNames) => (...desc) => {
-  assert(
-    `The @localClassNames decorator must be provided strings, received: ${classNames}`,
-    classNames.every(className => typeof className === 'string')
-  );
-
-  if (isStage1ClassDescriptor(desc)) {
-    collapseAndMerge(desc[0].prototype, 'localClassNames', ...classNames);
-  } else {
-    desc[0].finisher = target => {
-      collapseAndMerge(target.prototype, 'localClassNames', ...classNames);
-    };
-  }
-};
-
-/**
-  Decorator which indicates that the field or computed should be bound to the
-  component local class names. This replaces `localClassNameBindings` by
-  directly allowing you to specify which properties should be bound.
-
-  ```js
-  export default class ClassNameDemoComponent extends Component {
-    // Adds 'bound-field' class, if true
-    @localClassName boundField = true;
-
-    // With provided true/false class names
-    @localClassName('active', 'inactive') isActive = true;
-  }
-  ```
-  @function
-  @param {string} truthyName? - The local class to be applied if the value the
-                                field is truthy, defaults to the name of the
-                                field.
-  @param {string} falsyName? - The class to be applied if the value of the field
-                               is falsy.
-*/
-export const localClassName = (...params) => {
-  if (isFieldDescriptor(params)) {
-    return localClassName()(...params);
-  }
-
-  return (...desc) => {
-    assert(
-      `The @localClassName decorator may only receive strings as parameters. Received: ${params}`,
-      params.every(className => typeof className === 'string')
-    );
-
-    if (isStage1FieldDescriptor(desc)) {
-      let [prototype, key, descriptor] = desc;
-      setUpLocalClassField(params, prototype, key, descriptor);
-    } else if (isStage2FieldDescriptor(desc)) {
-      desc[0].finisher = target => {
-        const { key, descriptor } = desc[0];
-        setUpLocalClassField(params, target.prototype, key, descriptor);
-      };
-    }
-  };
-};
-
-function setUpLocalClassField(params, prototype, key, descriptor) {
-  const binding = params.length > 0 ? `${key}:${params.join(':')}` : key;
-
-  collapseAndMerge(prototype, 'localClassNameBindings', binding);
-
-  if (descriptor) {
-    // Decorated fields are currently not configurable in Babel for some reason, so ensure
-    // that the field becomes configurable (else it messes with things)
-    descriptor.configurable = true;
-
-    // Decorated fields which don't have a getter or setter, but also no
-    // explicit `writable` flag, default to not being writable in Babel. Since
-    // by default fields _are_ writable and this decorator should not change
-    // that, we enable the `writable` flag in this specific case.
-    if (!('get' in descriptor || 'set' in descriptor || 'writable' in descriptor)) {
-      descriptor.writable = true;
-    }
-
-    // Babel 6 provides a `null` initializer if one isn't set, but that can wind up
-    // overwriting passed-in values if they're specified.
-    // This is a no-op in Babel 7 (since `initializer` isn't part of the property descriptor)
-    // and can be dropped when we remove support for Babel 6
-    if (descriptor.initializer === null) {
-      descriptor.initializer = function() {
-        return get(this, key);
-      };
-    }
-  }
-}
-
-function collapseAndMerge(prototype, property, ...items) {
-  collapseProto(prototype);
-
-  if (property in prototype) {
-    const parentElements = prototype[property];
-    items.unshift(...parentElements)
-  }
-
-  prototype[property] = items;
-}
-
-// These utilities are from @ember-decorators/utils
-// https://github.com/ember-decorators/ember-decorators/blob/f3e3d636a38d99992af326a1012d69bf10a2cb4c/packages/utils/addon/-private/class-field-descriptor.js
-
-function isStage1ClassDescriptor(possibleDesc) {
-  let [target] = possibleDesc;
-
-  return (
-    possibleDesc.length === 1 &&
-    typeof target === 'function' &&
-    'prototype' in target &&
-    !target.__isComputedDecorator
-  );
-}
-
-function isFieldDescriptor(possibleDesc) {
-  return isStage1FieldDescriptor(possibleDesc) || isStage2FieldDescriptor(possibleDesc);
-}
-
-function isStage2FieldDescriptor(possibleDesc) {
-  return possibleDesc && possibleDesc.toString() === '[object Descriptor]';
-}
-
-function isStage1FieldDescriptor(possibleDesc) {
-  let [target, key, desc] = possibleDesc;
-
-  return (
-    possibleDesc.length === 3 &&
-    typeof target === 'object' &&
-    target !== null &&
-    typeof key === 'string' &&
-    ((typeof desc === 'object' &&
-      desc !== null &&
-      'enumerable' in desc &&
-      'configurable' in desc) ||
-      desc === undefined) // TS compatibility
-  );
-}
-
-function collapseProto(target) {
-  // We must collapse the superclass prototype to make sure that the `actions`
-  // object will exist. Since collapsing doesn't generally happen until a class is
-  // instantiated, we have to do it manually.
-  if (typeof target.constructor.proto === 'function') {
-    target.constructor.proto();
-  }
-}

package/addon/extensions.js

@@ -1,4 +0,0 @@
-import Component from '@ember/component';
-import ComponentMixin from './mixins/component-mixin';
-
-Component.reopen(ComponentMixin);

package/addon/mixins/component-mixin.js

@@ -1,111 +0,0 @@
-/* global require */
-
-import { computed, defineProperty } from '@ember/object';
-import Mixin from '@ember/object/mixin';
-import { dasherize } from '@ember/string';
-import { getOwner } from '@ember/application';
-import { assert, deprecate } from '@ember/debug';
-
-export default Mixin.create({
-  localClassNames: null,
-  localClassNameBindings: null,
-
-  concatenatedProperties: ['localClassNames', 'localClassNameBindings'],
-
-  init() {
-    this._super();
-
-    if (this.tagName === '') return;
-
-    this.classNameBindings = [
-      ...this.classNameBindings,
-      ...localClassNames(this),
-      LOCAL_CLASS_NAMES_CP,
-    ];
-
-    if (this.localClassNameBindings.length) {
-      let value = localClassNamesCP(this.localClassNameBindings, this.get('__styles__'));
-      defineProperty(this, LOCAL_CLASS_NAMES_CP, value);
-    }
-  },
-
-  __styles__: computed(function() {
-    let key = this._debugContainerKey;
-    if (!key) { return; }
-
-    let name = key.replace(/^component:/, '');
-    let layout = this.layout || getOwner(this).lookup(`template:components/${name}`);
-    assert(
-      `Unable to resolve localClassNames or localClassNameBindings for component ${name}, which has no ` +
-      `layout. You can fix this by either creating an empty template for your component or importing and ` +
-      `using the styles hash directly instead, e.g. \`classNames: styles['my-class']\`.`,
-      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));
-
-    // This is not public API and might break at any time...
-    let moduleName = (layout.meta || layout.referrer).moduleName.replace(/\.hbs$/, '');
-    if (/\/template$/.test(moduleName)) {
-      return tryLoad(moduleName.replace(/template$/, 'styles'));
-    } else if (/\/templates\//.test(moduleName)) {
-      return tryLoad(moduleName.replace('/templates/', '/styles/'));
-    }
-
-    return;
-  })
-});
-
-function tryLoad(path) {
-  if (require.has(path)) {
-    return require(path).default;
-  }
-}
-
-const LOCAL_CLASS_NAMES_CP = '__ecm_local_class_names__';
-
-function localClassNames(component) {
-  return component.localClassNames.map(className => `__styles__.${className}`);
-}
-
-function localClassNamesCP(localClassNameBindings, styles) {
-  let bindings = localClassNameBindings.map((binding) => {
-    let [property, trueStyle, falseStyle] = binding.split(':');
-    let trueClasses = styles[trueStyle || dasherize(property)] || '';
-    let falseClasses = styles[falseStyle] || '';
-    let isBoolean = !!trueStyle;
-    return { property, trueClasses, falseClasses, isBoolean };
-  });
-
-  return computed(...bindings.map(binding => binding.property), function() {
-    let classes = [];
-
-    bindings.forEach((binding) => {
-      let value = this.get(binding.property);
-      if (binding.isBoolean || typeof value !== 'string') {
-        classes.push(value ? binding.trueClasses : binding.falseClasses);
-      } else {
-        classes.push(value.split(/\s+/).map(key => styles[key]).join(' '));
-      }
-    });
-
-    return classes.join(' ');
-  });
-}

package/index.d.ts

@@ -1,40 +0,0 @@
-/**
-  Decorator which indicates that the field or computed should be bound to the
-  component local class names. This replaces `localClassNameBindings` by
-  directly allowing you to specify which properties should be bound.
-
-  ```js
-  export default class ClassNameDemoComponent extends Component {
-    // Adds 'bound-field' class, if true
-    @localClassName boundField = true;
-
-    // With provided true/false class names
-    @localClassName('active', 'inactive') isActive = true;
-  }
-  ```
-  @function
-  @param {string} truthyName? - The local class to be applied if the value the
-                                field is truthy, defaults to the name of the
-                                field.
-  @param {string} falsyName? - The class to be applied if the value of the field
-                               is falsy.
- */
-export function localClassName(
-  truthyName?: string,
-  falsyName?: string
-): PropertyDecorator;
-
-/**
-  Class decorator which specifies the local class names to be applied to a
-  component. This replaces the `localClassNames` property on components in the
-  traditional Ember object model.
-
-  ```js
-  @localClassNames('a-static-class', 'another-static-class')
-  export default class ClassNamesDemoComponent extends Component {}
-  ```
-
-  @param {...string} classNames - The list of local classes to be applied to the component
- */
-export function localClassNames(...classNames: string[]): ClassDecorator;
-

package/lib/make-postcss-plugin.js

@@ -1,18 +0,0 @@
-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/postcss-module-order-directive.js

@@ -1,29 +0,0 @@
-'use strict';
-
-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 = makePostCSSPlugin('ember-css-modules-ordering', (options) => {
-  return (css) => {
-    let dependencies = [];
-    let input = css.source.input;
-    let filePath = input.file.replace(input.rootPath + '/', '');
-
-    css.walkAtRules((rule) => {
-      if (rule.name !== 'after-module') { return; }
-
-      if (options.emitDeprecationWarning) {
-        let warning = '@after-module is deprecated; use `headerFiles` and `footerFiles` instead';
-        options.ui.writeDeprecateLine(`${filePath}:${rule.source.start.line} - ${warning}`);
-      }
-
-      dependencies.push(rule.params.replace(/^['"]|["']$/g, ''));
-      rule.remove();
-    });
-
-    if (dependencies.length) {
-      options.updateDependencies(ensurePosixPath(css.source.input.file), dependencies);
-    }
-  };
-});

package/vendor/~ember-css-modules/ext.js

@@ -1,2 +0,0 @@
-/* global require */
-require('ember-css-modules/extensions');