BREAKING: remove feature for auto grabbing SD instance

tokens-studio · Dec 4, 2023 · 87ab73a · 87ab73a
1 parent e3d89fe
commit 87ab73a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 37 deletions.
diff --git a/.changeset/fluffy-files-call.md b/.changeset/fluffy-files-call.md
@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': minor
+---
+
+BREAKING: remove code that allowed user to not pass StyleDictionary instance to registerTransforms, and grabbed the locally installed StyleDictionary automatically. This seemed like a cool feature at first, but can cause hard to trace bugs if there are multiple installations of style-dictionary (due to incompatible semver).
diff --git a/README.md b/README.md
@@ -135,7 +135,7 @@ StyleDictionary.registerTransformGroup({
 You can pass options to the `registerTransforms` function.
 
 ```js
-registerTransforms({
+registerTransforms(StyleDictionary, {
   expand: {
     composition: false,
     typography: true,

diff --git a/src/registerTransforms.ts b/src/registerTransforms.ts
@@ -15,8 +15,6 @@ import { TransformOptions } from './TransformOptions.js';
 import { transformOpacity } from './transformOpacity.js';
 import { parseTokens } from './parsers/parse-tokens.js';
 
-const isBrowser = typeof window === 'object';
-
 export const transforms = [
   'ts/descriptionToComment',
   'ts/size/px',
@@ -38,29 +36,11 @@ export const transforms = [
  * import style-dictionary as it depends on nodejs env
  */
 export async function registerTransforms(sd: Core, transformOpts?: TransformOptions) {
-  let _sd = sd;
-
-  // TODO: Remove in breaking change, this is a bad idea in general because our local Style-Dictionary
-  // installation will be preferred by Node resolution algorithm over the user's installed version
-  // in the scenario that multiple versions are installed (e.g. v3 by user and v4 by sd-transforms)
-  // e.g. node_modules/@tokens-studio/sd-transforms/node_modules/style-dictionary (sd-transforms local)
-  // versus node_modules/style-dictionary (user local)
-  // Force user to always pass the instance directly, to prevent nasty bugs.
-
-  // NodeJS env and no passed SD? let's register on our installed SD
-  // We're in ESM, but style-dictionary is CJS only, so we need module.createRequire
-  if (!isBrowser && _sd === undefined) {
-    const module = await import(/* webpackIgnore: true */ 'node:module');
-    const mod = module.default;
-    const require = mod.createRequire(import.meta.url);
-    _sd = require('style-dictionary');
-  }
-
   // Allow completely disabling the registering of this parser
   // in case people want to combine the expandComposites() utility with their own parser and prevent conflicts
   if (transformOpts?.expand !== false) {
     // expand composition tokens, typography, border, shadow (latter 3 conditionally, as opt-in)
-    _sd.registerParser({
+    sd.registerParser({
       pattern: /\.json$/,
       parse: ({ filePath, contents }) => {
         const tokens = JSON.parse(contents);
@@ -69,14 +49,14 @@ export async function registerTransforms(sd: Core, transformOpts?: TransformOpti
     });
   }
 
-  _sd.registerTransform({
+  sd.registerTransform({
     name: 'ts/descriptionToComment',
     type: 'attribute',
     matcher: token => token.description,
     transformer: token => mapDescriptionToComment(token),
   });
 
-  _sd.registerTransform({
+  sd.registerTransform({
     name: 'ts/size/px',
     type: 'value',
     matcher: token =>
@@ -86,35 +66,35 @@ export async function registerTransforms(sd: Core, transformOpts?: TransformOpti
     transformer: token => transformDimension(token.value),
   });
 
-  _sd.registerTransform({
+  sd.registerTransform({
     name: 'ts/opacity',
     type: 'value',
     matcher: token => token.type === 'opacity',
     transformer: token => transformOpacity(token.value),
   });
 
-  _sd.registerTransform({
+  sd.registerTransform({
     name: 'ts/size/css/letterspacing',
     type: 'value',
     matcher: token => token.type === 'letterSpacing',
     transformer: token => transformLetterSpacingForCSS(token.value),
   });
 
-  _sd.registerTransform({
+  sd.registerTransform({
     name: 'ts/size/lineheight',
     type: 'value',
     matcher: token => token.type === 'lineHeights',
     transformer: token => transformLineHeight(token.value),
   });
 
-  _sd.registerTransform({
+  sd.registerTransform({
     name: 'ts/typography/fontWeight',
     type: 'value',
     matcher: token => token.type === 'fontWeights',
     transformer: token => transformFontWeights(token.value),
   });
 
-  _sd.registerTransform({
+  sd.registerTransform({
     name: 'ts/typography/css/fontFamily',
     type: 'value',
     matcher: token => token.type === 'fontFamilies',
@@ -132,39 +112,39 @@ export async function registerTransforms(sd: Core, transformOpts?: TransformOpti
    * or because the modifications have to be done on this specific token,
    * after resolution, e.g. color modify
    */
-  _sd.registerTransform({
+  sd.registerTransform({
     name: 'ts/resolveMath',
     type: 'value',
     transitive: true,
     matcher: token => typeof token.value === 'string',
     transformer: token => checkAndEvaluateMath(token.value),
   });
 
-  _sd.registerTransform({
+  sd.registerTransform({
     name: 'ts/typography/css/shorthand',
     type: 'value',
     transitive: true,
     matcher: token => token.type === 'typography',
     transformer: token => transformTypographyForCSS(token.value),
   });
 
-  _sd.registerTransform({
+  sd.registerTransform({
     name: 'ts/typography/compose/shorthand',
     type: 'value',
     transitive: true,
     matcher: token => token.type === 'typography',
     transformer: token => transformTypographyForCompose(token.value),
   });
 
-  _sd.registerTransform({
+  sd.registerTransform({
     name: 'ts/border/css/shorthand',
     type: 'value',
     transitive: true,
     matcher: token => token.type === 'border',
     transformer: token => transformBorderForCSS(token.value),
   });
 
-  _sd.registerTransform({
+  sd.registerTransform({
     name: 'ts/shadow/css/shorthand',
     type: 'value',
     transitive: true,
@@ -175,15 +155,15 @@ export async function registerTransforms(sd: Core, transformOpts?: TransformOpti
         : transformShadowForCSS(token.value),
   });
 
-  _sd.registerTransform({
+  sd.registerTransform({
     name: 'ts/color/css/hexrgba',
     type: 'value',
     transitive: true,
     matcher: token => typeof token.value === 'string' && token.type === 'color',
     transformer: token => transformHEXRGBaForCSS(token.value),
   });
 
-  _sd.registerTransform({
+  sd.registerTransform({
     name: 'ts/color/modifiers',
     type: 'value',
     transitive: true,
@@ -194,7 +174,7 @@ export async function registerTransforms(sd: Core, transformOpts?: TransformOpti
 
   const casing = transformOpts?.casing ?? 'camel';
   const casingTransform = `name/cti/${casing}`;
-  _sd.registerTransformGroup({
+  sd.registerTransformGroup({
     name: 'tokens-studio',
     transforms: [
       ...(transformOpts?.addAttributeCTI === true ? ['attribute/cti'] : []),