Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
// REGISTER THE CUSTOM TRANFORM GROUPS
// if you want to see what a pre-defined group contains, uncomment the next line:
// console.log(StyleDictionary.transformGroup['group_name']);
StyleDictionary.registerTransformGroup({
name: 'custom/web',
// notice: here the "size/px" transform is not the pre-defined one, but the custom one we have declared above
transforms: ['attribute/cti', 'name/cti/constant', 'size/px', 'color/css', 'time/seconds', 'ratio/%']
});
StyleDictionary.registerTransformGroup({
name: 'custom/scss',
// this is to show one possibility for adding a few transforms to a pre-defined group
// (however, we suggest to use the previous approach, which is more explicit and clear)
transforms: StyleDictionary.transformGroup['scss'].concat(['size/px', 'ratio/%'])
});
StyleDictionary.registerTransformGroup({
name: 'custom/android',
// as you can see, here we are completely ignoring the "attribute/cti" transform (it's totally possible),
// because we are relying on custom attributes for the matchers and the custom format for the output
transforms: ['name/squiggle', 'hexRGB/hexARGB', 'unitless/dp-sp']
});
// REGISTER A CUSTOM FORMAT (to be used for this specific example)
StyleDictionary.registerFormat({
name: 'custom/android/xml',
formatter: function(dictionary) {
return dictionary.allProperties.map(function(prop) {
transforms: [ "name/cti/kebab", "time/seconds", "size/px", "color/css" ]
});
StyleDictionaryPackage.registerTransformGroup({
name: 'tokens-ios',
// to see the pre-defined "ios" transformation use: console.log(StyleDictionaryPackage.transformGroup['ios']);
transforms: [ "attribute/cti", "name/cti/camel", "size/pxToPt"]
});
StyleDictionaryPackage.registerTransformGroup({
name: 'tokens-android',
// to see the pre-defined "android" transformation use: console.log(StyleDictionaryPackage.transformGroup['android']);
transforms: [ "attribute/cti", "name/cti/camel", "size/pxToDp"]
});
StyleDictionaryPackage.transformGroup['android'];
console.log('Build started...');
// PROCESS THE DESIGN TOKENS FOR THE DIFFEREN BRANDS AND PLATFORMS
['web', 'ios', 'android'].map(function(platform) {
['brand#1', 'brand#2', 'brand#3'].map(function(brand) {
console.log('\n==============================================');
console.log(`\nProcessing: [${platform}] [${brand}]`);
const StyleDictionary = StyleDictionaryPackage.extend(getStyleDictionaryConfig(brand, platform));
if (platform === 'web') {
StyleDictionary.buildPlatform('web/js');
StyleDictionary.buildPlatform('web/json');
// Using the custom format defined above
format: 'myFormat'
}]
},
css: {
transformGroup: 'css',
buildPath: buildPath,
files: [{
destination: 'variables.css',
format: 'css/variables'
}]
},
scss: {
// This works, we can create new transform arrays on the fly and edit built-ins
transforms: StyleDictionary.transformGroup.scss.concat('color/rgb'),
buildPath: buildPath,
files: [{
destination: 'variables.scss',
format: 'scss/variables'
}]
},
js: {
transforms: StyleDictionary.transformGroup.js.concat('myRegisteredTransform'),
buildPath: buildPath,
// If you want to get super fancy, you can use node modules
// to create a properties object first, and then you can
// reference attributes of that object. This allows you to
// output 1 file per color namespace.
files: Object.keys(properties.color).map((colorType) => ({
destination: `${colorType}.js`,
format: 'css/variables'
}]
},
scss: {
// This works, we can create new transform arrays on the fly and edit built-ins
transforms: StyleDictionary.transformGroup.scss.concat('color/rgb'),
buildPath: buildPath,
files: [{
destination: 'variables.scss',
format: 'scss/variables'
}]
},
js: {
transforms: StyleDictionary.transformGroup.js.concat('myRegisteredTransform'),
buildPath: buildPath,
// If you want to get super fancy, you can use node modules
// to create a properties object first, and then you can
// reference attributes of that object. This allows you to
// output 1 file per color namespace.
files: Object.keys(properties.color).map((colorType) => ({
destination: `${colorType}.js`,
format: 'javascript/es6',
// Filters can be functions that return a boolean
filter: (prop) => prop.attributes.type === colorType
}))
},
// You can still use built-in transformGroups and formats like before
json: {
transformGroup: 'js',