BREAKING: remove default export, use named (#9)

.changeset/green-rivers-rest.md

@@ -0,0 +1,27 @@
+---
+'@divriots/style-dictionary-to-figma': minor
+---
+
+BREAKING: no longer using default export, this is considered an anti-pattern for JS libraries. [Re-export wildstars with default exports in ESM](https://twitter.com/DasSurma/status/1509835337295609865) is one example quirk, another example is [CommonJS not supporting default exports next to named exports in a single file](https://github.com/divriots/style-dictionary-to-figma/issues/7). Now, the main export is a named export called "transform" and you have to import it as such.
+
+Before:
+
+```js
+// ESM
+import styleDictionaryToFigma from '@divriots/style-dictionary-to-figma';
+// CommonJS
+const styleDictionaryToFigma = require('@divriots/style-dictionary-to-figma');
+
+styleDictionaryToFigma({...}) // figma object
+```
+
+After:
+
+```js
+// ESM
+import { transform } from '@divriots/style-dictionary-to-figma';
+// CommonJS
+const { transform } = require('@divriots/style-dictionary-to-figma');
+
+transform({...}) // figma object
+```

README.md

@@ -13,7 +13,6 @@
 
 # Style Dictionary To Figma
 
-
 A utility that transforms a [style-dictionary](https://amzn.github.io/style-dictionary/#/) object into something [Figma Tokens plugin](https://www.figma.com/community/plugin/843461159747178978) understands.
 
 Used by Design Systems in [Backlight](https://backlight.dev) using design tokens in [style-dictionary](https://amzn.github.io/style-dictionary/) that can be synced into Figma via the [Figma Tokens plugin](https://www.figma.com/community/plugin/843461159747178978).
@@ -32,10 +31,10 @@ npm i @divriots/style-dictionary-to-figma
 ```
 
 ```js
-import styleDictionaryToFigma from '@divriots/style-dictionary-to-figma';
+import { transform } from '@divriots/style-dictionary-to-figma';
 
 const sdObject = { ... };
-const figmaObj = styleDictionaryToFigma(sdObject);
+const figmaObj = transform(sdObject);
 ```
 
 In case you want its separate counterparts, you can import them separately.
@@ -53,18 +52,32 @@ Once you transformed the object to Figma, a recommendation is to push this to Gi
 
 ## Use in [Backlight](https://backlight.dev/) / [Style-dictionary](https://amzn.github.io/style-dictionary/#/)
 
-Simply import the `styleDictionaryToFigma` utility and create a style-dictionary formatter:
+Import the `transform` utility and create a style-dictionary formatter:
+
+```js
+const { transform } = require('@divriots/style-dictionary-to-figma');
+const StyleDictionary = require('style-dictionary');
+
+StyleDictionary.registerFormat({
+  name: 'figmaTokensPlugin',
+  formatter: ({ dictionary }) => {
+    const transformedTokens = transform(dictionary.tokens);
+    return JSON.stringify(transformedTokens, null, 2);
+  },
+});
+```
+
+Or you can also put the formatter directly into the config without registering it imperatively:
 
 ```js
-import styleDictionaryToFigma from '@divriots/style-dictionary-to-figma';
+const { transform } = require('@divriots/style-dictionary-to-figma');
 
-export default {
+module.exports = {
   source: ['**/*.tokens.json'],
   format: {
-    figmaTokensPluginJson: opts => {
-      const { dictionary } = opts;
-      const parsedTokens = styleDictionaryToFigma(dictionary.tokens);
-      return JSON.stringify(parsedTokens, null, 2);
+    figmaTokensPlugin: ({ dictionary }) => {
+      const transformedTokens = transform(dictionary.tokens);
+      return JSON.stringify(transformedTokens, null, 2);
     },
   },
   platforms: {
@@ -74,7 +87,7 @@ export default {
       files: [
         {
           destination: 'tokens.json',
-          format: 'figmaTokensPluginJson',
+          format: 'figmaTokensPlugin',
         },
       ],
     },

index.js

@@ -2,4 +2,4 @@ export { markTokenset } from './src/mark-tokenset.js';
 export { trimName } from './src/trim-name.js';
 export { trimValue } from './src/trim-value.js';
 export { useRefValue } from './src/use-ref-value.js';
-export { default } from './src/style-dictionary-to-figma.js';
+export { transform } from './src/style-dictionary-to-figma.js';

src/style-dictionary-to-figma.js

@@ -11,6 +11,6 @@ import { useRefValue } from './use-ref-value.js';
  * @param {Obj} obj
  * @returns {Obj}
  */
-export default function styleDictionaryToFigma(obj) {
+export function transform(obj) {
   return markTokenset(trimName(useRefValue(trimValue(obj))));
 }

test/style-dictionary-to-figma.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import styleDictionaryToFigma from '../src/style-dictionary-to-figma.js';
+import { transform } from '../src/style-dictionary-to-figma.js';
 
 describe('style-dictionary-to-figma', () => {
   it('transforms style dictionary tokens object to a figma tokens plugin compatible object', () => {
@@ -79,7 +79,7 @@ describe('style-dictionary-to-figma', () => {
       },
     };
 
-    const transformedObj = styleDictionaryToFigma(obj);
+    const transformedObj = transform(obj);
     expect(transformedObj).to.eql(expectedObj);
   });
 });