add custom transformers for px

config.json

@@ -2,23 +2,23 @@
   "source": ["tokens/*.json"],
   "platforms": {
     "scss": {
-      "transformGroup": "scss",
+      "transformGroup": "custom/scss",
       "buildPath": "build/scss/",
       "files": [{
         "destination": "_variables.scss",
         "format": "scss/variables"
       }]
     },
     "less": {
-      "transformGroup": "less",
+      "transformGroup": "custom/less",
       "buildPath": "build/less/",
       "files": [{
         "destination": "_variables.less",
         "format": "less/variables"
       }]
     },
     "css": {
-      "transformGroup": "css",
+      "transformGroup": "custom/css",
       "buildPath": "build/css/",
       "files": [{
         "destination": "_variables.css",

package.json

@@ -13,7 +13,7 @@
   },
   "scripts": {
     "start": "npm run transform-tokens",
-    "transform-tokens": "style-dictionary build",
+    "transform-tokens": "node ./transformTokens.js",
     "test": "jest tests --coverage=false"
   },
   "repository": {

transformTokens.js

@@ -0,0 +1,53 @@
+const StyleDictionary = require('style-dictionary')
+const baseConfig = require('./config.json')
+
+
+StyleDictionary.registerTransform({
+  name: 'size/px',
+  type: 'value',
+  matcher: token => {
+    return token.unit === 'pixel' && token.value !== 0
+  },
+  transformer: token => {
+    return `${token.value}px`
+  },
+})
+
+StyleDictionary.registerTransform({
+  name: 'size/percent',
+  type: 'value',
+  matcher: token => {
+    return token.unit === 'percent' && token.value !== 0
+  },
+  transformer: token => {
+    return `${token.value}%`
+  },
+})
+
+StyleDictionary.registerTransformGroup({
+  name: 'custom/css',
+  transforms: StyleDictionary.transformGroup['css'].concat([
+    'size/px',
+    'size/percent',
+  ]),
+})
+
+StyleDictionary.registerTransformGroup({
+  name: 'custom/less',
+  transforms: StyleDictionary.transformGroup['less'].concat([
+    'size/px',
+    'size/percent',
+  ]),
+})
+
+StyleDictionary.registerTransformGroup({
+  name: 'custom/scss',
+  transforms: StyleDictionary.transformGroup['less'].concat([
+    'size/px',
+    'size/percent',
+  ]),
+})
+
+const StyleDictionaryExtended = StyleDictionary.extend(baseConfig)
+
+StyleDictionaryExtended.buildAllPlatforms()