migrate-from-ember-modern-css.md

Migrate from ember-modern-css

Already implemented Ember + Modern CSS in your project? You can reach embroider-css-modules in a few steps.

1. Install dependencies
2. Configure type-css-modules
3. Own your styles
4. Use the {{local}} helper

Install dependencies

For PostCSS, here is what you likely need at minimum. (cssnano is not needed.)

• autoprefixer
• postcss
• postcss-loader

Finally, some packages to improve your developer experience (DX).

• embroider-css-modules
• type-css-modules¹

All in all, here's a one-line command for installation:

pnpm install --dev \
  autoprefixer postcss postcss-loader \
  embroider-css-modules type-css-modules

^{1. Needed only if you have a TypeScript project.}

Configure type-css-modules

Note

You can skip this step if you don't have a TypeScript project.

If you have typed *.css files, either by installing @types/css-modules or defining the type to be Record<string, string> in types/global.d.ts, please undo the change.

Instead, write a pre-script as shown in Set up CSS modules (apps built with Webpack) - CSS declaration files.

Own your styles

First, reconfigure cssLoaderOptions.modules.mode as shown in Set up CSS modules (apps) - Configure Webpack.

Next, remove all :local() pseudo-class selectors. Instead, use the :global() pseudo-class selector to refer to "things from outside."

Example

/* Before: app/components/navigation-menu.css */
:local(.list) {
  align-items: center;
  display: flex;
}

:local(.link) {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.875rem 1rem;
  text-decoration: none;
  white-space: nowrap;
}

:local(.link).active {
  background-color: #15202d;
}

:local(.link):hover {
  background-color: #26313d;
  transition: background-color 0.17s;
}

/* After: app/components/navigation-menu.css */
.list {
  align-items: center;
  display: flex;
}

.link {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.875rem 1rem;
  text-decoration: none;
  white-space: nowrap;
}

.link:global(.active) {
  background-color: #15202d;
}

.link:hover {
  background-color: #26313d;
  transition: background-color 0.17s;
}

Use the {{local}} helper

Note

You can skip this step if you didn't create the {{styles}} helper.

Remove the {{styles}} helper. To apply multiple styles, use the {{local}} helper instead.

Example

{{! Before: app/templates/products.hbs }}
<div
  class={{styles
    this
    (concat
      (if
        this.isInExperimentalGroup
        "shared-layout products-with-details "
        "shared-layout products "
      )
      "sticky-container "
    )
  }}
>
  ...
</div>

{{! After: app/templates/products.hbs }}
<div
  class={{local
    this.styles
    (if
      this.isInExperimentalGroup
      (array "shared-layout" "products-with-details")
      (array "shared-layout" "products")
    )
    "sticky-container"
  }}
>
  ...
</div>