amzn / style-dictionary

A build system for creating cross-platform styles.
https://styledictionary.com
Apache License 2.0
3.87k stars 543 forks source link

Question - registerTransform not working as expected #924

Open argdesign opened 1 year ago

argdesign commented 1 year ago

I was trying to transform shadows tokens in scss variables but I'm getting [object, object] instead . I created a registerTransform and I think the marcher is not working but I’m not sure how to fix it.

json

"shadow": {
    "level1": {
      "value": {
        "color": " rgba (0, 0, 0, 0.10)",
        "type": "dropShadow",
        "x": "2",
        "y": "2",
        "blur": "10",
        "spread": "0"
      },
      "type": "boxShadow"
    },
   level2:{...}
  },

Desire results

$shadow-level1: 0 4px 8px 0 rgba(0, 0, 0, 0.10);
$shadow-level2: 0 8px 16px 0 rgba(0, 0, 0, 0.10);

build.js

const StyleDictionary = require('style-dictionary').extend({
  source: ['tokens/**/test.json'],
  platforms: {
    scss: {
      buildPath: 'build/scss/',
      transforms: [
        'attribute/cti',  
        'color/css',      
        'name/cti/kebab', 
        'size/px'   
      ], 
      files: [{
        destination: 'test.scss',
        format: 'scss/variables',
        attributes: {
            category: 'shadow',
            type: 'value'
        }
      }],

    }
  }
});

StyleDictionary.registerTransform({
   name: 'scss/variables',
   type: 'value',
   matcher: function(prop) {
     return prop.attributes.category === 'shadow';
   },
   transformer: function(prop) {
   //estructure shadow values from original token value
     const {
       x,
       y,
       blur,
       spread,
       color
     } = prop.original.value

     return `${x}px ${y}px ${blur}px ${spread}px ${color}`
   }
 });
dbanksdesign commented 1 year ago

From your code it looks like you are registering a transform named 'scss/variables', but you aren't using it in the transforms array in your config. You are using a format called 'scss/variables', which is a built-in format. I would assume you actually want to name the transform something like 'scss/shadow' and then use that in the transforms array.