kiwiupover

Scoped CSS

Executive Summary

As we work towards adopting Embroider and the V2 addon structure, ember-css-modules has become a blocker due to a lack of embroider support. This has allowed us to re-evaluate our use of ember-css-modules and hopefully replace it with something more performant.

Motivation & Background

The primary goal up to now for the use of ember-css-modules was to eliminate the cascade of CSS. By eliminating the cascade and coupling the CSS to the component that it is used in, we can write better-structured and more maintainable CSS.

kiwiupover

jobs:
  fail_fast: true
  allow_failures:
    - env: EMBER_TRY_SCENARIO=ember-canary
    - env: EMBER_TRY_SCENARIO=embroider-tests

  include:
    ... snipped

    - stage: 'Additional Tests'

kiwiupover

module.exports = async function() {
  return {
    scenarios: [
      
      ... snipped ...
      
      {
        name: 'embroider-tests',
        npm: {
          devDependencies: {

kiwiupover

const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');

module.exports = function(defaults) {
  let app = new EmberAddon(defaults, {
  
  ... snipped ...

  if ('@embroider/webpack' in app.dependencies()) {
    const { Webpack } = require('@embroider/webpack'); // eslint-disable-line
    return require('@embroider/compat') // eslint-disable-line

kiwiupover

//tests/helpers/module-for-component.js

import getOwner from 'ember-owner/get';
import { moduleForComponent } from 'ember-qunit';
import freezeMoment from '../helpers/freeze-moment';
import moment from 'moment';
import {
  setup as setupMirage, teardown as teardownMirage
} from 'marketplace-search/tests/helpers/setup-mirage';

kiwiupover

~/code/dashboard (update-ember ✔) ᐅ DEBUG=ember-cli-update,git-diff-apply ember-cli-update
  ember-cli-update npm info ember-cli versions --json +0ms
  ember-cli-update [
  ember-cli-update   "0.0.0",
  ember-cli-update   "0.0.1",
  ember-cli-update   "0.0.2",
  ember-cli-update   "0.0.3",
  ember-cli-update   "0.0.4",
  ember-cli-update   "0.0.5",
  ember-cli-update   "0.0.6",

kiwiupover

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

kiwiupover

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

kiwiupover

import { module } from 'qunit';
import Ember from 'ember';
import startApp from '../helpers/start-app';
import destroyApp from '../helpers/destroy-app';

const { RSVP: { Promise } } = Ember;
const map = new WeakMap();
const registryKey = {};
const contKey = {};
const ownerKey = {};

kiwiupover

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});