style-dictionary 4.0.0-prerelease.0 → 4.0.0-prerelease.2

package/lib/buildFile.js

@@ -13,14 +13,14 @@
 
 import path from '@bundled-es-modules/path-browserify';
 import chalk from 'chalk';
-import { fs } from '../fs.js';
-import filterProperties from './filterProperties.js';
+import { fs } from 'style-dictionary/fs';
+import filterTokens from './filterTokens.js';
 import GroupMessages from './utils/groupMessages.js';
 
 import createFormatArgs from './utils/createFormatArgs.js';
 
 /**
- * Takes the style property object and a format and returns a
+ * Takes the style token object and a format and returns a
  * string that can be written to a file.
  * @memberOf StyleDictionary
  * @param {Object} file
@@ -50,60 +50,58 @@ export default function buildFile(file = {}, platform = {}, dictionary = {}) {
   const dirname = path.dirname(fullDestination);
   if (!fs.existsSync(dirname)) fs.mkdirSync(dirname, { recursive: true });
 
-  const filteredProperties = filterProperties(dictionary, filter);
+  const filteredTokens = filterTokens(dictionary, filter);
   const filteredDictionary = Object.assign({}, dictionary, {
-    properties: filteredProperties.properties,
-    allProperties: filteredProperties.allProperties,
-    tokens: filteredProperties.properties,
-    allTokens: filteredProperties.allProperties,
-    // keep the unfiltered properties object for reference resolution
-    _properties: dictionary.properties,
+    tokens: filteredTokens.tokens,
+    allTokens: filteredTokens.allTokens,
+    // keep the unfiltered tokens object for reference resolution
+    _tokens: dictionary.tokens,
   });
 
-  // if properties object is empty, return without creating a file
+  // if tokens object is empty, return without creating a file
   if (
-    filteredProperties.hasOwnProperty('properties') &&
-    Object.keys(filteredProperties.properties).length === 0 &&
-    filteredProperties.properties.constructor === Object
+    filteredTokens.hasOwnProperty('tokens') &&
+    Object.keys(filteredTokens.tokens).length === 0 &&
+    filteredTokens.tokens.constructor === Object
   ) {
-    let warnNoFile = `No properties for ${destination}. File not created.`;
+    let warnNoFile = `No tokens for ${destination}. File not created.`;
     console.log(chalk.rgb(255, 140, 0)(warnNoFile));
     return null;
   }
 
-  // Check for property name Collisions
+  // Check for token name Collisions
   const nameCollisionObj = {};
-  filteredProperties.allTokens &&
-    filteredProperties.allTokens.forEach((propertyData) => {
-      let propertyName = propertyData.name;
-      if (!nameCollisionObj[propertyName]) {
-        nameCollisionObj[propertyName] = [];
+  filteredTokens.allTokens &&
+    filteredTokens.allTokens.forEach((tokenData) => {
+      let tokenName = tokenData.name;
+      if (!nameCollisionObj[tokenName]) {
+        nameCollisionObj[tokenName] = [];
       }
-      nameCollisionObj[propertyName].push(propertyData);
+      nameCollisionObj[tokenName].push(tokenData);
     });
 
   const PROPERTY_NAME_COLLISION_WARNINGS =
     GroupMessages.GROUP.PropertyNameCollisionWarnings + ':' + destination;
   GroupMessages.clear(PROPERTY_NAME_COLLISION_WARNINGS);
-  Object.keys(nameCollisionObj).forEach((propertyName) => {
-    if (nameCollisionObj[propertyName].length > 1) {
-      let collisions = nameCollisionObj[propertyName]
-        .map((properties) => {
-          let propertyPathText = chalk.rgb(255, 69, 0)(properties.path.join('.'));
-          let valueText = chalk.rgb(255, 140, 0)(properties.value);
-          return propertyPathText + '   ' + valueText;
+  Object.keys(nameCollisionObj).forEach((tokenName) => {
+    if (nameCollisionObj[tokenName].length > 1) {
+      let collisions = nameCollisionObj[tokenName]
+        .map((tokens) => {
+          let tokenPathText = chalk.rgb(255, 69, 0)(tokens.path.join('.'));
+          let valueText = chalk.rgb(255, 140, 0)(tokens.value);
+          return tokenPathText + '   ' + valueText;
         })
         .join('\n        ');
       GroupMessages.add(
         PROPERTY_NAME_COLLISION_WARNINGS,
         `Output name ${chalk
           .rgb(255, 69, 0)
-          .bold(propertyName)} was generated by:\n        ${collisions}`,
+          .bold(tokenName)} was generated by:\n        ${collisions}`,
       );
     }
   });
 
-  let propertyNamesCollisionCount = GroupMessages.count(PROPERTY_NAME_COLLISION_WARNINGS);
+  let tokenNamesCollisionCount = GroupMessages.count(PROPERTY_NAME_COLLISION_WARNINGS);
   fs.writeFileSync(
     fullDestination,
     format(
@@ -121,12 +119,12 @@ export default function buildFile(file = {}, platform = {}, dictionary = {}) {
 
   // don't show name collision warnings for nested type formats
   // because they are not relevant.
-  if ((nested || propertyNamesCollisionCount === 0) && filteredReferencesCount === 0) {
+  if ((nested || tokenNamesCollisionCount === 0) && filteredReferencesCount === 0) {
     console.log(chalk.bold.green(`✔︎ ${fullDestination}`));
   } else {
-    console.log(`⚠️ ${fullDestination}`);
-    if (propertyNamesCollisionCount > 0) {
-      let propertyNamesCollisionWarnings = GroupMessages.fetchMessages(
+    const warnHeader = `⚠️ ${fullDestination}`;
+    if (tokenNamesCollisionCount > 0) {
+      let tokenNamesCollisionWarnings = GroupMessages.fetchMessages(
         PROPERTY_NAME_COLLISION_WARNINGS,
       ).join('\n    ');
       let title = `While building ${chalk
@@ -139,13 +137,17 @@ export default function buildFile(file = {}, platform = {}, dictionary = {}) {
       )(
         [
           'This many-to-one issue is usually caused by some combination of:',
-          '* conflicting or similar paths/names in property definitions',
+          '* conflicting or similar paths/names in token definitions',
           '* platform transforms/transformGroups affecting names, especially when removing specificity',
           '* overly inclusive file filters',
         ].join('\n    '),
       );
-      let warn = `${title}\n    ${propertyNamesCollisionWarnings}\n${help}`;
-      console.log(chalk.rgb(255, 140, 0).bold(warn));
+      let warn = `${warnHeader}\n${title}\n    ${tokenNamesCollisionWarnings}\n${help}`;
+      if (platform?.log === 'error') {
+        throw new Error(warn);
+      } else {
+        console.log(chalk.rgb(255, 140, 0).bold(warn));
+      }
     }
 
     if (filteredReferencesCount > 0) {
@@ -162,8 +164,12 @@ export default function buildFile(file = {}, platform = {}, dictionary = {}) {
         165,
         0,
       )(['This is caused when combining a filter and `outputReferences`.'].join('\n    '));
-      let warn = `${title}\n    ${filteredReferencesWarnings}\n${help}`;
-      console.log(chalk.rgb(255, 140, 0).bold(warn));
+      let warn = `${warnHeader}\n${title}\n    ${filteredReferencesWarnings}\n${help}`;
+      if (platform?.log === 'error') {
+        throw new Error(warn);
+      } else {
+        console.log(chalk.rgb(255, 140, 0).bold(warn));
+      }
     }
   }
 }

package/lib/cleanDir.js

@@ -13,7 +13,7 @@
 
 import chalk from 'chalk';
 import path from '@bundled-es-modules/path-browserify';
-import { fs } from '../fs.js';
+import { fs } from 'style-dictionary/fs';
 
 /**
  * Takes the style property object and a format and returns a

package/lib/cleanDirs.js

@@ -14,8 +14,8 @@
 import cleanDir from './cleanDir.js';
 
 /**
- * Takes a platform config object and a properties
- * object and cleans all the files. Properties object
+ * Takes a platform config object and a tokens
+ * object and cleans all the files. Tokens object
  * should have been transformed and resolved before this
  * point.
  * @memberOf StyleDictionary

package/lib/cleanFile.js

@@ -12,7 +12,7 @@
  */
 
 import chalk from 'chalk';
-import { fs } from '../fs.js';
+import { fs } from 'style-dictionary/fs';
 
 /**
  * Takes the style property object and a format and returns a

package/lib/common/actions.js

@@ -11,7 +11,7 @@
  * and limitations under the License.
  */
 
-import { fs } from '../../fs.js';
+import { fs } from 'style-dictionary/fs';
 
 /**
  * @namespace Actions
@@ -25,20 +25,25 @@ export default {
    */
   'android/copyImages': {
     do: function (dictionary, config) {
-      var imagesDir = config.buildPath + 'android/main/res/drawable-';
+      const imagesDir = `${config.buildPath}android/main/res/drawable-`;
       dictionary.allTokens.forEach(function (token) {
         if (token.attributes.category === 'asset' && token.attributes.type === 'image') {
-          var name = token.path.slice(2, 4).join('_');
-          fs.copyFileSync(token.value, imagesDir + token.attributes.state + '/' + name + '.png');
+          const name = token.path.slice(2, 4).join('_');
+          const dir = `${imagesDir}${token.attributes.state}`;
+          const path = `${dir}/${name}.png`;
+          fs.mkdirSync(dir, { recursive: true });
+          fs.copyFileSync(token.value, path);
         }
       });
     },
     undo: function (dictionary, config) {
-      var imagesDir = config.buildPath + 'android/main/res/drawable-';
+      const imagesDir = `${config.buildPath}android/main/res/drawable-`;
       dictionary.allTokens.forEach(function (token) {
         if (token.attributes.category === 'asset' && token.attributes.type === 'image') {
-          var name = token.path.slice(2, 4).join('_');
-          fs.unlinkSync(imagesDir + token.attributes.state + '/' + name + '.png');
+          const name = token.path.slice(2, 4).join('_');
+          const dir = `${imagesDir}${token.attributes.state}`;
+          const path = `${dir}/${name}.png`;
+          fs.unlinkSync(path);
         }
       });
     },

package/lib/common/formatHelpers/createPropertyFormatter.js

@@ -14,11 +14,65 @@
 const defaultFormatting = {
   prefix: '',
   commentStyle: 'long',
+  commentPosition: 'inline',
   indentation: '',
   separator: ' =',
   suffix: ';',
 };
 
+/**
+ * Split a string comment by newlines and
+ * convert to multi-line comment if necessary
+ * @param {string} to_ret_prop
+ * @param {{comment: string; style: 'short' | 'long'; position: 'above' | 'inline'; indentation: string}} options
+ * @returns {string}
+ */
+function addComment(to_ret_prop, options) {
+  const { comment, style, indentation } = options;
+  let { position } = options;
+
+  const commentsByNewLine = comment.split('\n');
+  if (commentsByNewLine.length > 1) {
+    position = 'above';
+  }
+
+  let processedComment;
+  switch (style) {
+    case 'short':
+      if (position === 'inline') {
+        processedComment = `// ${comment}`;
+      } else {
+        processedComment = commentsByNewLine.reduce(
+          (acc, curr) => `${acc}${indentation}// ${curr}\n`,
+          '',
+        );
+        // remove trailing newline
+        processedComment = processedComment.replace(/\n$/g, '');
+      }
+      break;
+    case 'long':
+      if (commentsByNewLine.length > 1) {
+        processedComment = commentsByNewLine.reduce(
+          (acc, curr) => `${acc}${indentation} * ${curr}\n`,
+          `${indentation}/**\n`,
+        );
+        processedComment += `${indentation} */`;
+      } else {
+        processedComment = `${position === 'above' ? indentation : ''}/* ${comment} */`;
+      }
+      break;
+  }
+
+  if (position === 'above') {
+    // put the comment above the prop if it's multi-line or if commentStyle ended with -above
+    to_ret_prop = `${processedComment}\n${to_ret_prop}`;
+  } else {
+    to_ret_prop = `${to_ret_prop} ${processedComment}`;
+  }
+
+  return to_ret_prop;
+}
+
 /**
  * Creates a function that can be used to format a property. This can be useful
  * to use as the function on `dictionary.allTokens.map`. The formatting
@@ -57,37 +111,37 @@ export default function createPropertyFormatter({
   formatting = {},
   themeable = false,
 }) {
-  let { prefix, commentStyle, indentation, separator, suffix } = Object.assign(
-    {},
-    defaultFormatting,
-    formatting,
-  );
-
+  const formatDefaults = {};
   switch (format) {
     case 'css':
-      prefix = '--';
-      indentation = '  ';
-      separator = ':';
+      formatDefaults.prefix = '--';
+      formatDefaults.indentation = '  ';
+      formatDefaults.separator = ':';
       break;
     case 'sass':
-      prefix = '$';
-      commentStyle = 'short';
-      indentation = '';
-      separator = ':';
+      formatDefaults.prefix = '$';
+      formatDefaults.commentStyle = 'short';
+      formatDefaults.indentation = '';
+      formatDefaults.separator = ':';
       break;
     case 'less':
-      prefix = '@';
-      commentStyle = 'short';
-      indentation = '';
-      separator = ':';
+      formatDefaults.prefix = '@';
+      formatDefaults.commentStyle = 'short';
+      formatDefaults.indentation = '';
+      formatDefaults.separator = ':';
       break;
     case 'stylus':
-      prefix = '$';
-      commentStyle = 'short';
-      indentation = '';
-      separator = '=';
+      formatDefaults.prefix = '$';
+      formatDefaults.commentStyle = 'short';
+      formatDefaults.indentation = '';
+      formatDefaults.separator = '=';
       break;
   }
+  let { prefix, commentStyle, commentPosition, indentation, separator, suffix } = {
+    ...defaultFormatting,
+    ...formatDefaults,
+    ...formatting,
+  };
 
   return function (prop) {
     let to_ret_prop = `${indentation}${prefix}${prop.name}${separator} `;
@@ -108,44 +162,46 @@ export default function createPropertyFormatter({
     if (outputReferences && dictionary.usesReference(prop.original.value)) {
       // Formats that use this function expect `value` to be a string
       // or else you will get '[object Object]' in the output
-      if (typeof value === 'string') {
-        const refs = dictionary.getReferences(prop.original.value);
+      const refs = dictionary.getReferences(prop.original.value);
 
-        // original can either be string value or an object value
-        const originalIsString = typeof prop.original.value === 'string';
+      // original can either be an object value, which requires transitive value transformation in web CSS formats
+      // or a different (primitive) type, meaning it can be stringified.
+      const originalIsObject =
+        typeof prop.original.value === 'object' && prop.original.value !== null;
 
-        // Set the value to the original value with refs first, undoing value-changing transitive transforms
-        if (originalIsString) {
-          value = prop.original.value;
-        }
+      if (!originalIsObject) {
+        // when original is object value, we replace value by matching ref.value and putting a var instead.
+        // Due to the original.value being an object, it requires transformation, so undoing the transformation
+        // by replacing value with original.value is not possible.
 
-        refs.forEach((ref) => {
-          // value should be a string that contains the resolved reference
-          // because Style Dictionary resolved this in the resolution step.
-          // Here we are undoing that by replacing the value with
-          // the reference's name
-          if (ref.value && ref.name) {
-            const replaceFunc = function () {
-              if (format === 'css') {
-                if (outputReferenceFallbacks) {
-                  return `var(${prefix}${ref.name}, ${ref.value})`;
-                } else {
-                  return `var(${prefix}${ref.name})`;
-                }
+        // when original is string value, we replace value by matching original.value and putting a var instead
+        // this is more friendly to transitive transforms that transform the string values
+        value = prop.original.value;
+      }
+
+      refs.forEach((ref) => {
+        // value should be a string that contains the resolved reference
+        // because Style Dictionary resolved this in the resolution step.
+        // Here we are undoing that by replacing the value with
+        // the reference's name
+        if (Object.hasOwn(ref, 'value') && Object.hasOwn(ref, 'name')) {
+          const replaceFunc = function () {
+            if (format === 'css') {
+              if (outputReferenceFallbacks) {
+                return `var(${prefix}${ref.name}, ${ref.value})`;
               } else {
-                return `${prefix}${ref.name}`;
+                return `var(${prefix}${ref.name})`;
               }
-            };
-            // when original is object value, we replace value by matching ref.value and putting a var instead
-            // when original is string value, we replace value by matching original.value and putting a var instead
-            // this is more friendly to transitive transforms that transform the string values
-            value = value.replace(
-              originalIsString ? new RegExp(`{${ref.path.join('.')}(.value)?}`, 'g') : ref.value,
-              replaceFunc,
-            );
-          }
-        });
-      }
+            } else {
+              return `${prefix}${ref.name}`;
+            }
+          };
+          value = value.replace(
+            originalIsObject ? ref.value : new RegExp(`{${ref.path.join('.')}(.value)?}`, 'g'),
+            replaceFunc,
+          );
+        }
+      });
     }
 
     to_ret_prop += prop.attributes.category === 'asset' ? `"${value}"` : value;
@@ -158,11 +214,12 @@ export default function createPropertyFormatter({
     to_ret_prop += suffix;
 
     if (prop.comment && commentStyle !== 'none') {
-      if (commentStyle === 'short') {
-        to_ret_prop = to_ret_prop.concat(` // ${prop.comment}`);
-      } else {
-        to_ret_prop = to_ret_prop.concat(` /* ${prop.comment} */`);
-      }
+      to_ret_prop = addComment(to_ret_prop, {
+        comment: prop.comment,
+        style: commentStyle,
+        position: commentPosition,
+        indentation,
+      });
     }
 
     return to_ret_prop;

package/lib/common/formatHelpers/getTypeScriptType.js

@@ -10,7 +10,6 @@
  * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
  * and limitations under the License.
  */
-import { unique } from '../../utils/es6_.js';
 
 /**
  * Given some value, returns a basic valid TypeScript type for that value.
@@ -22,7 +21,7 @@ import { unique } from '../../utils/es6_.js';
  * StyleDictionary.registerFormat({
  *   name: 'myCustomFormat',
  *   formatter: function({ dictionary, options }) {
- *    return dictionary.allProperties.map(function(prop) {
+ *    return dictionary.allTokens.map(function(prop) {
  *      var to_ret_prop = 'export const ' + prop.name + ' : ' + getTypeScriptType(prop.value) + ';';
  *      if (prop.comment)
  *        to_ret_prop = to_ret_prop.concat(' // ' + prop.comment);
@@ -72,11 +71,13 @@ function getArrayType(passedArray) {
     if (passedArray.every((v) => getTypeScriptType(v) === firstValueType)) {
       return firstValueType + '[]';
     } else {
-      return `(${unique(
-        passedArray.map((item, index) => {
-          const isLast = passedArray.length === index + 1;
-          return `${getTypeScriptType(item)}${!isLast ? ' | ' : ''}`;
-        }),
+      return `(${Array.from(
+        new Set(
+          passedArray.map((item, index) => {
+            const isLast = passedArray.length === index + 1;
+            return `${getTypeScriptType(item)}${!isLast ? ' | ' : ''}`;
+          }),
+        ),
       ).join('')})[]`;
     }
   }

package/lib/common/formats.js

@@ -468,7 +468,7 @@ const formats = {
   'typescript/es6-declarations': function ({ dictionary, file, options }) {
     return (
       fileHeader({ file }) +
-      dictionary.allProperties
+      dictionary.allTokens
         .map(function (prop) {
           let to_ret_prop = '';
           if (prop.comment) to_ret_prop += '/** ' + prop.comment + ' */\n';
@@ -529,7 +529,7 @@ const formats = {
    *   formatter: function({ dictionary }) {
    *     return 'declare const root: RootObject\n' +
    *     'export default root\n' +
-   *     JsonToTS(dictionary.properties).join('\n');
+   *     JsonToTS(dictionary.tokens).join('\n');
    *   },
    * });
    * ```
@@ -788,7 +788,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
    */
   'compose/object': function ({ dictionary, options, file }) {
     const template = _template(composeObject);
-    let allProperties;
+    let allTokens;
     const { outputReferences } = options;
     const formatProperty = createPropertyFormatter({
       outputReferences,
@@ -800,14 +800,14 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
     });
 
     if (outputReferences) {
-      allProperties = [...dictionary.allProperties].sort(sortByReference(dictionary));
+      allTokens = [...dictionary.allTokens].sort(sortByReference(dictionary));
     } else {
-      allProperties = [...dictionary.allProperties].sort(sortByName);
+      allTokens = [...dictionary.allTokens].sort(sortByName);
     }
 
     options = setComposeObjectProperties(options);
 
-    return template({ allProperties, file, options, formatProperty, fileHeader });
+    return template({ allTokens, file, options, formatProperty, fileHeader });
   },
 
   // iOS templates

package/lib/common/templates/compose/object.kt.template.js

@@ -23,7 +23,7 @@ package <%= file.packageName %>;
 %>
 
 object <%= file.className %> {
-  <%= allProperties.map(function(prop) {
+  <%= allTokens.map(function(prop) {
     let comment = "";
     if (prop.comment) {
       comment = \`/** \${prop.comment} */\\n  \`

package/lib/common/templates/css/fonts.css.template.js

@@ -1,4 +1,4 @@
-export default `<% Object.values(properties && properties.asset && properties.asset.font || {}).forEach(function(font) {
+export default `<% Object.values(tokens && tokens.asset && tokens.asset.font || {}).forEach(function(font) {
   var fileFormatArr = [];
   if (font.eot) {
   	fileFormatArr.push("url('../" + font.eot.value + "');\\n\\tsrc: url('../" + font.eot.value + "?#iefix') format('embedded-opentype')");

package/lib/common/templates/ios/singleton.m.template.js

@@ -34,7 +34,7 @@ export default `<%
   static dispatch_once_t onceToken;
 
   dispatch_once(&onceToken, ^{
-    dictionary = <%= buildDictionary(dictionary.properties) %>;
+    dictionary = <%= buildDictionary(dictionary.tokens) %>;
   });
 
   return dictionary;
@@ -42,25 +42,25 @@ export default `<%
 
 @end
 
-<% function buildDictionary(props, indent) {
+<% function buildDictionary(tokens, indent) {
   indent = indent || '  ';
   var to_ret = '@{\\n';
-  if (props.hasOwnProperty('value')) {
-    var value = props.attributes.category === 'size' || props.attributes.category === 'time' ? '@' + props.value : props.value;
+  if (tokens.hasOwnProperty('value')) {
+    var value = tokens.attributes.category === 'size' || tokens.attributes.category === 'time' ? '@' + tokens.value : tokens.value;
     to_ret += indent + '@"value": ' + value + ',\\n';
-    to_ret += indent + '@"name": @"' + props.name + '",\\n';
+    to_ret += indent + '@"name": @"' + tokens.name + '",\\n';
 
-    for(var name in props.attributes) {
-      if (props.attributes[name]) {
-        to_ret += indent + '@"' + name + '": @"' + props.attributes[name] + '",\\n';
+    for(var name in tokens.attributes) {
+      if (tokens.attributes[name]) {
+        to_ret += indent + '@"' + name + '": @"' + tokens.attributes[name] + '",\\n';
       }
     }
 
     // remove last comma
     return to_ret.slice(0, -2) + '\\n' + indent + '}';
   } else {
-    for(var name in props) {
-      to_ret += indent + '@"' + name + '": ' + buildDictionary(props[name], indent + '  ') + ',\\n';
+    for(var name in tokens) {
+      to_ret += indent + '@"' + name + '": ' + buildDictionary(tokens[name], indent + '  ') + ',\\n';
     }
     // remove last comma
     return to_ret.slice(0, -2) + '\\n' + indent + '}';

package/lib/common/templates/scss/map-deep.template.js

@@ -17,9 +17,9 @@ export default `<%
     // output the list of tokens as a Sass nested map
     // (the values are pointing to the variables)
     //
-    print(\`$\${file.mapName||'tokens'}: \${processJsonNode(dictionary.properties, 0)};\\n\`);
+    print(\`$\${file.mapName||'tokens'}: \${processJsonNode(dictionary.tokens, 0)};\\n\`);
 
-    // recursive function to process a properties JSON node
+    // recursive function to process a tokens JSON node
     //
     function processJsonNode(obj, depth) {
         var output = '';
@@ -31,7 +31,7 @@ export default `<%
             // if we have found a leaf (a property with a value) append the value
             output += \`$\${obj.name}\`;
         } else {
-            // if we have found a group of properties, use the Sass group "(...)" syntax and loop -recursively- on the children
+            // if we have found a group of tokens, use the Sass group "(...)" syntax and loop -recursively- on the children
             output += '(\\n'
             output += Object.keys(obj).map(function(newKey) {
             var newProp = obj[newKey];

package/lib/common/transforms.js

@@ -13,9 +13,16 @@
 
 import Color from 'tinycolor2';
 import path from '@bundled-es-modules/path-browserify';
-import { kebabCase, camelCase, snakeCase, upperFirst } from '../utils/es6_.js';
+import {
+  camelCaseTransformMerge,
+  snakeCase,
+  paramCase as kebabCase,
+  camelCase as _camelCase,
+} from 'change-case';
 import convertToBase64 from '../utils/convertToBase64.js';
 
+const camelCase = (str) => _camelCase(str, { transform: camelCaseTransformMerge });
+
 const UNICODE_PATTERN = /&#x([^;]+);/g;
 
 function isColor(token) {
@@ -281,6 +288,9 @@ export default {
   'name/cti/pascal': {
     type: 'name',
     transformer: function (token, options) {
+      const upperFirst = function (str) {
+        return str ? str[0].toUpperCase() + str.substr(1) : '';
+      };
       return upperFirst(camelCase([options.prefix].concat(token.path).join(' ')));
     },
   },