How to use the style-dictionary.extend 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 / custom-formats-with-templates / build.js View on Github external
const StyleDictionary = require('style-dictionary').extend(__dirname + '/config.json');
const fs = require('fs');
const _ = require('lodash');
const handlebars = require('handlebars');
const pug = require('pug');


console.log('Build started...');
console.log('\n==============================================');


// DECLARE CUSTOM FORMATS VIA CUSTOM TEMPLATE FILES (AND ENGINES)


// These formatting functions are using the Lodash "template" syntax

StyleDictionary.registerFormat({
github amzn / style-dictionary / examples / advanced / custom-transforms / build.js View on Github external
// 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) {
      return `${prop.value}`;
    }).join('\n');
  }
});


// APPLY THE CONFIGURATION
// IMPORTANT: the registration of custom transforms
// needs to be done _before_ applying the configuration
StyleDictionaryExtended = StyleDictionary.extend(__dirname + '/config.json');


// FINALLY, BUILD ALL THE PLATFORMS
StyleDictionaryExtended.buildAllPlatforms();


console.log('\n==============================================');
console.log('\nBuild completed!');
github davixyz / design-tokens / index.js View on Github external
const del = require('del');
const path = require('path');
/*

Initialize all this modules after style dictionary since they
use StyleDictionary's methods
*/
require('./src/transforms');
require('./src/transformGroups');
require('./src/templates');
require('./src/actions');

// Get the config
const config = require('./style-config.json');

const Dictionary = StyleDictionary.extend(config);

/*
Here we are separating the taks so we can run them
separate as needed. This can be simplified but currently
i'm deleting a bunch of folder to dynamically recreate.
*/

switch (argv.platform) {
  case 'web':
    del(path.join(__dirname, './build/web/')).then(() => {
      Dictionary.buildPlatform('web');
    });
    break;

  case 'ios':
    del([
github didoo / style-dictionary-demo / build.js View on Github external
['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');
            StyleDictionary.buildPlatform('web/scss');
        } else if (platform === 'ios') {
            StyleDictionary.buildPlatform('ios');
        } else if (platform === 'android') {
            StyleDictionary.buildPlatform('android');
        }
        StyleDictionary.buildPlatform('styleguide');

        console.log('\nEnd processing');

    })
})
github dcos-labs / ui-kit / packages / design-tokens / scripts / build.js View on Github external
[CONFIG, DIST_CONFIG].forEach(path => {
  const StyleDictionary = require("style-dictionary").extend(path);

  transforms.forEach(t => {
    console.info(`Registering Transform: '${t.name}'`);
    StyleDictionary.registerTransform(t);
  });

  formats.forEach(f => {
    console.info(`Registering Format: '${f.name}'`);
    StyleDictionary.registerFormat(f);
  });

  StyleDictionary.buildAllPlatforms();
});
github amzn / style-dictionary / build.js View on Github external
var fs = require('fs');
var StyleDictionary = require('style-dictionary');

var pwd = process.cwd();
var config = JSON.parse( fs.readFileSync(pwd + '/config.json') );
var sd = StyleDictionary.extend( config );

sd.buildAllPlatforms();
github Autodesk / hig / packages / theme-data / scripts / buildThemeArtifacts.js View on Github external
function createArtifactBuilder(tempFile, themeName) {
  return StyleDictionary.extend({
    source: [tempFile],
    platforms: {
      scss: {
        buildPath: buildPathByPlatform.scss,
        files: [
          {
            destination: `_${themeName}.scss`,
            format: "scss/variables"
          }
        ]
      },
      less: {
        buildPath: buildPathByPlatform.less,
        files: [
          {
            destination: `_${themeName}.less`,
github Severenit / figma-to-web / figma-to-style / main.js View on Github external
require('dotenv').config()
const fetch = require('node-fetch');
const fs = require('fs');
const StyleDictionary = require('style-dictionary').extend('./config.json');

const getStylesArtboard = require('./lib/get-styles-artboard.js');
const getSpacers = require('./lib/get-spacers.js');

const headers = new fetch.Headers();
const devToken = process.env.DEV_TOKEN;

const fileKey = process.argv[2];
const type = process.argv[4];
const spacerArg = process.argv[4];
let spacersId;
if (spacerArg.indexOf('spacers') !== -1) {
	spacersId = spacerArg.slice(spacerArg.indexOf('=')+1, spacerArg.length);
}

headers.append('X-Figma-Token', devToken);
github infor-design / design-system / scripts / node / build-tokens.js View on Github external
configs.forEach(config => {
      const configName = path.basename(config, '.config.json');

      const themeConfig = JSON.parse(fs.readFileSync(config, 'utf8'));
      themeConfig.platforms = getPlatforms(dest, configName);

      const dict = require('style-dictionary').extend(themeConfig);

      formats.forEach(f => {
        dict.registerFormat(f);
      })

      dict.buildAllPlatforms();
    });

style-dictionary

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

Apache-2.0
Latest version published 18 days ago

Package Health Score

92 / 100
Full package analysis