BREAKING: make style-dictionary ESM-only and browser-compatible

.eslintrc.json

@@ -1,6 +1,7 @@
 {
   "parserOptions": {
-    "ecmaVersion": "latest"
+    "ecmaVersion": "latest",
+    "sourceType": "module"
   },
   "plugins": ["jest"],
   "env": {

bin/style-dictionary

@@ -2,29 +2,30 @@
 
 'use strict';
 
-var fs = require('fs-extra'),
-    program = require('commander'),
-    path = require('path'),
-    StyleDictionary = require('..'),
-    pkg = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8')),
-    chalk = require('chalk');
+import JSON5 from 'json5';
+import program from 'commander';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import StyleDictionary, { fs } from '../index.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const pkg = JSON5.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8'));
 
 function collect(val, arr) {
   arr.push(val);
   return arr;
 }
 
 function getConfigPath(options) {
-  var configPath = options.config;
+  let configPath = options.config;
 
-  if(!configPath) {
-    if(fs.existsSync('./config.json')) {
+  if (!configPath) {
+    if (fs.existsSync('./config.json')) {
       configPath = './config.json';
-    }
-    else if(fs.existsSync('./config.js')) {
+    } else if (fs.existsSync('./config.js')) {
       configPath = './config.js';
-    }
-    else {
+    } else {
       console.error('Build failed; unable to find config file.');
       process.exit(1);
     }
@@ -33,31 +34,39 @@ function getConfigPath(options) {
   return configPath;
 }
 
-program
-  .version(pkg.version)
-  .description(pkg.description)
-  .usage('[command] [options]');
-
+program.version(pkg.version).description(pkg.description).usage('[command] [options]');
 
 program
   .command('build')
   .description('Builds a style dictionary package from the current directory.')
   .option('-c, --config <path>', 'set config path. defaults to ./config.json')
-  .option('-p, --platform [platform]', 'only build specific platforms. Must be defined in the config', collect, [])
+  .option(
+    '-p, --platform [platform]',
+    'only build specific platforms. Must be defined in the config',
+    collect,
+    [],
+  )
   .action(styleDictionaryBuild);
 
 program
   .command('clean')
-  .description('Removes files specified in the config of the style dictionary package of the current directory.')
+  .description(
+    'Removes files specified in the config of the style dictionary package of the current directory.',
+  )
   .option('-c, --config <path>', 'set config path. defaults to ./config.json')
-  .option('-p, --platform [platform]', 'only clean specific platform(s). Must be defined in the config', collect, [])
+  .option(
+    '-p, --platform [platform]',
+    'only clean specific platform(s). Must be defined in the config',
+    collect,
+    [],
+  )
   .action(styleDictionaryClean);
 
 program
   .command('init <type>')
   .description('Generates a starter style dictionary')
-  .action(function(type){
-    var types = ['basic', 'complete'];
+  .action(function (type) {
+    const types = ['basic', 'complete'];
     if (types.indexOf(type) < 0) {
       console.error('Please supply 1 type of project from: ' + types.join(', '));
       process.exit(1);
@@ -66,42 +75,47 @@ program
     console.log('Copying starter files...\n');
     fs.copySync(path.join(__dirname, '..', 'examples', type), process.cwd());
     console.log('Source style dictionary starter files created!\n');
-    console.log('Running `style-dictionary build` for the first time to generate build artifacts.\n');
+    console.log(
+      'Running `style-dictionary build` for the first time to generate build artifacts.\n',
+    );
     styleDictionaryBuild();
   });
 
 // error on unknown commands
 program.on('command:*', function () {
-  console.error('Invalid command: %s\nSee --help for a list of available commands.', process.argv.slice(2).join(' '));
+  console.error(
+    'Invalid command: %s\nSee --help for a list of available commands.',
+    process.argv.slice(2).join(' '),
+  );
   process.exit(1);
 });
 
-function styleDictionaryBuild(options) {
+async function styleDictionaryBuild(options) {
   options = options || {};
-  var configPath = getConfigPath(options);
+  const configPath = getConfigPath(options);
 
   // Create a style dictionary object with the config
-  var styleDictionary = StyleDictionary.extend( configPath );
+  const styleDictionary = await StyleDictionary.extend(configPath);
 
   if (options.platform && options.platform.length > 0) {
-    options.platform.forEach(function(platform) {
-      styleDictionary.buildPlatform( platform );
+    options.platform.forEach(function (platform) {
+      styleDictionary.buildPlatform(platform);
     });
   } else {
     styleDictionary.buildAllPlatforms();
   }
 }
 
-function styleDictionaryClean(options) {
+async function styleDictionaryClean(options) {
   options = options || {};
-  var configPath = getConfigPath(options);
+  const configPath = getConfigPath(options);
 
   // Create a style dictionary object with the config
-  var styleDictionary = StyleDictionary.extend( configPath );
+  const styleDictionary = await StyleDictionary.extend(configPath);
 
   if (options.platform && options.platform.length > 0) {
-    options.platform.forEach(function(platform) {
-      styleDictionary.cleanPlatform( platform );
+    options.platform.forEach(function (platform) {
+      styleDictionary.cleanPlatform(platform);
     });
   } else {
     styleDictionary.cleanAllPlatforms();

examples/advanced/custom-file-header/build.js

@@ -15,7 +15,7 @@ const myCustomFormat = ({ dictionary, file }) => {
     .join(`\n`)}`;
 };
 
-const styleDictionary = StyleDictionary.extend({
+const styleDictionary = await StyleDictionary.extend({
   // You can add custom file headers directly on the configuration by
   // adding a `fileHeader` object. The keys inside are the names of
   // the file headers

examples/advanced/custom-filters/build.js

@@ -15,7 +15,7 @@ StyleDictionary.registerFilter({
 // APPLY THE CONFIGURATION
 // IMPORTANT: the registration of custom transforms
 // needs to be done _before_ applying the configuration
-const StyleDictionaryExtended = StyleDictionary.extend(__dirname + '/config.json');
+const StyleDictionaryExtended = await StyleDictionary.extend(__dirname + '/config.json');
 
 // FINALLY, BUILD ALL THE PLATFORMS
 StyleDictionaryExtended.buildAllPlatforms();

examples/advanced/custom-formats-with-templates/build.js

@@ -1,8 +1,14 @@
-const StyleDictionary = require('style-dictionary').extend(__dirname + '/config.json');
-const fs = require('fs');
-const _ = require('lodash');
-const handlebars = require('handlebars');
-const pug = require('pug');
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import StyleDictionary from 'style-dictionary';
+import fs from 'fs';
+import _ from 'lodash';
+import handlebars from 'handlebars';
+import pug from 'pug';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const sd = await StyleDictionary.extend(__dirname + '/config.json');
 
 console.log('Build started...');
 console.log('\n==============================================');
@@ -11,17 +17,17 @@ console.log('\n==============================================');
 
 // These formatting functions are using the Lodash "template" syntax
 
-StyleDictionary.registerFormat({
+sd.registerFormat({
   name: 'custom/format/scss',
   formatter: _.template(fs.readFileSync(__dirname + '/templates/web-scss.template')),
 });
 
-StyleDictionary.registerFormat({
+sd.registerFormat({
   name: 'custom/format/ios-plist',
   formatter: _.template(fs.readFileSync(__dirname + '/templates/ios-plist.template')),
 });
 
-StyleDictionary.registerFormat({
+sd.registerFormat({
   name: 'custom/format/android-xml',
   formatter: _.template(fs.readFileSync(__dirname + '/templates/android-xml.template')),
 });
@@ -31,7 +37,7 @@ const templateCustomXml = handlebars.compile(
   fs.readFileSync(__dirname + '/templates/android-xml_alt.hbs', 'utf8'),
 );
 
-StyleDictionary.registerFormat({
+sd.registerFormat({
   name: 'custom/format/android-xml-alt',
   formatter: function ({ dictionary, platform }) {
     return templateCustomXml({
@@ -50,7 +56,7 @@ const templateCustomPlist = pug.compileFile(__dirname + '/templates/ios-plist_al
   pretty: true,
 });
 
-StyleDictionary.registerFormat({
+sd.registerFormat({
   name: 'custom/format/ios-plist-alt',
   formatter: function ({ dictionary }) {
     return templateCustomPlist({
@@ -60,7 +66,7 @@ StyleDictionary.registerFormat({
 });
 
 // FINALLY, BUILD ALL THE PLATFORMS
-StyleDictionary.buildAllPlatforms();
+sd.buildAllPlatforms();
 
 console.log('\n==============================================');
 console.log('\nBuild completed!');

examples/advanced/custom-parser/sd.config.js

@@ -36,7 +36,7 @@ StyleDictionary.registerParser({
 });
 
 // Or you can add parsers directly on the configuration object here like this:
-// StyleDictionary.extend({
+// (await StyleDictionary.extend({
 //   parsers: [{
 //     pattern: /\.json$/,
 //     parse: ({contents, filePath}) => {}
@@ -52,7 +52,7 @@ StyleDictionary.registerParser({
 //       }]
 //     }
 //   }
-// }).buildAllPlatforms();
+// })).buildAllPlatforms();
 
 module.exports = {
   // Or you can add parsers directly on the configuration object here like this:

examples/advanced/custom-transforms/build.js

@@ -1,4 +1,8 @@
-const StyleDictionary = require('style-dictionary');
+import StyleDictionary from 'style-dictionary';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
 
 console.log('Build started...');
 console.log('\n==============================================');
@@ -112,7 +116,7 @@ StyleDictionary.registerFormat({
 // APPLY THE CONFIGURATION
 // IMPORTANT: the registration of custom transforms
 // needs to be done _before_ applying the configuration
-const StyleDictionaryExtended = StyleDictionary.extend(__dirname + '/config.json');
+const StyleDictionaryExtended = await StyleDictionary.extend(__dirname + '/config.json');
 
 // FINALLY, BUILD ALL THE PLATFORMS
 StyleDictionaryExtended.buildAllPlatforms();

examples/advanced/multi-brand-multi-platform/build.js

@@ -61,13 +61,13 @@ console.log('Build started...');
     console.log('\n==============================================');
     console.log(`\nProcessing: [${platform}] [${brand}]`);
 
-    const StyleDictionary = StyleDictionaryPackage.extend(
-      getStyleDictionaryConfig(brand, platform),
-    );
-
-    StyleDictionary.buildPlatform(platform);
+    StyleDictionaryPackage.extend(getStyleDictionaryConfig(brand, platform)).then(
+      (StyleDictionary) => {
+        StyleDictionary.buildPlatform(platform);
 
-    console.log('\nEnd processing');
+        console.log('\nEnd processing');
+      },
+    );
   });
 });
 

examples/advanced/tokens-deprecation/build.js

@@ -1,22 +1,27 @@
-const StyleDictionary = require('style-dictionary').extend(__dirname + '/config.json');
-const fs = require('fs');
-const _ = require('lodash');
+import StyleDictionary from 'style-dictionary';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+import _ from 'lodash';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const sd = await StyleDictionary.extend(__dirname + '/config.json');
 
 console.log('Build started...');
 console.log('\n==============================================');
 
-StyleDictionary.registerFormat({
+sd.registerFormat({
   name: 'custom/format/scss',
   formatter: _.template(fs.readFileSync(__dirname + '/templates/web-scss.template')),
 });
 
-StyleDictionary.registerFormat({
+sd.registerFormat({
   name: 'custom/format/ios-plist',
   formatter: _.template(fs.readFileSync(__dirname + '/templates/ios-plist.template')),
 });
 
 // FINALLY, BUILD ALL THE PLATFORMS
-StyleDictionary.buildAllPlatforms();
+sd.buildAllPlatforms();
 
 console.log('\n==============================================');
 console.log('\nBuild completed!');