@muonic/muon 0.0.2-beta.4 → 0.0.2-beta.6

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.6](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.5...v0.0.2-beta.6) (2023-03-28)
+
+
+### Features
+
+* postcss extend ([7608e26](https://github.com/centrica-engineering/muon/commit/7608e26e1f1876abacbca562fb6724bebc0cbf50))
+
+### [0.0.2-beta.5](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.4...v0.0.2-beta.5) (2023-02-27)
+
+
+### Features
+
+* global styles ([6705c22](https://github.com/centrica-engineering/muon/commit/6705c224f7664e1ab6ad9d7261921474de1bf0fc))
+
 ### [0.0.2-beta.4](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.3...v0.0.2-beta.4) (2023-02-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-beta.4",
+  "version": "0.0.2-beta.6",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -42,6 +42,7 @@
     "path-is-inside": "1.0.2",
     "postcss": "8.4.14",
     "postcss-clean": "1.2.2",
+    "postcss-extend-rule": "^4.0.0",
     "postcss-import": "14.1.0",
     "postcss-preset-env": "7.7.2",
     "postcss-simple-vars": "6.0.3",

package/scripts/rollup-plugins.mjs

@@ -3,9 +3,11 @@ import stylesPlugin from 'rollup-plugin-styles';
 import replacePlugin from '@rollup/plugin-replace';
 import aliasPlugin from '@rollup/plugin-alias';
 import autoprefixer from 'autoprefixer';
+import postcss from 'postcss';
 import postcssPreset from 'postcss-preset-env';
 import postcssImport from 'postcss-import';
 import postcssVariables from 'postcss-simple-vars';
+import postcssExtendRule from 'postcss-extend-rule';
 import litcssPlugin from 'rollup-plugin-lit-css';
 import { cleanup, getConfig, getDestination, createTokens, sourceFilesAnalyzer, getAliasPaths } from './utils/index.mjs';
 
@@ -18,19 +20,6 @@ const __dirname = path.dirname(__filename);
 
 const config = getConfig();
 
-const muonPlugin = () => {
-  return {
-    name: 'muon',
-    async buildStart() {
-      const destination = getDestination();
-      cleanup(destination, true).then(async () => {
-        const cejson = await sourceFilesAnalyzer();
-        fs.writeFileSync(path.join(destination, 'custom-elements.json'), cejson);
-      });
-    }
-  };
-};
-
 const tokenPath = path.join(__dirname, '..', 'build', 'tokens', 'es6', 'muon-tokens.mjs');
 let designTokens = {};
 
@@ -44,17 +33,6 @@ const buildTokensPlugin = () => {
   };
 };
 
-const styles = fromRollup(stylesPlugin);
-const replace = fromRollup(replacePlugin);
-const litcss = fromRollup(litcssPlugin);
-const alias = fromRollup(aliasPlugin);
-const muon = fromRollup(muonPlugin);
-const buildTokens = fromRollup(buildTokensPlugin);
-
-const aliasConfig = {
-  entries: getAliasPaths('regex')
-};
-
 const postcssPlugins = [
   postcssVariables({
     variables() {
@@ -71,18 +49,72 @@ const postcssPlugins = [
       'logical-properties-and-values': false /* allowing start end values */
     }
   }),
+  postcssExtendRule(),
   autoprefixer({ grid: true })
 ];
 
-// @TODO: bring back when global css is used
-// const createGlobalCSS = async (destination) => {
-//   const globalCSSUrl = path.join(__filename, '..', '..', '..', 'css', 'global.css');
-//   const globalCSSDest = path.join(destination, 'muon.min.css');
-//   const globalCSS = fs.readFileSync(globalCSSUrl);
-//   const processedCSS = await postcss(postcssPlugins).process(globalCSS, { from: globalCSSUrl, to: globalCSSDest });
+const createGlobalCSS = async () => {
+  const globalCSSUrl = path.join(process.cwd(), 'css', 'global.css');
+
+  if (fs.existsSync(globalCSSUrl)) {
+    const globalCSS = fs.readFileSync(globalCSSUrl);
+    const processedCSS = await postcss(postcssPlugins).process(globalCSS, { from: globalCSSUrl });
+    return processedCSS.css;
+  }
+
+  return undefined;
+};
 
-//   fs.writeFileSync(globalCSSDest, processedCSS.css, 'utf8');
-// };
+const muonPlugin = () => {
+  return {
+    name: 'muon',
+    async buildStart() {
+      const destination = getDestination();
+      cleanup(destination, true).then(async () => {
+        const cejson = await sourceFilesAnalyzer();
+        fs.writeFileSync(path.join(destination, 'custom-elements.json'), cejson);
+      });
+    },
+    async transform(code, id) {
+      if (id.includes(path.join('muon', 'index.js'))) {
+        const globalCSS = await createGlobalCSS();
+
+        if (!globalCSS) {
+          return null;
+        }
+
+        if (!code?.includes('globalCSS')) {
+          return {
+            code: `
+              const globalCSS = document.createElement('style');
+              globalCSS.innerHTML = \`${globalCSS}\`;
+              document.head.appendChild(globalCSS);
+              ${code}
+            `,
+            map: null
+          };
+        } else {
+          return {
+            code
+          };
+        }
+      }
+
+      return null;
+    }
+  };
+};
+
+const styles = fromRollup(stylesPlugin);
+const replace = fromRollup(replacePlugin);
+const litcss = fromRollup(litcssPlugin);
+const alias = fromRollup(aliasPlugin);
+const muon = fromRollup(muonPlugin);
+const buildTokens = fromRollup(buildTokensPlugin);
+
+const aliasConfig = {
+  entries: getAliasPaths('regex')
+};
 
 const styleConfig = {
   mode: 'emit',

package/storybook/server.config.mjs

@@ -9,6 +9,9 @@ export default {
   nodeResolve: true,
   mimeTypes: {
     '**/*.json': 'js',
+    '**/css/*.css': 'text/css',
+    '**/dist/*.css': 'text/css',
+    'muon.min.css': 'text/css',
     '**/*.css': 'js'
   },
   plugins: [