style-dictionary icon indicating copy to clipboard operation
style-dictionary copied to clipboard

Exclude a single property from transformation?

Open djmtype opened this issue 3 years ago • 2 comments

Being kind of new to Style Dictionary, is it possible to exclude or filter out a single property from being transformed?

I'm converting unit-less integers to rems. However, this means all items under spacing will be converted to rems including spacing.scale. I'd prefer if spacing.scale remains in tact and didn't get transformed, remaining as a value of 2 without any unit appended to it.

Is there a way to retain its original value without having to place it under a different object that doesn't receive transforms?

  "spacing": {
    "scale": {
      "value": 2,
      "type": "spacing",
      "rawValue": "2"
    },
    "xs": {
      "value": 4,
      "type": "spacing",
      "rawValue": "4"
    },
    "sm": {
      "value": 8,
      "type": "spacing",
      "rawValue": "{spacing.xs} * {spacing.scale}"
    },
    // etc.
  }
StyleDictionary.registerTransform({
  name: 'transformPxToRem',
  type: 'value',
  matcher: (token) =>
    ["spacing"].includes(token.type),
  transformer: (token) => {
    return `${token.value / 16}rem`
  }
})

StyleDictionary.registerTransformGroup({
  type: 'value',
  name: 'custom/css',
  transforms: StyleDictionary.transformGroup['css'].concat([
    'transformPxToRem',
    'attribute/cti',
    'name/cti/kebab',
    'color/css',
    'color/rgb'
  ]),
})

djmtype avatar Jul 26 '22 15:07 djmtype

Hey @djmtype I'm also new to Style Dictionary and have been looking trough the issues to learn a bit more on the project.

This might be a long shot, but couldn't you just ignore it somehow on the matcher of your registered transform?

You should have the path on the token right?

Have you tried something like the snippet bellow?

matcher: token => {
  ["spacing"].includes(token.type) && !["scale"].includes(token.path)
}

rodrigo-picanco avatar Jul 28 '22 14:07 rodrigo-picanco

@rodrigo-picanco thanks, some basic js outta do it

djmtype avatar Aug 01 '22 12:08 djmtype