chore(fuselage-tokens): Upgrade style-dictionary (#1480)

packages/fuselage-tokens/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "@rocket.chat/eslint-config-alt/minimal"
+}

packages/fuselage-tokens/build.js

@@ -1,4 +1,4 @@
-const StyleDictionary = require('style-dictionary');
+import StyleDictionary from 'style-dictionary';
 
 console.log('Build started...');
 console.log('\n==============================================');
@@ -41,12 +41,12 @@ const toScssValue = (chunk) => {
 
 StyleDictionary.registerTransformGroup({
   name: 'custom/mjs',
-  transforms: ['name/cti/camel'],
+  transforms: ['name/camel'],
 });
 
 StyleDictionary.registerFormat({
   name: 'custom/colors-json',
-  formatter({ dictionary }) {
+  async format({ dictionary }) {
     return `{${dictionary.allTokens.map(
       (token) =>
         `\n\t${encodeJson(token.path[1])}: ${encodeJson(token.original.value)}`,
@@ -56,7 +56,7 @@ StyleDictionary.registerFormat({
 
 StyleDictionary.registerFormat({
   name: 'custom/breakpoints-json',
-  formatter({ dictionary }) {
+  async format({ dictionary }) {
     return `[${dictionary.allTokens.map(
       (token) => `\n\t${encodeJson(token.original.value)}`,
     )}\n]`;
@@ -65,7 +65,7 @@ StyleDictionary.registerFormat({
 
 StyleDictionary.registerFormat({
   name: 'cjsmodule',
-  formatter({ dictionary }) {
+  async format({ dictionary }) {
     return `module.exports = {${dictionary.allTokens.map(
       (token) =>
         `\n\t${encodeJson(token.name)}: ${encodeJson(token.original.value)}`,
@@ -75,7 +75,7 @@ StyleDictionary.registerFormat({
 
 StyleDictionary.registerFormat({
   name: 'camelCase',
-  formatter({ dictionary }) {
+  async format({ dictionary }) {
     // Get group name through folder name ./src/******
     const exp = /[a-z]+\/([a-z]+)\/[a-z]+.json/i;
     const [, group] = dictionary.allTokens[0].filePath.match(exp);
@@ -93,7 +93,7 @@ StyleDictionary.registerFormat({
 
 StyleDictionary.registerFormat({
   name: 'custom/mjs',
-  formatter({ dictionary }) {
+  async format({ dictionary }) {
     return `export default {${dictionary.allTokens.map(
       (token) =>
         `\n\t${encodeJson(token.name)}: ${encodeJson(token.original.value)}`,
@@ -103,7 +103,7 @@ StyleDictionary.registerFormat({
 
 StyleDictionary.registerFormat({
   name: 'custom/colors-mjs',
-  formatter({ dictionary }) {
+  async format({ dictionary }) {
     return `export default {${dictionary.allTokens.map(
       (token) =>
         `\n\t${encodeJson(token.path[1])}: ${encodeJson(token.original.value)}`,
@@ -113,7 +113,7 @@ StyleDictionary.registerFormat({
 
 StyleDictionary.registerFormat({
   name: 'custom/scss',
-  formatter({ dictionary }) {
+  async format({ dictionary }) {
     // Get group name through folder name ./src/******
     const exp = /[a-z]+\/([a-z]+)\/[a-z]+.json/i;
     const [, group] = dictionary.allTokens[0].filePath.match(exp);
@@ -152,7 +152,7 @@ StyleDictionary.registerFormat({
 
 StyleDictionary.registerFormat({
   name: 'custom/typography-scss',
-  formatter({ dictionary }) {
+  async format({ dictionary }) {
     return `${dictionary.allTokens
       .map((token) => `$${token.name}: \n${toScssValue(token.value)};`)
       .join('')}`;
@@ -161,10 +161,12 @@ StyleDictionary.registerFormat({
 
 // APPLY THE CONFIGURATION
 // needs to be done _before_ applying the configuration
-const StyleDictionaryExtended = StyleDictionary.extend('./config.js');
+const StyleDictionaryExtended = new StyleDictionary('./config.js');
+
+await StyleDictionaryExtended.hasInitialized;
 
 // Build all platforms
-StyleDictionaryExtended.buildAllPlatforms();
+await StyleDictionaryExtended.buildAllPlatforms();
 
 console.log('\n==============================================');
 console.log('\nBuild completed!');

packages/fuselage-tokens/config.js

@@ -1,6 +1,6 @@
-const tokens = require('./src');
+import tokens from './src/index.js';
 
-module.exports = {
+export default {
   source: ['src/**/*.json'],
   platforms: {
     js: {

packages/fuselage-tokens/package.json

@@ -31,6 +31,7 @@
   "publishConfig": {
     "access": "public"
   },
+  "type": "module",
   "scripts": {
     "build": "run-s .:build:clean  .:build:legacy .:build",
     ".:build": "node ./build --config ./config.js",
@@ -50,7 +51,7 @@
     "postcss-scss": "~4.0.6",
     "prettier": "~3.3.3",
     "rimraf": "^3.0.2",
-    "style-dictionary": "~3.7.2",
+    "style-dictionary": "~4.1.4",
     "stylelint": "~16.10.0",
     "stylelint-order": "~6.0.4",
     "stylelint-prettier": "~5.0.2",

packages/fuselage-tokens/src/index.js

@@ -1,6 +1,7 @@
-const { readdirSync, statSync } = require('fs');
-const { join } = require('path');
+import { readdirSync, statSync } from 'fs';
+import { join } from 'path';
 
 const dirs = (p) =>
   readdirSync(p).filter((f) => statSync(join(p, f)).isDirectory());
-module.exports = dirs(__dirname);
+
+export default dirs(import.meta.dirname);

tools/build-design-tokens/index.mjs

@@ -43,4 +43,6 @@ const buildTypography = async () => {
   ]);
 };
 
-await Promise.all([buildBreakpoints(), buildColors(), buildTypography()]);
+buildBreakpoints();
+buildColors();
+buildTypography();

tools/tools-utils/source.mjs

@@ -1,7 +1,9 @@
 import { extname } from 'path';
+
 import { ESLint } from 'eslint';
-import stylelint from 'stylelint';
 import prettier from 'prettier';
+import stylelint from 'stylelint';
+
 import { encodeJson } from './json.mjs';
 
 export const runEslint = (path) => async (source) => {
@@ -24,13 +26,13 @@ export const runStylelint = (path) => async (source) => {
     fix: true,
   });
 
-  return results.output;
+  return results.code;
 };
 
 export const runPrettier = (path) => async (source) => {
   const config = await prettier.resolveConfig(process.cwd());
 
-  return await prettier.format(source, {
+  return prettier.format(source, {
     ...config,
     parser:
       (extname(path) === '.json' && 'json') ||
@@ -41,22 +43,22 @@ export const runPrettier = (path) => async (source) => {
 
 export const toJson = async (data) => {
   const code = encodeJson(data);
-  return await runPrettier('index.json')(code);
+  return runPrettier('index.json')(code);
 };
 
 export const toCommonJsModule = async (data) => {
   const code = `
     'use strict';
     module.exports = ${encodeJson(data)};
   `;
-  return await runEslint('index.cjs')(code);
+  return runEslint('index.cjs')(code);
 };
 
 export const toEsmModule = async (data) => {
   const code = `
     export default ${encodeJson(data)};
   `;
-  return await runEslint('index.mjs')(code);
+  return runEslint('index.mjs')(code);
 };
 
 export const toScssIdentifier = (string) =>
@@ -92,5 +94,5 @@ export const toScssVariables = async (data) => {
     )
     .join('');
 
-  return await runStylelint('index.scss')(code);
+  return runStylelint('index.scss')(code);
 };