Webpack loader to generate CSS Modules classname on Svelte components
npm install svelte-cssmodules-loaderThe loader is a complement to the svelte-loader to enable the use of CSS Modules classname on Svelte components. Make sure to install the svelte-loader along with the svelte-cssmodules-loader
``bash`
npm install --save-dev svelte-cssmodules-loader svelte-loader
The svelte-cssmodules-loader is doing all its work on a "raw" Svelte component (before the compilation). The loader needs to be executed before svelte-loader.
`js`
...
module: {
rules: [
...
{
test: /\.(html|svelte)$/,
exclude: /node_modules/,
use: [
'svelte-loader',
'svelte-cssmodules-loader',
]
}
...
]
}
...
Set your own localIdentName rule by using any available token from webpack interpolateName.
`js`
...
module: {
rules: [
...
{
test: /\.(html|svelte)$/,
exclude: /node_modules/,
use: [
'svelte-loader',
{
loader: 'svelte-cssmodules-loader',
options: {
localIdentName: '[local]-[hash:base64:6]', // your rule here
}
}
]
}
...
]
}
...
Please note: if the option is not defined, the default rule [local]-[hash:base64:6] will be applied.
On the HTML markup (not the CSS), Prefix any class name that require CSS Modules by $style. => $style.My_CLASSNAME
`html
My red text
After
svelte-cssmodules-loader, the component will be transformed to`html
My red text
`$3
The loader only generates CSS Modules classname to the html class values prefixed by
$style.. The rest is left untouched.Before
`html
My blue text
My red text
`After svelte-cssmodules-loader
`html
My blue text
My red text
`$3
If a CSS Modules class has no css style attached, it will be removed from the class attribute.
Before
`html
My blue text
`After svelte-cssmodules-loader
`html
My blue text
`$3
kebab-case or camelCase, name the classes the way you're more comfortable with.
svelte-cssmodules-loader will make no difference.Before
`html
Red
Crimson
Majenta
`After svelte-cssmodules-loader
`html
Red
Crimson
Majenta
`Example
Webpack Config
`js
module: {
...
rules: [
{
test: /\.svelte$/,
exclude: /node_modules/,
use: [
{
loader: 'svelte-loader',
options: {
emitCss: false
}
},
{
loader: 'svelte-cssmodules-loader',
options: {
localIdentName: '[hash:base64:10]'
}
}
]
}
]
...
},
`Svelte Component
`html
My Modal title
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
`Svelte Component After svelte-cssmodules-loader
`html
My Modal title
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
`Final html code generated by svelte
`html
My Modal title
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
`Note: The svelte scoped class is still being applied to the css module class
Why CSS Modules on Svelte
While the native CSS Scoped system should be largely enough to avoid class conflict, it could find its limit when working on a hybrid project. On a non full javascript front-end where Svelte is used to enhance pieces of the page, the thought on the class naming is no less different than the one on a regular html page. For example, on the modal component above, It would have been wiser to namespace some of the classes such as
.modal-body and .modal-cancel to avoid inheriting styles from other .body and .cancel`.