Add support for shared CSS

[thescientist13]

One really nice feature of tools like LESS and Sass is being able to @import other LESS / SASS files and more importantly, be able to share variables through them. Often there would be a "main" CSS file that all the other components could import and reuse.

Documenting a pattern for this should be a top priority.

[thescientist13]

I suppose it as easy as just @import ing the CSS from another component adding it to the component's style tag

import { html } from 'lit-html';
import css from './component.css';
import sharedCss from '../app/app.css';

class MyComponent extends HTMLElement {
  /* code /*

  render() {
    return html`
      <styles>
       ${sharedCss}
       ${css}
      </styles>
    `
  }
}

Maybe this has overlaps with CSS Production / native bundling, to help ensure a lot of duplicate styles aren't generated / bundled.

[thescientist13]

Wonder if CSS modules could help here? https://twitter.com/justinfagnani/status/1121126623124705280

cc: @hutchgrant

[thescientist13]

also, not sure if this doc is of any help https://blog.webf.zone/on-styling-web-components-b74b8c70c492