feat: css-module and scoped css in shadow dom

Author: 3cp

app-min/src/css.d.ts__if_typescript

@@ -2,13 +2,21 @@
 import 'promise-polyfill/lib/polyfill';
 import { DebugConfiguration } from '@aurelia/debug';
 import { BasicConfiguration } from '@aurelia/jit-html-browser';
+// @if shadow-dom-open || shadow-dom-closed || css-module
+import { StyleConfiguration } from '@aurelia/runtime-html';
+// @endif
 import { Aurelia } from '@aurelia/runtime';
-import { App } from './app';
+import { MyApp } from './my-app';
 
 new Aurelia()
-  .register(BasicConfiguration, DebugConfiguration)
+  .register(
+    BasicConfiguration,
+    DebugConfiguration/* @if shadow-dom-open || shadow-dom-closed */,
+    StyleConfiguration.shadowDOM()/* @endif *//* @if css-module */,
+    StyleConfiguration.cssModulesProcessor()/* @endif */
+  )
   .app({
-    host: document.querySelector('app'),
-    component: App
+    host: document.querySelector('my-app'),
+    component: MyApp
   })
   .start();

app-min/src/html.d.ts__if_typescript

@@ -0,0 +1,11 @@
+declare module '*.html' {
+  import { IBindableDescription } from '@aurelia/runtime';
+  export const name: string;
+  export const template: string;
+  export default template;
+  export const dependencies: string[];
+  export const containerless: boolean | undefined;
+  export const bindables: Record<string, IBindableDescription>;
+  export const shadowOptions: { mode: 'open' | 'closed'} | undefined;
+  export function getHTMLOnlyElement();
+}

app-min/src/main.ext

@@ -101,7 +101,7 @@ function buildJs(src) {
 
   return gulp.src(src, {sourcemaps: !isProduction, since: gulp.lastRun(build)})
     .pipe(gulpif(!isProduction, plumber()))
-    .pipe(au2()) // inject aurelia conventions
+    .pipe(au2())
     .pipe(transpile);
 }
 
@@ -113,7 +113,10 @@ function buildHtml(src) {
     // @if shadow-dom-closed
     .pipe(au2({defaultShadowOptions: {mode: 'closed'}}));
     // @endif
-    // @if !shadow-dom-open && !shadow-dom-closed
+    // @if css-module
+    .pipe(au2({useCSSModule: true}));
+    // @endif
+    // @if !shadow-dom-open && !shadow-dom-closed && !css-module
     .pipe(au2()); // inject aurelia conventions
     // @endif
 }

app-min/src/view.d.ts__if_typescript

@@ -28,6 +28,14 @@ module.exports = [
       {value: 'shadow-dom-closed', title: 'ShadowDOM in closed mode', hint: "Closed mode means that you won't be able to access the shadow DOM from the outside."},
     ]
   },
+  {
+    if: '!shadow-dom-open && !shadow-dom-closed',
+    message: 'Do you want to use CSS Module?',
+    choices: [
+      {title: 'No'},
+      {value: 'css-module', title: 'CSS Module is an alternative way to locally scope CSS class names. Do not use it together with ShadowDOM.'},
+    ]
+  },
   {
     message: 'What transpiler would you like to use?',
     choices: [

dumber/gulpfile.js

@@ -41,7 +41,10 @@ module.exports = function(env, { mode }) {
         // @if shadow-dom-closed
         { test: /\.html$/i, use: { loader: '@aurelia/webpack-loader', options: { defaultShadowOptions: { mode: 'closed' } } }, exclude: /node_modules/ }
         // @endif
-        // @if !shadow-dom-open && !shadow-dom-closed
+        // @if css-module
+        { test: /\.html$/i, use: { loader: '@aurelia/webpack-loader', options: { useCSSModule: true } }, exclude: /node_modules/ }
+        // @endif
+        // @if !shadow-dom-open && !shadow-dom-closed && !css-module
         { test: /\.html$/i, use: '@aurelia/webpack-loader', exclude: /node_modules/ }
         // @endif
       ]