PostCSS Svelte Cascade

A PostCSS plugin that makes writing global and cascading styles in Svelte easier:

@global {
  .a .b .c {
    color: black;
  }
}

@cascade .a {
  .b .c {
    color: pink;
  }
}

/* after */

:global(.a) :global(.b) :global(.c) {
  color: black;
}

.a :global(.b) :global(.c) {
  color: pink;
}

Install

npm install --save postcss-svelte-cascade

Usage

Add postcss-svelte-cascade to your PostCSS plugins array. Two good options for integrating PostCSS with Svelte are:

• svelte-preprocess
• svelte-preprocess-postcss

Features

postcss-svelte-cascade gives you two at-rules to use in your CSS: @global and @cascade.

@global

All selectors inside of a @global block are wrapped in :global(...) pseudoclasses, meaning Svelte doesn't scope them to the component in which they are declared:

@global {
  .a {
    color: black;
  }

  .b.c {
    color: pink;
  }
}

/* becomes */

:global(.a) {
  color: black;
}

:global(.b).c {
  color: pink;
}

@cascade

The @cascade at-rule takes a CSS selector as an argument. All selectors inside of a @cascade block are wrapped in :global(...) pseudoclasses and prefixed with the selector passed to @cascade:

@cascade .a {
  .b {
    color: black;
  }

  .c.d {
    color: pink;
  }
}

/* becomes */

.a :global(.b) {
  color: black;
}

.a :global(.c).d {
  color: pink;
}

License

MIT