@madgex/fert 5.0.15 → 6.0.1

package/README.md

@@ -79,12 +79,11 @@ e.g.
 
 `/services/<service-folder>/fert.service.config.js` [required] – a service configuration file in the service folder, specifying the following config to both the Fert dev server and the production asset build:
 
-| Option                        |                                                                                                                                            |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `serviceName` <String>        | Which service to display and deploy, e.g. `jobseekers-frontend`, `recruiterservices-frontend`.                                             |
-| `entry` <String>              | The JavaScript entry file. Any assets (CSS/SCSS/SVGs) included will be processed and be part of the output. Defaults to `['src/index.js']` |
-| `externalAssets` <Object>     |                                                                                                                                            |
-
+| Option                    |                                                                                                                                            |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `serviceName` <String>    | Which service to display and deploy, e.g. `jobseekers-frontend`, `recruiterservices-frontend`.                                             |
+| `entry` <String>          | The JavaScript entry file. Any assets (CSS/SCSS/SVGs) included will be processed and be part of the output. Defaults to `['src/index.js']` |
+| `externalAssets` <Object> |                                                                                                                                            |
 
 The `entry` will be used by Vite to create production bundles.
 

package/bin/commands/build-tasks/build-tokens.js

@@ -1,97 +1,36 @@
 const Path = require('node:path');
 const fs = require('node:fs/promises');
-const StyleDictionaryPackage = require('style-dictionary');
-const { registerTransforms } = require('@madgex/design-system/tasks/registerTransforms');
-const colorTransforms = require('@madgex/design-system/tasks/colorTransforms');
+const { createStyleDictionary } = require('@madgex/design-system/style-dictionary');
 const { ensureTrailingSlash, exists } = require('../../utils');
 const { log } = require('../../utils/logging');
-const { TMP_DIR } = require('../../../constants');
-
-const dsTokensPath = Path.dirname(require.resolve('@madgex/design-system/src/tokens/_config.js'));
-
-// eslint-disable-next-line no-unused-vars
-const createTempBrandFile = async (dir = './') => {
-  // Generate unique name to bust style dict cache
-  const timestamp = Date.now();
-  const tmpBrandFile = Path.join(TMP_DIR, `/fert/brand-${timestamp}.json`);
-  const dirPath = Path.dirname(tmpBrandFile);
-
-  if (!(await exists(dirPath))) {
-    await fs.mkdir(dirPath, { recursive: true });
-  }
-
-  return tmpBrandFile;
-};
-
-// Style Dictionary is noisy and annoying, this suppresses its output
-async function runSilently(fn) {
-  const originalLog = console.log;
-  console.log = () => {};
-  await fn();
-  console.log = originalLog;
-}
 
 module.exports = async function buildCssFromTokens(_srcTokensPath, _buildPath) {
   const srcTokensPath = ensureTrailingSlash(Path.resolve(_srcTokensPath));
   const buildPath = ensureTrailingSlash(Path.resolve(_buildPath));
 
-  const brandFile = Path.join(srcTokensPath, 'brand.json');
-
   if (!(await exists(buildPath))) {
     await fs.mkdir(buildPath, { recursive: true });
   }
 
-  // Fetch the file so we can transform the colours in style dictionary
-  const brandObj = JSON.parse(await fs.readFile(brandFile, { encoding: 'utf8' }));
-  const tmpBrandFile = await createTempBrandFile(srcTokensPath);
-
-  await fs.writeFile(Path.join(tmpBrandFile), JSON.stringify(colorTransforms(brandObj)));
-
-  // TODO - Investigate whether we can retrieve from DS instead of redefining
-  // e.g. const { registerTransforms } = require('@madgex/design-system/tasks/registerTransforms');
-  const transforms = ['attribute/cti', 'name/cti/kebab', 'color/css', 'css/rawData'];
-  const prefix = 'mds';
-
-  // TODO - Investigate whether we can retrieve from DS instead of redefining
+  // pass brand token overrides and configure output paths
   const styleDictionaryConfig = {
-    include: [Path.join(dsTokensPath, '*.json')],
-    source: [tmpBrandFile],
+    source: [Path.join(srcTokensPath, 'brand.json')],
     platforms: {
       'css-variables': {
-        transforms,
-        prefix,
         buildPath: Path.join(buildPath, 'css-vars/'),
-        files: [
-          {
-            destination: `variables.css`,
-            format: 'css/variables',
-            filter: 'removePrivate',
-          },
-        ],
       },
       'json-variables': {
-        transforms,
-        prefix,
         buildPath: Path.join(buildPath, 'json/'),
-        files: [
-          {
-            destination: `variables.json`,
-            format: 'json/nested',
-            filter: 'removePrivate',
-          },
-        ],
       },
     },
   };
 
   // Use StyleDictionary to build a tokens SCSS file
-  const StyleDictionary = StyleDictionaryPackage.extend(styleDictionaryConfig);
-
-  await registerTransforms(StyleDictionary);
-  await runSilently(StyleDictionary.buildAllPlatforms.bind(StyleDictionary));
+  const { styleDictionary, cleanTempFiles } = await createStyleDictionary(styleDictionaryConfig);
 
-  // clean-up temp SD file
-  await fs.unlink(tmpBrandFile);
+  await styleDictionary.buildPlatform('css-variables');
+  await styleDictionary.buildPlatform('json-variables');
+  await cleanTempFiles();
 
   log.success('Token build complete (CSS & JSON).');
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madgex/fert",
-  "version": "5.0.15",
+  "version": "6.0.1",
   "description": "Tool to help build the V6 branding",
   "bin": {
     "fert": "./bin/cli.js"
@@ -24,37 +24,36 @@
   "author": "Madgex",
   "license": "UNLICENSED",
   "dependencies": {
-    "@aws-sdk/client-cloudfront": "^3.787.0",
-    "@aws-sdk/client-ssm": "^3.787.0",
+    "@aws-sdk/client-cloudfront": "^3.799.0",
+    "@aws-sdk/client-ssm": "^3.799.0",
     "@hapi/hapi": "^21.4.0",
     "@hapi/hoek": "^11.0.7",
     "@hapi/inert": "^7.1.0",
     "@hapi/vision": "^7.0.3",
     "@hapipal/toys": "^4.0.0",
-    "@madgex/config-api-sdk": "^1.7.8",
-    "@madgex/design-system": "^9.3.1",
+    "@madgex/design-system": "^10.0.2",
+    "@madgex/config-api-sdk": "^1.8.0",
     "@private/header-footer-podlet-server": "github:wiley/madgex-header-footer-podlet",
-    "axios": "^1.8.4",
+    "axios": "^1.9.0",
     "cac": "^6.7.14",
     "chalk": "4.1.2",
     "chokidar": "^3.5.3",
     "debug": "^4.4.0",
     "dedent": "^1.5.3",
-    "find-up-simple": "^1.0.0",
+    "find-up-simple": "^1.0.1",
     "flat-cache": "^4.0.0",
-    "form-data": "^4.0.1",
+    "form-data": "^4.0.2",
     "lodash": "^4.17.21",
     "nunjucks": "^3.2.4",
     "open": "8.4.2",
     "ora": "5.4.1",
     "prompts": "^2.4.2",
     "rimraf": "^5.0.5",
-    "sass": "^1.86.0",
+    "sass": "^1.87.0",
     "simple-git": "^3.27.0",
     "simple-update-notifier": "^2.0.0",
-    "style-dictionary": "3.9.0",
     "uuid-validate": "^0.0.3",
-    "vite": "^4.5.12",
+    "vite": "^4.5.14",
     "vite-plugin-static-copy": "^0.17.1"
   },
   "devDependencies": {
@@ -62,16 +61,13 @@
     "@commitlint/config-conventional": "^19.8.0",
     "@madgex/eslint-config-madgex": "^2.3.0",
     "@madgex/prettier-config-madgex": "^2.0.0",
-    "eslint": "^9.22.0",
+    "eslint": "^9.25.1",
     "husky": "^9.1.7",
     "joi": "^17.13.3",
-    "lint-staged": "^15.5.0",
+    "lint-staged": "^15.5.1",
     "prettier": "^3.5.3",
     "semantic-release": "^24.2.3"
   },
-  "peerDependencies": {
-    "@ctrl/tinycolor": "^3.6.0"
-  },
   "lint-staged": {
     "*.{js,json}": [
       "prettier --write",

package/repo-template/services/jobseekers-frontend/brand.json

@@ -2,22 +2,22 @@
   "color": {
     "brand": {
       "1": {
-        "base": { "value": "#005689" }
+        "base": { "$value": "#005689" }
       },
       "2": {
-        "base": { "value": "#343434" }
+        "base": { "$value": "#343434" }
       }
     },
     "button": {
       "bg": {
-        "base": { "value": "#005689" }
+        "base": { "$value": "{color.brand.1.base}" }
       }
     }
   },
   "font": {
     "family": {
       "button": {
-        "base": { "value": "Arial" }
+        "base": { "$value": "Arial" }
       }
     }
   }