Ripple | PreCSS

Extends the rendering pipeline to prepend stylesheet(s) for a component. It will be added to either the start of the shadow root if one exists, or scoped and added once in the head.

Using the following syntax:

<component-name css="styles.css">

A style tag with the CSS styles from the specified resource (ripple('styles.css')) will be added to the beginning of the shadow root.

<component-name css="styles.css">
  #shadow-root
    <style resource="styles.css"> /* ... */ </style>

If there is no shadow, the styles will scoped and added to the end of the document head. The style tags are deduped so there will only be one for each specfic CSS resource in use.

Multiple CSS modules are also possible:

<component-name css="component-styles.css fa-circle.css fa-square.css">
  #shadow-root
    <style resource="component-styles.css"> /* ... */ </style>
    <style resource="fa-circle.css"> /* ... */ </style>
    <style resource="fa-square.css"> /* ... */ </style>