Style dictionary build

package.json

@@ -7,7 +7,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "npm run test --workspace=@muon/library",
+    "test": "muon-build-styles && npm run test --workspace=@muon/library",
     "test:watch": "npm run test --workspace=@muon/library -- --watch",
     "test:snapshots": "npm run test --workspace=@muon/library -- --update-snapshots",
     "dev": "muon-serve",

packages/library/package.json

@@ -9,7 +9,8 @@
   },
   "bin": {
     "muon": "./scripts/index.mjs",
-    "muon-serve": "./scripts/serve.mjs"
+    "muon-serve": "./scripts/serve.mjs",
+    "muon-build-styles": "./scripts/build-styles.mjs"
   },
   "keywords": [],
   "author": "",

packages/library/scripts/build-styles.mjs

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+import { createTokens } from './style-dictionary-create.mjs';
+
+createTokens();

packages/library/scripts/serve.mjs

@@ -15,21 +15,16 @@ import { startDevServer } from '@web/dev-server';
 import deepmerge from 'deepmerge';
 import commandLineArgs from 'command-line-args';
 import StorybookConfig from '../storybook/server.config.mjs';
-import StyleDictionary from 'style-dictionary';
-import styleConfig from './style-dictionary.mjs';
-import colorTransform from '../tokens/utils/transforms/color.js';
-import stringTransform from '../tokens/utils/transforms/string.js';
-import _ from 'lodash';
 
 import postcss from 'postcss';
 import autoprefixer from 'autoprefixer';
 import postcssPreset from 'postcss-preset-env';
 import postcssImport from 'postcss-import';
 
 import { fileURLToPath } from 'url';
-
 const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+
+import { createTokens } from './style-dictionary-create.mjs';
 
 const globalCSSUrl = path.join(__filename, '..', '..', 'css', 'global.css');
 
@@ -43,23 +38,6 @@ catch (e) {
   process.exit(1);
 }
 
-// Set the overriding tokens if there are any
-if (config.tokens && config.tokens.dir) {
-  styleConfig.source = config.tokens.dir;
-}
-const tokenUtils = path.join(__dirname, '..', 'tokens', 'utils');
-const cssFontTemplate = _.template(fs.readFileSync(path.join(tokenUtils, 'templates', 'font-face.css.template')));
-
-const styleDictionary = StyleDictionary.extend(styleConfig);
-
-styleDictionary.registerFormat({
-  name: 'css/fonts',
-  formatter: cssFontTemplate
-});
-
-styleDictionary.registerTransform(stringTransform);
-styleDictionary.registerTransform(colorTransform);
-
 /*
 - Set variables from config
 */
@@ -125,8 +103,8 @@ const analyse = async () => {
 };
 
 const createStyleTokens = async () => {
-    await styleDictionary.buildAllPlatforms();
-    await createGlobalCSS();
+  await createTokens();
+  await createGlobalCSS();
 
   copyDir(path.join(__filename, '..', '..', 'build'), destination);
 };

packages/library/scripts/style-dictionary-create.mjs

@@ -0,0 +1,49 @@
+import StyleDictionary from 'style-dictionary';
+import _ from 'lodash';
+import path from 'path';
+import fs from 'fs';
+
+import styleConfig from './style-dictionary.mjs';
+import colorTransform from '../tokens/utils/transforms/color.js';
+import stringTransform from '../tokens/utils/transforms/string.js';
+
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+let config = {};
+
+try {
+  config = JSON.parse(fs.readFileSync('muon.config.json').toString());
+}
+catch (e) {
+  console.error('Missing config, is this the right folder?', e);
+  process.exit(1);
+}
+
+// Set the overriding tokens if there are any
+if (config.tokens && config.tokens.dir) {
+  styleConfig.source = config.tokens.dir;
+}
+
+const tokenUtils = path.join(__dirname, '..', 'tokens', 'utils');
+const cssFontTemplate = _.template(fs.readFileSync(path.join(tokenUtils, 'templates', 'font-face.css.template')));
+
+const styleDictionary = StyleDictionary.extend(styleConfig);
+
+styleDictionary.registerFormat({
+  name: 'css/fonts',
+  formatter: cssFontTemplate
+});
+
+styleDictionary.registerTransform(stringTransform);
+styleDictionary.registerTransform(colorTransform);
+
+const createTokens = async () => {
+  await styleDictionary.buildAllPlatforms();
+};
+
+export {
+  styleDictionary,
+  createTokens
+};