Stylelint plugin and config for ember-scoped-css
npm install stylelint-ember-scoped-cssStylelint plugin and config for ember-scoped-css projects.
ember-scoped-css works by transforming class selectors like .my-class into .my-class-abc123 to ensure component isolation. Selectors without scopable classes will:
1. Apply globally instead of being scoped to the component
2. Break component isolation by affecting elements outside the component
3. Cause unexpected styling conflicts across components
``bash`
npm install --save-dev stylelint-ember-scoped-css stylelint
`json`
{
"overrides": [
{
"files": ["app/components//.css", "app/templates//.css"],
"extends": ["stylelint-ember-scoped-css/config"]
}
]
}
This adds ember-scoped-css specific rules to your existing stylelint config.
`json`
{
"files": ["app/components//.css", "app/templates//.css"],
"plugins": ["stylelint-ember-scoped-css"],
"rules": {
"ember-scoped-css/no-unscoped-selectors": true
}
}
MIT