From 2a1d7bc9789069913151b80e4016fc5c327158a8 Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <oppermann.lukas@gmail.com>
Date: Thu, 22 Jul 2021 21:26:04 +0200
Subject: [PATCH] add custom transformers for px

---
 config.json        |  6 +++---
 package.json       |  2 +-
 transformTokens.js | 53 ++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100644 transformTokens.js

diff --git a/config.json b/config.json
index 9455891f3..cc2b1f8c4 100644
--- a/config.json
+++ b/config.json
@@ -2,7 +2,7 @@
   "source": ["tokens/*.json"],
   "platforms": {
     "scss": {
-      "transformGroup": "scss",
+      "transformGroup": "custom/scss",
       "buildPath": "build/scss/",
       "files": [{
         "destination": "_variables.scss",
@@ -10,7 +10,7 @@
       }]
     },
     "less": {
-      "transformGroup": "less",
+      "transformGroup": "custom/less",
       "buildPath": "build/less/",
       "files": [{
         "destination": "_variables.less",
@@ -18,7 +18,7 @@
       }]
     },
     "css": {
-      "transformGroup": "css",
+      "transformGroup": "custom/css",
       "buildPath": "build/css/",
       "files": [{
         "destination": "_variables.css",
diff --git a/package.json b/package.json
index 9b97da010..e9dd063be 100644
--- a/package.json
+++ b/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": {
diff --git a/transformTokens.js b/transformTokens.js
new file mode 100644
index 000000000..362bf0a5a
--- /dev/null
+++ b/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()
\ No newline at end of file