Make Svelte Styles Global Again!

PostCSS plugin postcss-svelte-global-styles.

Install

npm install --save-dev postcss-svelte-global-styles

or

npm i -D HeadMad/postcss-svelte-global-styles

Exemple

/* Before */
.foo {
  width: 300px;
}
 
.bar,
.baz {
  height: 300px;
}

/* After */
:global(.foo) {
  width: 300px;
}
 
:global(.bar),
:global(.baz) {
  height: 300px;
}

Usage

Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you already use PostCSS, add the plugin to plugins list:

module.exports = {
  plugins: [
    require('postcss-svelte-global-styles'),
    require('autoprefixer')
  ]
}