Feature/builder

packages/library/components/cta/src/cta-component.js

@@ -1,4 +1,4 @@
-import { MuonElement, css, html, unsafeCSS, classMap, ScopedElementsMixin, literal, staticHTML, ifDefined } from '@muons/library';
+import { MuonElement, html, classMap, ScopedElementsMixin, literal, staticHTML, ifDefined } from '@muons/library';
 import { Icon } from '@muons/library/components/icon';
 import {
   CTA_TYPE,
@@ -37,7 +37,7 @@ export class Cta extends ScopedElementsMixin(MuonElement) {
   }
 
   static get styles() {
-    return css`${unsafeCSS(styles)}`;
+    return styles;
   }
 
   constructor() {

packages/library/components/icon/src/icon-component.js

@@ -1,4 +1,4 @@
-import { MuonElement, css, html, unsafeCSS, ifDefined, classMap, styleMap } from '@muons/library';
+import { MuonElement, html, ifDefined, classMap, styleMap } from '@muons/library';
 import { svgLoader } from '@muons/library/directives/svg-loader';
 import {
   ICON_TYPE,
@@ -30,7 +30,7 @@ export class Icon extends MuonElement {
   }
 
   static get styles() {
-    return css`${unsafeCSS(styles)}`;
+    return styles;
   }
 
   constructor() {

packages/library/components/image/src/image-component.js

@@ -1,4 +1,4 @@
-import { MuonElement, css, html, unsafeCSS, styleMap, classMap } from '@muons/library';
+import { MuonElement, html, styleMap, classMap } from '@muons/library';
 import { imageInlineLoader, imageBackgroundLoader } from '@muons/library/directives/image-loader';
 import {
   IMAGE_TYPE,
@@ -32,7 +32,7 @@ export class Image extends MuonElement {
   }
 
   static get styles() {
-    return css`${unsafeCSS(styles)}`;
+    return styles;
   }
 
   constructor() {

packages/library/components/inputter/src/inputter-component.js

@@ -1,4 +1,4 @@
-import { css, html, MuonElement, unsafeCSS, classMap } from '@muons/library';
+import { html, MuonElement, classMap } from '@muons/library';
 import {
   INPUTTER_TYPE
 } from '@muons/library/build/tokens/es6/muon-tokens';
@@ -24,7 +24,7 @@ export class Inputter extends ValidationMixin(MuonElement) {
   }
 
   static get styles() {
-    return css`${unsafeCSS(styles)}`;
+    return styles;
   }
 
   constructor() {

packages/library/package.json

@@ -36,6 +36,7 @@
     "postcss-import": "^14.0.1",
     "postcss-preset-env": "^7.0.1",
     "postcss-simple-vars": "^6.0.3",
+    "rollup-plugin-lit-css": "^3.2.1",
     "rollup-plugin-styles": "^3.14.1",
     "style-dictionary": "^3.0.1",
     "web-component-analyzer": "^1.1.6"

packages/library/rollup.config.mjs

@@ -1,5 +1,5 @@
 import merge from 'deepmerge';
-import plugins from '@muons/library/scripts/rollup-plugins.mjs';
+import { rollupPlugins } from '@muons/library/scripts/rollup-plugins.mjs';
 
 import { createBasicConfig } from '@open-wc/building-rollup';
 
@@ -12,13 +12,13 @@ export default merge(config, {
   input,
   treeshake: false,
   plugins: [
-    ...plugins
+    ...rollupPlugins
   ],
   output: {
     ...config.output,
     dir: undefined,
     file: 'dist/index.js',
     sourcemap: false,
     inlineDynamicImports: true
-  },
+  }
 });

packages/library/scripts/rollup-plugins.mjs

@@ -5,34 +5,49 @@ import autoprefixer from 'autoprefixer';
 import postcssPreset from 'postcss-preset-env';
 import postcssImport from 'postcss-import';
 import postcssVariables from 'postcss-simple-vars';
+import litcssPlugin from 'rollup-plugin-lit-css';
 import * as variables from '../build/tokens/es6/muon-tokens.mjs';
 
 const styles = fromRollup(stylesPlugin);
 const replace = fromRollup(replacePlugin);
+const litcss = fromRollup(litcssPlugin);
 
-export default [
-  replace({
-    preventAssignment: true,
-    values: {
-      'process.env.MUON_PREFIX': JSON.stringify('muon')
-    }
-  }),
-  styles({
-    plugins: [
-      postcssVariables({
-        variables,
-        unknown(node) {
-          node.remove(); // removing unknown or unset tokens
-        }
-      }),
-      postcssImport(),
-      postcssPreset({
-        stage: 0,
-        features: {
-          'logical-properties-and-values': false /* allowing start end values */
-        }
-      }),
-      autoprefixer({ grid: true })
-    ]
-  })
+const styleConfig = {
+  mode: 'emit',
+  minimize: true,
+  plugins: [
+    postcssVariables({
+      variables,
+      unknown(node) {
+        node.remove(); // removing unknown or unset tokens
+      }
+    }),
+    postcssImport(),
+    postcssPreset({
+      stage: 0,
+      features: {
+        'logical-properties-and-values': false /* allowing start end values */
+      }
+    }),
+    autoprefixer({ grid: true })
+  ]
+};
+
+const replaceConfig = {
+  preventAssignment: true,
+  values: {
+    'process.env.MUON_PREFIX': JSON.stringify('muon')
+  }
+};
+
+export const serverPlugins = [
+  replace(replaceConfig),
+  styles(styleConfig),
+  litcss()
+];
+
+export const rollupPlugins = [
+  replacePlugin(replaceConfig),
+  stylesPlugin(styleConfig),
+  litcssPlugin()
 ];

packages/library/storybook/server.config.mjs

@@ -1,5 +1,5 @@
 import { storybookPlugin } from '@web/dev-server-storybook';
-import plugins from '@muons/library/scripts/rollup-plugins.mjs';
+import { serverPlugins } from '@muons/library/scripts/rollup-plugins.mjs';
 
 // process.env.MUON_PREFIX = 'testing';
 
@@ -10,7 +10,7 @@ export default {
     '**/*.css': 'js'
   },
   plugins: [
-    ...plugins,
+    ...serverPlugins,
     storybookPlugin({ type: 'web-components' })
   ]
 };

packages/library/web-test-runner.browserstack.config.mjs

@@ -1,6 +1,6 @@
 import { browserstackLauncher } from '@web/test-runner-browserstack';
 
-import plugins from '@muons/library/scripts/rollup-plugins.mjs';
+import { serverPlugins } from '@muons/library/scripts/rollup-plugins.mjs';
 
 // options shared between all browsers
 const sharedCapabilities = {
@@ -23,7 +23,7 @@ export default {
     '**/*.css': 'js'
   },
   plugins: [
-    ...plugins
+    ...serverPlugins
   ],
   // how many browsers to run concurrently in browserstack. increasing this significantly
   // reduces testing time, but your subscription might limit concurrent connections

packages/library/web-test-runner.config.mjs

@@ -1,5 +1,5 @@
 import { playwrightLauncher } from '@web/test-runner-playwright';
-import plugins from '@muons/library/scripts/rollup-plugins.mjs';
+import { serverPlugins } from '@muons/library/scripts/rollup-plugins.mjs';
 
 // process.env.MUON_PREFIX = 'testing';
 
@@ -17,7 +17,7 @@ export default {
   testsStartTimeout: 20000, // default 10000
   testsFinishTimeout: 60000, // default 20000
   plugins: [
-    ...plugins
+    ...serverPlugins
   ],
   coverageConfig: {
     threshold: {