Allow option for CSS to be scoped to module

[danrichman]

Lasso could offer functionality to scope CSS to a module. As you suggested on gitter, the following syntax may work:

<css-classes import "./style.css" as classNames />
<div class=classNames('active')></div>

A CSS, Less, Sass or Stylus file could opt-in with a /* css-prefix */ directive.

Users could also configure how selectors were prefixed in their Lasso configuration.

For example:

[basename(dirname)]-[local]-[path-hash] (e.g. app-button-active-abc123)

See also: CSS-modules: Why this is the most significant improvement to CSS in years CSS Modules: Welcome to the Future

[danrichman]

Adding another take on Module scoping, from Vue.js:

VueJS: Scoped CSS (lists minor caveats)

Single-file module:

<style>
/* global styles */
</style>

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

Renders:

<style>
/* global styles */
</style>

<style>
.example[_v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" _v-f3f3eg9>hi</div>
</template>