ember-scoped-css

Scope your component styles and never worry about a collision ever again.

``gjs
const greeting = "hello world";


`

becomes the equivelent of;

`gjs
import './abcd1234.css'; // containing your CSS, but with selectors scoped
const greeting = "hello world";


`

This is a build-time-only addon, so there is no need to worry about runtime performance.

You can also write your styles as a co-located .css file, right next to your .gjs/.gts files.
Every selector you write in your styles is automatically scoped to the component.
So you can develop your component with styles isolated from the rest of the application and you don't have to worry about CSS selectors collisions or issues with the CSS cascade.

_See Usage for details_.

If you want to read more specifics on how this addon achieves isolation with CSS you can read more in the detailed CSS isolation documentation

As selectors are scoped/renamed during the build process. So there is no performance hit when running the app.

The philosophy of ember-scoped-css is to stick as close to CSS and HTML as possible and not introduce new syntax or concepts unless it is absolutely necessary.

You may also find the docs on CSS @layer interesting.
This build tool can emit CSS in a @layer.

Compatibility

- Vite
- V2 addons with @embroider/addon-dev @ v8+ (or similar)
- For hbs, broccoli, or webpack-based builds, view this version of the docs
- For bugfixes for the pre-ember-scoped-css-1.0 code, PR here

| You Have | ember-scoped-css | ember-scoped-css-compat | docs |
| -------- | ----------- | ---------------------- | --- |
| vite | >= 1.0.0 | 🚫 | [main][docs-main]
| gjs / gts library (no hbs) | >= 1.0.0 | 🚫 | [main][docs-main]
| webpack | <= 0.24.3 | <= 10.0.0 | [0.24.3][docs-2]
| hbs | <= 0.24.3 | <= 10.0.0 | [0.24.3][docs-2]
| ember-template-imports@v4 or babel-plugin-ember-template-compilation@2.2.5+ | 0.19.0 | 10.0.0 | [0.19][docs-3] - [0.24][docs-2]
| ember-template-imports@v3 or babel-plugin-ember-template-compilation@2.2.1 or rollup-plugin-glimmer-template-tag | <= 0.18.0 | <= 9.0.0 | [0.18][docs-4]
| classic components | <= 0.18.0 | <= 8.0.0 | [0.18][docs-4]
| ember < 4 | <= 0.18.0 | <= 8.0.0 | [0.18][docs-4]

[docs-main]: https://github.com/auditboard/ember-scoped-css/
[docs-2]: https://github.com/auditboard/ember-scoped-css/tree/v0.24.3-ember-scoped-css
[docs-3]: https://github.com/auditboard/ember-scoped-css/tree/v0.19.1-ember-scoped-css
[docs-4]: https://github.com/auditboard/ember-scoped-css/tree/ember-scoped-css%400.18.0

Installation

`bash
npm install --save-dev ember-scoped-css
`

$3

Configuration happens in multiple locations to take over the need portion of your build steps.

- vite.config.*
- rollup.config.*
- babel.config.*

#### Vite

In your vite.config.*, import and add the scopedCSS plugin:

`js
import { defineConfig } from 'vite';
import { scopedCSS } from 'ember-scoped-css/vite';

export default defineConfig({
// ...
plugins: [
scopedCSS(),
// ...
],
});
`

##### Configuration Options

- layerName: string - Wrap your CSS in a @layer with this given name

#### Rollup

If you have a rollup config:

`js
import { scopedCSS } from 'ember-scoped-css/rollup';

// ...
plugins: [
scopedCSS(),
]
`

##### Configuration Options

- layerName: string - Wrap your CSS in a @layer with this given name

#### Babel

In your babel.config.*, add the plugins:

`js
import { scopedCSS } from 'ember-scoped-css/babel';

export default {
plugins: [
// ...
scopedCSS(),
[
'babel-plugin-ember-template-compilation',
{
// ...
transforms: [scopedCSS.template({})],
},
],
// ...
],
// ...
};
`

There are two plugins, but you made only need one:

- scopedCSS() - handles removing the import for scopedCSS (which you'd use in GJS and GTS for intellisense, and TypeScript)
- scopedCSS.template() - transforms your template

##### Configuration Options (scopedCSS.template())

- layerName: string - Wrap your CSS in a @layer with this given name
- additionalRoots: string[] - When you want to procss more folders. For example you want to support pods structure

$3

If you use TypeScript, or rely on information from TypeScript, you'll want to add the special attributes to the

`

Note that

`