@madgex/fert 2.2.2 → 3.0.1

package/bin/commands/build-tasks/bundle-entry.js

@@ -1,7 +1,6 @@
 const path = require('node:path');
 const _ = require('lodash');
 const vite = require('vite');
-const updateBuildWithBundledDsCSS = require('./bundle-ds-css');
 const buildExternalAssets = require('./build-external-assets');
 const { log } = require('../../utils/logging');
 
@@ -34,9 +33,6 @@ module.exports = async (fertConfig, options = {}) => {
 
   await vite.build(viteConfig);
 
-  // second build - this time with the DS included in the CSS bundle
-  await updateBuildWithBundledDsCSS(viteConfig);
-
   await buildExternalAssets(fertConfig);
 
   log.success('Assets built.');

package/bin/commands/build.js

@@ -4,7 +4,6 @@ const { resolveConfig } = require('../utils');
 const { log } = require('../utils/logging');
 const bundleEntry = require('./build-tasks/bundle-entry');
 const buildCssFromTokens = require('./build-tasks/build-tokens');
-const buildCssFromTokensV5 = require('./build-tasks/build-tokens-v5');
 const buildExternalAssets = require('./build-tasks/build-external-assets');
 
 module.exports = async (root, options = {}) => {
@@ -38,7 +37,6 @@ exports.buildTokens = async (fertConfig, options = {}) => {
   const tokenDist = path.join(workingDir, `/public/tokens/`);
 
   buildCssFromTokens(workingDir, tokenDist);
-  buildCssFromTokensV5(workingDir, tokenDist);
 };
 
 exports.bundleEntry = bundleEntry;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madgex/fert",
-  "version": "2.2.2",
+  "version": "3.0.1",
   "description": "Tool to help build the V6 branding",
   "bin": {
     "fert": "./bin/cli.js"
@@ -32,7 +32,6 @@
     "@hapi/vision": "^7.0.3",
     "@hapipal/toys": "^4.0.0",
     "@madgex/design-system": "^6.1.4",
-    "@madgex/design-system-v5": "npm:@madgex/design-system@^5.0.0",
     "@private/header-footer-podlet-server": "github:wiley/madgex-header-footer-podlet",
     "axios": "^1.6.2",
     "cac": "^6.7.14",

package/server/routes/public.js

@@ -30,7 +30,10 @@ module.exports = [
     method: 'get',
     path: '/design-system.css',
     handler: {
-      file: require.resolve('@madgex/design-system/index.css'),
+      file: {
+        path: require.resolve('@madgex/design-system/index.css'),
+        confine: false, // allow access outside of the fert project (helpful during dev)
+      },
     },
   },
 ];

package/server/routes/views.js

@@ -14,7 +14,7 @@ module.exports = {
     delete filteredHeaders['accept-encoding'];
 
     const podletResponse = await request.server.inject({
-      url: `/_podlet/${request.path}`,
+      url: `/_podlet${request.path}`,
       method: request.method,
       headers: filteredHeaders,
       auth: request.auth.isAuthenticated ? request.auth : null,

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

@@ -1,98 +0,0 @@
-const Path = require('node:path');
-const fs = require('node:fs/promises');
-const StyleDictionaryPackage = require('style-dictionary');
-const {
-  registerTransforms,
-} = require('@madgex/design-system-v5/tasks/registerTransforms');
-const colorTransforms = require('@madgex/design-system-v5/tasks/colorTransforms');
-const { ensureTrailingSlash, exists } = require('../../utils');
-const { log } = require('../../utils/logging');
-const { TMP_DIR } = require('../../../constants');
-
-const dsTokensPath = Path.dirname(
-  require.resolve('@madgex/design-system-v5/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}-v5.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 buildCssFromTokensV5(srcTokensPath, buildPath) {
-  srcTokensPath = ensureTrailingSlash(Path.resolve(srcTokensPath));
-  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
-  const styleDictionaryConfig = {
-    include: [Path.join(dsTokensPath, '*.json')],
-    source: [tmpBrandFile],
-    platforms: {
-      'scss-variables': {
-        transforms,
-        prefix,
-        buildPath: Path.join(buildPath, 'scss/'),
-        files: [
-          {
-            destination: 'index.scss',
-            format: 'scss/map-deep',
-          },
-        ],
-      },
-    },
-  };
-
-  // Use StyleDictionary to build a tokens SCSS file
-  const StyleDictionary = StyleDictionaryPackage.extend(styleDictionaryConfig);
-
-  await registerTransforms(StyleDictionary);
-  await runSilently(StyleDictionary.buildAllPlatforms.bind(StyleDictionary));
-
-  // clean-up temp SD file
-  await fs.unlink(tmpBrandFile);
-
-  log.success('Token build complete (SCSS).');
-};

package/bin/commands/build-tasks/bundle-ds-css.js

@@ -1,74 +0,0 @@
-const path = require('node:path');
-const fsp = require('node:fs/promises');
-const _ = require('lodash');
-const vite = require('vite');
-const chalk = require('chalk');
-
-// TODO: delete me when DS is driven by CSS Custom Ppoperties
-
-module.exports = async (viteConfig) => {
-  const dsBundledViteConfig = { ...viteConfig };
-
-  // create ds-bundled vite build in-memory
-  _.merge(dsBundledViteConfig, {
-    logLevel: 'silent',
-    build: {
-      write: false,
-      rollupOptions: {
-        output: {
-          assetFileNames: 'assets/[name]-ds-[hash].[ext]',
-        },
-      },
-    },
-    css: {
-      preprocessorOptions: {
-        scss: {
-          additionalData: `
-          @import "../../public/tokens/scss/index.scss";
-          @import "@madgex/design-system-v5/src/scss/import.scss";
-          `, // all scss processed files gets this injected at the top
-        },
-      },
-    },
-  });
-
-  const dsBuild = await vite.build(dsBundledViteConfig);
-  const { output: files } = Array.isArray(dsBuild) ? dsBuild[0] : dsBuild;
-
-  // write just the CSS file to disk
-  for (const file of files) {
-    if (file.name !== 'style.css') {
-      continue;
-    }
-    const cssFileContent = file.source;
-    await fsp.writeFile(
-      path.resolve('dist', file.fileName),
-      cssFileContent,
-      'utf8'
-    );
-
-    // read the manifest.json
-    const manifestPath = path.resolve('dist', 'manifest.json');
-    const manifestStr = await fsp.readFile(manifestPath);
-    const manifest = JSON.parse(manifestStr);
-
-    // add entry to manifest.json
-    const dsEntryName = file.name
-      .split('.')
-      .map((part, i) => (i === 0 ? `${part}-ds` : part))
-      .join('.');
-    manifest[dsEntryName] = { ...manifest[file.name] };
-    manifest[dsEntryName].file = file.fileName;
-
-    // write new manifest
-    await fsp.writeFile(
-      manifestPath,
-      JSON.stringify(manifest, null, 2),
-      'utf8'
-    );
-
-    console.log(
-      `\nUpdated build & manifest with DS-bundled CSS file: ${chalk.magenta(file.fileName)}\n` // prettier-ignore
-    );
-  }
-};