From 46fa0b67339f1ac2611ee8cd4b1b10a834732f89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Santanch=C3=A8?= Date: Tue, 22 Aug 2023 07:42:29 -0300 Subject: [PATCH] feat (style-dictionary): resolved class formater --- .../build/css/classes-resolved.css | 38 ++++++ .../css/{classes.css => classes-tokens.css} | 0 .../style-dictionary/config-classes.js | 126 +++++++++++------- .../src/{ => classes-resolved}/index.html | 3 +- .../src/classes-tokens/index.html | 13 ++ 5 files changed, 129 insertions(+), 51 deletions(-) create mode 100644 design-system/style-dictionary/build/css/classes-resolved.css rename design-system/style-dictionary/build/css/{classes.css => classes-tokens.css} (100%) rename design-system/style-dictionary/src/{ => classes-resolved}/index.html (70%) create mode 100644 design-system/style-dictionary/src/classes-tokens/index.html diff --git a/design-system/style-dictionary/build/css/classes-resolved.css b/design-system/style-dictionary/build/css/classes-resolved.css new file mode 100644 index 0000000..95e6dd9 --- /dev/null +++ b/design-system/style-dictionary/build/css/classes-resolved.css @@ -0,0 +1,38 @@ +@font-face { + font-family: 'MaterialIcons'; + src: url('../assets/fonts/MaterialIcons-Regular.ttf'); +} +@font-face { + font-family: 'Open Sans'; + src: url('../assets/fonts/OpenSans-Regular.ttf'); +} +@font-face { + font-family: 'Roboto'; + src: url('../assets/fonts/Roboto-Regular.ttf'); +} + +.btn { + font-family: Roboto; + font-size: 1rem; + border-radius: .375rem; + padding: 0.5rem 1rem; +} +.btn:hover { + cursor: pointer; +} +.btn-primary { + background-color: #616161; + color: #ffffff; + border: #9e9e9e; +} +.btn-primary:hover { + background-color: #212121; +} +.btn-secondary { + background-color: #e0e0e0; + color: #000000; + border: #e0e0e0; +} +.btn-secondary:hover { + background-color: #bdbdbd; +} diff --git a/design-system/style-dictionary/build/css/classes.css b/design-system/style-dictionary/build/css/classes-tokens.css similarity index 100% rename from design-system/style-dictionary/build/css/classes.css rename to design-system/style-dictionary/build/css/classes-tokens.css diff --git a/design-system/style-dictionary/config-classes.js b/design-system/style-dictionary/config-classes.js index f7fe16a..d171e7a 100644 --- a/design-system/style-dictionary/config-classes.js +++ b/design-system/style-dictionary/config-classes.js @@ -3,6 +3,46 @@ const StyleDictionary = require('style-dictionary') const fs = require('fs') const { transferableAbortController } = require('util') +const jsonStrClasses = + fs.readFileSync('classes/classes.json').toString() + +// find the path in the token tree and converts to the value +function getFinalValue(tokenName, dictionary) { + const tokenPath = tokenName.split('.') + let value = dictionary.tokens + let subpath = '' + for (const path of tokenPath) { + subpath += path + '.' + if (!value[path]) { + value = subpath + '..?' + break + } else { + value = value[path] + } + } + return value +} + +// convert token fonts into css imports +function cssImportFonts (dictionary) { + let cssFonts = '' + const dic = dictionary.tokens + if (dic.asset && dic.asset.font) { + const fonts = dic.asset.font + for (const f in fonts) { + const ftype = + (fonts[f].ttf) ? fonts[f].ttf : + (fonts[f].woff) ? fonts[f].woff : + (fonts[f].woff2) ? fonts[f].woff2 : + (fonts[f].eot) ? fonts[f].eot : null + if (ftype != null) + cssFonts += `@font-face {\n font-family: '${fonts[f].name.value}';\n src: url('${ftype.value}');\n}\n` + } + cssFonts += '\n' + } + return cssFonts +} + /* Output 1: aggregated tokens */ StyleDictionary.registerFormat({ name: 'jsonAggregatedFormat', @@ -15,23 +55,8 @@ StyleDictionary.registerFormat({ StyleDictionary.registerFormat({ name: 'jsonResolvedFormat', formatter: function({dictionary, platform, options, file}) { - const jsonStrClasses = fs.readFileSync('classes/classes.json') - const jsonResClasses = jsonStrClasses.toString().replace(/{(.*)}/g, (match, tokenName) => { - // find the path in the token tree - const tokenPath = tokenName.split('.') - let value = dictionary.tokens - let subpath = '' - for (const path of tokenPath) { - subpath += path + '.' - if (!value[path]) { - value = subpath + '..?' - break - } else { - value = value[path] - } - } - return value - }) + const jsonResClasses = jsonStrClasses + .replace(/{(.*)}/g, (match, tokenName) => getFinalValue(tokenName, dictionary)) return jsonResClasses } @@ -41,45 +66,41 @@ StyleDictionary.registerFormat({ StyleDictionary.registerFormat({ name: 'cssClassFormat', formatter: function({dictionary, platform, options, file}) { - // import token fonts - let cssFonts = '' - const dic = dictionary.tokens - if (dic.asset && dic.asset.font) { - const fonts = dic.asset.font - for (const f in fonts) { - const ftype = - (fonts[f].ttf) ? fonts[f].ttf : - (fonts[f].woff) ? fonts[f].woff : - (fonts[f].woff2) ? fonts[f].woff2 : - (fonts[f].eot) ? fonts[f].eot : null - if (ftype != null) - cssFonts += `@font-face {\n font-family: '${fonts[f].name.value}';\n src: url('${ftype.value}');\n}\n` - } - cssFonts += '\n' - } + return cssImportFonts(dictionary) + classJSONtoCSS (jsonStrClasses) + } +}) - // convert JSON classes to CSS classes - const jsonStrClasses = fs.readFileSync('classes/classes.json') - let cssClasses = '' - const jsonClasses = JSON.parse(jsonStrClasses) - for (const cls in jsonClasses) { - cssClasses += `.${cls} {\n` - for (const prop in jsonClasses[cls]) { - let value = jsonClasses[cls][prop] - // check Array type and transform in a string - if (Array.isArray(value)) - value = value.join(' ') +// convert JSON classes to CSS classes +function classJSONtoCSS (jsonStrClasses) { + let cssClasses = '' + const jsonClasses = JSON.parse(jsonStrClasses) + for (const cls in jsonClasses) { + cssClasses += `.${cls} {\n` + for (const prop in jsonClasses[cls]) { + let value = jsonClasses[cls][prop] + // check Array type and transform in a string + if (Array.isArray(value)) + value = value.join(' ') + if (value.includes('{')) value = value .replace(/\.value/g, '') .replace(/\./g, '-') .replace(/{/g, 'var(--') .replace(/}/g, ')') - cssClasses += ` ${prop}: ${value};\n` - } - cssClasses += '}\n' + cssClasses += ` ${prop}: ${value};\n` } + cssClasses += '}\n' + } + return cssClasses +} - return cssFonts + cssClasses +/* Output 4: CSS file with final values */ +StyleDictionary.registerFormat({ + name: 'cssResolvedClassFormat', + formatter: function({dictionary, platform, options, file}) { + const jsonResClasses = jsonStrClasses + .replace(/{(.*)}/g, (match, tokenName) => getFinalValue(tokenName, dictionary)) + return cssImportFonts(dictionary) + classJSONtoCSS (jsonResClasses) } }) @@ -118,7 +139,14 @@ module.exports = { }, { "format": "cssClassFormat", - "destination": "css/classes.css", + "destination": "css/classes-tokens.css", + "options": { + "showFileHeader": false + } + }, + { + "format": "cssResolvedClassFormat", + "destination": "css/classes-resolved.css", "options": { "showFileHeader": false } diff --git a/design-system/style-dictionary/src/index.html b/design-system/style-dictionary/src/classes-resolved/index.html similarity index 70% rename from design-system/style-dictionary/src/index.html rename to design-system/style-dictionary/src/classes-resolved/index.html index 5c2b792..1e70ad9 100644 --- a/design-system/style-dictionary/src/index.html +++ b/design-system/style-dictionary/src/classes-resolved/index.html @@ -3,8 +3,7 @@ - - +

diff --git a/design-system/style-dictionary/src/classes-tokens/index.html b/design-system/style-dictionary/src/classes-tokens/index.html new file mode 100644 index 0000000..9c6df88 --- /dev/null +++ b/design-system/style-dictionary/src/classes-tokens/index.html @@ -0,0 +1,13 @@ + + + + + + + + + +

+

+ + \ No newline at end of file