Style modules API

[LarsDenBakker]

Now that there is a new style system, I think it's good to consider how to create shared style modules. In Polymer we used to do this:

<!-- file: style-module-a.html -->
<dom-module id="style-module-a">
  <template>
    <style>/* ... */</style>
  </template>
</dom-module>

<!-- file: style-module-b.html -->
<dom-module id="style-module-b">
  <template>
    <style include="style-module-a">/* ... */</style>
  </template>
</dom-module>

This way you could use style-module-b without knowing that it also composes style-module-a.

With the new LitElement style system, it would translate to this:

// file: style-module-a.js
export const styleModuleA = css`
  ...
`;

// file: style-module-b.js
import { styleModuleA } from './style-module-a.js';

export const styleModuleB = [
  styleModuleA,
  css`
    ...
  `;
];

This is a bit awkward, as the consumer of style-module-b now has to know that it is an array of styles and has to spread it:

class MyElement extends LitElement {
  static get styles() {
    return [
      ..styleModuleB,
      styleModuleC
    ];
  }
}

But this also means that styleModuleB could never change back to not being an array, and styleModuleC can never change to being an array of styles.

We could solve this by making style modules always an array, even if there is only one entry. Another solution would be if LitElement flattened the styles array so that you don't need to worry about this.

[sorvell]

The reason that static get styles must return an array to make composition easier.

I think it's reasonable to flatten the array of styles and we'd accept a PR for that.

[justinfagnani]

Why do we need to support this when we have array spread syntax? It's prefer to not add code for things the language already does for us.

[justinfagnani]

One thing that would make flattening worth it to me is if we changed the styles property to allow for a single CssResult. Then merging in super-class styles would always be [super.styles, css`...`] and writing styles would be simpler for the single-stylesheet case.

[logicalphase]

I agree with @justinfagnani last comment. That provides a good relief solution for those who really want/need a single stylesheet method.

[LarsDenBakker]

Yes definitely make sense to support single CSSResult values.