Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const StyleDictionary = require('style-dictionary');
// Rather than have Style Dictionary handle the merging of property files,
// you could use node module export/require to do it yourself. This will
// allow you to not have to copy object namespaces like you normally would.
// Take a look at any of the .js files in components/ or properties/
const properties = require('./properties');
const buildPath = 'build/';
// You can still add custom transforms and formats like you
// normally would and reference them in the config below.
StyleDictionary.registerTransform({
name: 'myRegisteredTransform',
type: 'value',
matcher: (prop) => prop.attributes.category === 'size',
transformer: (prop) => `${parseInt(prop.value) * 16}px`
});
StyleDictionary.registerFormat({
name: 'myRegisteredFormat',
formatter: (dictionary) => {
return dictionary.allProperties.map((prop) => prop.value).join('\n');
}
})
// You can export a plain JS object and point the Style Dictionary CLI to it,
// similar to webpack.
module.exports = {
}
});
StyleDictionary.registerTransform({
name: 'ratio/%',
type: 'value',
matcher: function(prop) {
// here we are using a custom attribute, declared in the property, to match the values where apply the transform
return prop.group === 'ratio';
},
transformer: function(prop) {
return `${Math.floor(100 * prop.value)}%`;
}
});
StyleDictionary.registerTransform({
name: 'hexRGB/hexARGB',
type: 'value',
matcher: function(prop) {
return prop.group === 'color';
},
transformer: function(prop) {
// for sake of simplicity, in this example we assume colors are always in the format #xxxxxx
return prop.value.replace(/^#/,'#FF');
}
});
StyleDictionary.registerTransform({
name: 'unitless/dp-sp',
type: 'value',
matcher: function(prop) {
return prop.group === 'typography' || prop.group === 'spacing';
// I wanted to use this custom transform instead of the "prefix" property applied to the platforms
// because I wanted to apply the "token" prefix only to actual tokens and not to the aliases
// but I've found out that in case of "name/cti/constant" the prefix was not respecting the case for the "prefix" part
//
// StyleDictionaryPackage.registerTransform({
// name: 'name/prefix-token',
// type: 'name',
// matcher: function(prop) {
// return prop.attributes.category !== 'alias';
// },
// transformer: function(prop) {
// return `token-${prop.name}`;
// }
// });
StyleDictionaryPackage.registerTransform({
name: 'size/pxToPt',
type: 'value',
matcher: function(prop) {
return prop.value.match(/^[\d.]+px$/);
},
transformer: function(prop) {
return prop.value.replace(/px$/, 'pt');
}
});
StyleDictionaryPackage.registerTransform({
name: 'size/pxToDp',
type: 'value',
matcher: function(prop) {
return prop.value.match(/^[\d.]+px$/);
},