add css-modules support 🎈

[mayank99]

trafficstars

this will now work:

import { css } from '@acab/ecsstatic/modules';

const styles = css`
  .wrapper {
    display: grid;
    place-items: center;
  }
  .button {
    font: inherit;
    color: hotpink;
  }
`;

export () => (
  <div class={styles.wrapper}>
   <button class={styles.button}>hi</button>
  </div>
);

see demo: https://stackblitz.com/edit/github-dsxixb?file=src%2FApp.tsx

[mayank99]

going to put this one on hold indefinitely. it's a neat idea but there are problems. documenting here for if i revisit this in the future.

typescript is the biggest issue. currently the return type is Record<string, string>, which is obviously not great. i would like the return type to have all the classes inferred from the css string, but this doesn't seem to be possible with tagged template literals css`...` because TemplateStringsArray loses info and does not take a generic (https://github.com/microsoft/TypeScript/issues/33304).

i made some progress with a regular css(...) function but then we lose syntax highlighting and intellisense from the vscode-styled-components extension, which is even worse than having no type-safety.

[tomahl]

If you disregard the problem with TS, CSS modules would have also solved the problem of creating global styles right? I'm thinking of the :global {} selector.