@muonic/muon 0.0.2-beta.22 → 0.0.2-beta.24

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.2-beta.24](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.23...v0.0.2-beta.24) (2023-07-04)
+
+### [0.0.2-beta.23](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.22...v0.0.2-beta.23) (2023-07-04)
+
 ### [0.0.2-beta.22](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.21...v0.0.2-beta.22) (2023-06-15)
 
 

package/components/form/src/form-component.js

@@ -73,7 +73,7 @@ export class Form extends MuonElement {
       !this._resetButton.loading
     ) {
       this._nativeForm.reset();
-      Array.from(this._nativeForm.elements).forEach((element) => {
+      Array.from(this._elements).forEach((element) => {
         const componentElement = this._findInputElement(element);
         if (componentElement !== element) {
           componentElement.reset?.();
@@ -111,6 +111,10 @@ export class Form extends MuonElement {
     return validity.isValid;
   }
 
+  get _elements() {
+    return this._nativeForm.elements;
+  }
+
   get _nativeForm() {
     return this.querySelector('form');
   }
@@ -142,7 +146,7 @@ export class Form extends MuonElement {
   validate() {
     let isValid = true;
     // @TODO: Check how this works with form associated
-    const validationStates = Array.from(this._nativeForm.elements).reduce((acc, element) => {
+    const validationStates = Array.from(this._elements).reduce((acc, element) => {
       element = this._findInputElement(element);
       const { name } = element;
       const hasBeenSet = acc.filter((el) => el.name === name).length > 0;

package/muon-element/index.js

@@ -48,14 +48,17 @@ export const MuonElementMixin = (superClass) => class extends superClass {
       }
 
       const addStyles = (css, key = 0) => {
-        const clonedCSS = Object.assign({}, css);
+        if (typeof css !== 'string' || !css) {
+          return;
+        }
+
         const nodeName = this.nodeName.toLowerCase();
         const parentNode = this.getRootNode();
         const parentNodeType = parentNode.nodeName;
         const styleName = key > 0 ? `${nodeName}-styles-${key}` : `${nodeName}-styles`;
 
         // First need to replace `light-dom` with the component name
-        clonedCSS.cssText = clonedCSS.cssText.replace(/light-dom/g, nodeName);
+        css = css.replace(/light-dom/g, nodeName);
 
         // How we add the styles depends on where it is being added, HTMLDocument or another ShadowDom.
         // If the Document we don't want to add multiple times
@@ -66,10 +69,10 @@ export const MuonElementMixin = (superClass) => class extends superClass {
           if (supportsAdoptingStyleSheets) {
             const stylesheet = new CSSStyleSheet();
 
-            stylesheet.replaceSync(clonedCSS.cssText);
+            stylesheet.replaceSync(css);
             stylesAdded = [...parentNode.adoptedStyleSheets, stylesheet];
           } else {
-            stylesAdded = [clonedCSS];
+            stylesAdded = [css];
           }
 
           adoptStyles(parentNode, stylesAdded);
@@ -79,11 +82,13 @@ export const MuonElementMixin = (superClass) => class extends superClass {
 
           if (!Array.from(checkSheets(styleSheets, styleName)).length > 0) {
             const style = document.createElement('style');
-            style.innerHTML = String.raw`${clonedCSS.cssText}`;
+            style.innerHTML = String.raw`${css}`;
             style.title = styleName;
             document.head.appendChild(style);
           }
         }
+
+        return;
       };
 
       if (Array.isArray(css)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-beta.22",
+  "version": "0.0.2-beta.24",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -34,6 +34,7 @@
     "chokidar": "3.5.3",
     "chroma-js": "2.4.2",
     "command-line-args": "5.2.1",
+    "cssnano": "6.0.1",
     "deepmerge": "4.3.1",
     "glob": "10.2.2",
     "glob-to-regexp": "0.4.1",
@@ -46,6 +47,7 @@
     "postcss-import": "15.1.0",
     "postcss-preset-env": "8.3.2",
     "postcss-simple-vars": "7.0.1",
+    "rollup-plugin-import-css": "3.3.1",
     "rollup-plugin-lit-css": "4.0.1",
     "rollup-plugin-minify-html-literals": "1.2.6",
     "rollup-plugin-styles": "4.0.0",

package/scripts/rollup-plugins.mjs

@@ -8,7 +8,9 @@ import postcssPreset from 'postcss-preset-env';
 import postcssImport from 'postcss-import';
 import postcssVariables from 'postcss-simple-vars';
 import postcssExtendRule from 'postcss-extend-rule';
+import cssnanoPlugin from 'cssnano';
 import litcssPlugin from 'rollup-plugin-lit-css';
+import cssPlugin from 'rollup-plugin-import-css';
 import { cleanup, getConfig, getDestination, createTokens, sourceFilesAnalyzer, getAliasPaths } from './utils/index.mjs';
 
 import path from 'path';
@@ -50,7 +52,17 @@ const postcssPlugins = [
     }
   }),
   postcssExtendRule(),
-  autoprefixer({ grid: true })
+  autoprefixer({ grid: true }),
+  cssnanoPlugin({
+    preset: [
+      'default',
+      {
+        discardComments: {
+          removeAll: true
+        }
+      }
+    ]
+  })
 ];
 
 const createGlobalCSS = async () => {
@@ -108,6 +120,7 @@ const muonPlugin = () => {
 const styles = fromRollup(stylesPlugin);
 const replace = fromRollup(replacePlugin);
 const litcss = fromRollup(litcssPlugin);
+const css = fromRollup(cssPlugin);
 const alias = fromRollup(aliasPlugin);
 const muon = fromRollup(muonPlugin);
 const buildTokens = fromRollup(buildTokensPlugin);
@@ -134,7 +147,8 @@ export const serverPlugins = [
   alias(aliasConfig),
   replace(replaceConfig),
   styles(styleConfig),
-  litcss({ exclude: ['**/css/*.css', '**/dist/*.css', 'muon.min.css'] }),
+  litcss({ exclude: ['**/css/*.css', '**/dist/*.css', 'muon.min.css', '**/**/*.slotted.css'] }),
+  css({ include: '**/**/*.slotted.css' }),
   muon()
 ];
 
@@ -143,6 +157,7 @@ export const rollupPlugins = [
   aliasPlugin(aliasConfig),
   replacePlugin(replaceConfig),
   stylesPlugin(styleConfig),
-  litcssPlugin({ exclude: ['**/css/*.css', '**/dist/*.css', 'muon.min.css'] }),
+  litcssPlugin({ exclude: ['**/css/*.css', '**/dist/*.css', 'muon.min.css', '**/**/*.slotted.css'] }),
+  cssPlugin({ include: '**/**/*.slotted.css' }),
   muonPlugin()
 ];

package/tests/mixins/muon-element.test.js

@@ -4,10 +4,7 @@ import { MuonElement, ScopedElementsMixin } from '@muonic/muon';
 
 const MuonComponent = class extends MuonElement {
   get slottedStyles() {
-    return {
-      _$cssResult$: true,
-      cssText: 'light-dom{color:red}'
-    };
+    return 'light-dom{color:red}';
   }
 
   get standardTemplate() {