OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Can I use style-dictionary functionality without flushing the result into a output file?

  • Thread starter Thread starter MacGregor
  • Start date Start date
M

MacGregor

Guest
I am creating a design system using Storybook and style-dictionary. My tokens are saved in tokens.json, which looks like this:

Code:
{
  "global": {
    "colors": {
      "default": {
        "white": {
          "value": "#ffffff",
          "type": "color"
        },
        "black": {
          "value": "#000000",
          "type": "color"
        },
        "red": {
          "value": "#ff0000",
          "type": "color"
        },
         ...
        }
     }
  }
}

I am exporting these tokens using style-dictionary into scss files. For this purpose I have build-tokens.js script that, apart from that, also manually edits the tokens before flushing them into a new scss file (they need some extra polishing before exporting).

  1. First, I am registering a custom format:

Code:
StyleDictionary.registerFormat({
  name: `customFormat`,
  formatter: function({ dictionary, file }) {
    let editedTokens = ``
    // ...
    // manual polishing of dictionary.tokens
    return editedTokens
   }
})
  1. Then, I am using it like this:

Code:
const sd = StyleDictionary.extend({
  source: ['src/tokens/tokens.json'],
  platforms: {
    scss: {
      transforms: [
        'ts/descriptionToComment',
        'ts/size/px',
        'ts/opacity',
        'ts/size/lineheight',
        'ts/type/fontWeight',
        'ts/resolveMath',
        'ts/size/css/letterspacing',
        'ts/typography/css/shorthand',
        'ts/border/css/shorthand',
        'ts/shadow/css/shorthand',
        'ts/color/css/hexrgba',
        'ts/color/modifiers',
        'name/cti/kebab'
      ],
      buildPath: 'build/scss/',
      files: [
        {
          destination: 'tokens.scss',
          format: 'scss/variables'
        },
        {
          destination: 'tokensForStorybook.scss',
          format: 'tokensForStorybook'   // <------------ here it is applied
        }
      ]
    }
  }
})

sd.cleanAllPlatforms()
sd.buildAllPlatforms()

My question is, can I somehow omit the exporting part of the script? Could I, for example, use it only as a "function library"? I would like to use this "polishing part" in my other script, without the need of running sd.buildAllPlatforms().

<p>I am creating a design system using <a href="https://storybook.js.org/" rel="nofollow noreferrer">Storybook</a> and <a href="https://amzn.github.io/style-dictionary/" rel="nofollow noreferrer">style-dictionary</a>. My tokens are saved in <code>tokens.json</code>, which looks like this:</p>
<pre class="lang-json prettyprint-override"><code>{
"global": {
"colors": {
"default": {
"white": {
"value": "#ffffff",
"type": "color"
},
"black": {
"value": "#000000",
"type": "color"
},
"red": {
"value": "#ff0000",
"type": "color"
},
...
}
}
}
}
</code></pre>
<p>I am exporting these tokens using <code>style-dictionary</code> into <code>scss</code> files. For this purpose I have <code>build-tokens.js</code> script that, apart from that, also manually edits the tokens before flushing them into a new scss file (they need some extra polishing before exporting).</p>
<ol>
<li>First, I am registering a custom format:</li>
</ol>
<pre class="lang-js prettyprint-override"><code>StyleDictionary.registerFormat({
name: `customFormat`,
formatter: function({ dictionary, file }) {
let editedTokens = ``
// ...
// manual polishing of dictionary.tokens
return editedTokens
}
})
</code></pre>
<ol start="2">
<li>Then, I am using it like this:</li>
</ol>
<pre><code>const sd = StyleDictionary.extend({
source: ['src/tokens/tokens.json'],
platforms: {
scss: {
transforms: [
'ts/descriptionToComment',
'ts/size/px',
'ts/opacity',
'ts/size/lineheight',
'ts/type/fontWeight',
'ts/resolveMath',
'ts/size/css/letterspacing',
'ts/typography/css/shorthand',
'ts/border/css/shorthand',
'ts/shadow/css/shorthand',
'ts/color/css/hexrgba',
'ts/color/modifiers',
'name/cti/kebab'
],
buildPath: 'build/scss/',
files: [
{
destination: 'tokens.scss',
format: 'scss/variables'
},
{
destination: 'tokensForStorybook.scss',
format: 'tokensForStorybook' // <------------ here it is applied
}
]
}
}
})

sd.cleanAllPlatforms()
sd.buildAllPlatforms()
</code></pre>
<p>My question is, can I somehow omit the <code>exporting</code> part of the script? Could I, for example, use it only as a "function library"? I would like to use this <strong>"polishing part"</strong> in my other script, without the need of running <code>sd.buildAllPlatforms()</code>.</p>
 
Top