From 00c39e3c0afe86b17b111965898f6fb8f097b1ea Mon Sep 17 00:00:00 2001 From: Joren Broekema Date: Fri, 6 May 2022 08:43:53 +0200 Subject: [PATCH] BREAKING: remove default export, use named (#9) --- .changeset/green-rivers-rest.md | 27 ++++++++++++++++++++ README.md | 35 ++++++++++++++++++-------- index.js | 2 +- package-lock.json | 28 ++++++++++----------- src/style-dictionary-to-figma.js | 2 +- test/style-dictionary-to-figma.test.js | 4 +-- 6 files changed, 69 insertions(+), 29 deletions(-) create mode 100644 .changeset/green-rivers-rest.md diff --git a/.changeset/green-rivers-rest.md b/.changeset/green-rivers-rest.md new file mode 100644 index 0000000..20d180f --- /dev/null +++ b/.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 +``` diff --git a/README.md b/README.md index f850e8f..37624dc 100644 --- a/README.md +++ b/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', }, ], }, diff --git a/index.js b/index.js index 664c458..8a4a789 100644 --- a/index.js +++ b/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'; diff --git a/package-lock.json b/package-lock.json index 41cd551..63f5a6d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@divriots/style-dictionary-to-figma", - "version": "0.1.0", + "version": "0.1.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@divriots/style-dictionary-to-figma", - "version": "0.1.0", + "version": "0.1.1", "license": "MIT", "devDependencies": { "@changesets/cli": "^2.20.0", @@ -1780,9 +1780,9 @@ } }, "node_modules/async": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", - "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "dependencies": { "lodash": "^4.17.14" @@ -5571,9 +5571,9 @@ } }, "node_modules/minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz", + "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==", "dev": true }, "node_modules/minimist-options": { @@ -9655,9 +9655,9 @@ "dev": true }, "async": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", - "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "requires": { "lodash": "^4.17.14" @@ -12527,9 +12527,9 @@ } }, "minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz", + "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==", "dev": true }, "minimist-options": { diff --git a/src/style-dictionary-to-figma.js b/src/style-dictionary-to-figma.js index e5e9574..2c9b980 100644 --- a/src/style-dictionary-to-figma.js +++ b/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)))); } diff --git a/test/style-dictionary-to-figma.test.js b/test/style-dictionary-to-figma.test.js index 26675fb..77fe2d7 100644 --- a/test/style-dictionary-to-figma.test.js +++ b/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); }); });