How to use the style-dictionary.registerTransform function in style-dictionary

To help you get started, we’ve selected a few style-dictionary examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github amzn / style-dictionary / examples / advanced / node-modules-as-config-and-properties / config.js View on Github external
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 = {
github amzn / style-dictionary / examples / advanced / custom-transforms / build.js View on Github external
}
});

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';
github didoo / style-dictionary-demo / build.js View on Github external
// 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$/);
    },

style-dictionary

Style once, use everywhere. A build system for creating cross-platform styles.

Apache-2.0
Latest version published 3 months ago

Package Health Score

98 / 100
Full package analysis