@muonic/muon 0.0.2-experimental-163-66fa43f.0 → 0.0.2-experimental-165-5c9b40f.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.3](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.2...v0.0.2-beta.3) (2023-02-21)
+
+
+### Features
+
+* getters for style and class ([e486ea2](https://github.com/centrica-engineering/muon/commit/e486ea2d25c5a6eb0ce5acb1701cc33e1443bc56))
+
 ### [0.0.2-beta.2](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.1...v0.0.2-beta.2) (2023-02-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-163-66fa43f.0",
+  "version": "0.0.2-experimental-165-5c9b40f.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/scripts/utils/index.mjs

@@ -15,6 +15,7 @@ import stringTransform from '../../tokens/utils/transforms/string.js';
 import jsonReference from '../../tokens/utils/formats/reference.js';
 import { getConfig, getDestination } from './config.mjs';
 import { fileURLToPath } from 'url';
+import merge from 'deepmerge';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -206,16 +207,26 @@ const sourceFilesAnalyzer = async () => {
 
 const styleDictionary = async () => {
   const config = getConfig();
+  let dictionaryConfig = {
+    ...styleConfig
+  };
 
   // Set the overriding tokens if there are any
-  if (config.tokens && config.tokens.dir) {
-    styleConfig.source = config.tokens.dir;
+  if (config?.tokens?.dir) {
+    dictionaryConfig.source = config.tokens.dir;
+  }
+
+  if (config?.tokens?.configFile) {
+    const { default: tokensConfig } = await import(path.join(process.cwd(), config.tokens.configFile));
+    if (tokensConfig) {
+      dictionaryConfig = merge(dictionaryConfig, tokensConfig);
+    }
   }
 
   const tokenUtils = path.join(__dirname, '..', '..', 'tokens', 'utils');
   const cssFontTemplate = _.template(fs.readFileSync(path.join(tokenUtils, 'templates', 'font-face.css.template')));
 
-  const styleDict = StyleDictionary.extend(styleConfig);
+  const styleDict = StyleDictionary.extend(dictionaryConfig);
 
   styleDict.registerFormat(jsonReference);
 

package/tests/scripts/utils/font.css.template

@@ -0,0 +1,4 @@
+<%_.forIn(properties && properties.theme && properties.theme.font && properties.theme.font.family, function(fontFamily) {
+%>
+font-family: "<%= fontFamily.value %>";
+<% }); %>

package/tests/scripts/utils/muon.config.style-dictionary.test.json

@@ -0,0 +1,14 @@
+{
+  "components": {
+    "included": ["inputter" ,"card","image"],
+    "dir": "tests/scripts/utils/*-component.js"
+  },
+  "tokens": {
+    "dir": ["tokens/*.json"],
+    "theme": "default",
+    "configFile": "./tests/scripts/utils/style-dictionary.config.mjs"
+  },
+  "alias": {
+    "@muon/utils/validation": "./utils/validation"
+  }
+}

package/tests/scripts/utils/style-dictionary.config.mjs

@@ -0,0 +1,32 @@
+import path from 'path';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+import _ from 'lodash';
+
+const __filename = fileURLToPath(import.meta.url);
+const root = path.join(__filename, '..', '..', '..', '..');
+const buildPath = path.join(root, 'build', 'tokens');
+export default {
+  format: {
+    'font-template': ({ dictionary, platform }) => {
+      return _.template(fs.readFileSync(path.join(__filename, '..', 'font.css.template')))({ properties: dictionary.tokens });
+    }
+  },
+  platforms: {
+    template: {
+      buildPath: path.join(buildPath, 'css/'),
+      files: [
+        {
+          destination: 'font-family.css',
+          format: 'font-template'
+        }
+      ],
+      filter: {
+        attributes: {
+          category: 'theme',
+          type: 'font'
+        }
+      }
+    }
+  }
+};

package/tests/scripts/utils/utils-test.mjs

@@ -238,6 +238,21 @@ testRunner('sourceFilesAnalyzer single file', async (t) => {
   });
 });
 
+testRunner('create template', async (t) => {
+  const stub = await esmock('../../../scripts/utils/index.mjs', {
+    '../../../scripts/utils/config.mjs': {
+      getConfig: (configFile) => JSON.parse(fs.readFileSync('tests/scripts/utils/muon.config.style-dictionary.test.json').toString())
+    }
+  });
+  await stub.createTokens();
+  t.true(fs.existsSync(path.join(process.cwd(), 'build', 'tokens', 'css', 'font-family.css')), 'font css file not exist');
+  t.true(fs.existsSync(path.join(process.cwd(), 'build', 'tokens', 'css', 'mn-fonts.css')), 'font css file not exist');
+  t.true(fs.existsSync(path.join(process.cwd(), 'build', 'tokens', 'es6', 'muon-tokens-module.js')), 'muon-tokens-module.js don\'t exist');
+  t.true(fs.existsSync(path.join(process.cwd(), 'build', 'tokens', 'es6', 'muon-tokens.js')), 'muon-tokens.js don\'t exist');
+  t.true(fs.existsSync(path.join(process.cwd(), 'build', 'tokens', 'es6', 'muon-tokens.mjs')), 'muon-tokens.mjs don\'t exist');
+  t.true(fs.existsSync(path.join(process.cwd(), 'build', 'tokens', 'json', 'muon-tokens-reference.json')), 'muon-tokens-reference.json don\'t exist');
+});
+
 testRunner('create tokens', async (t) => {
   await utilsLibrary.createTokens();
   t.true(fs.existsSync(path.join(process.cwd(), 'build', 'tokens', 'css', 'mn-fonts.css')), 'font css file not exist');