@spaced-out/ui-design-system/config.js

Sense UI components library

const StyleDictionary = require('style-dictionary');
const tokens = require('./design-tokens');


const customCssFormat = ({dictionary, file}) =>
  `${dictionary.allTokens
    .map((token) => `@value ${token.name}: ${token.value};\n`)
    .join(`\n`)}`;

const customJsFormat = ({dictionary, file}) =>
  `${dictionary.allTokens
    .map((token, idx) => {
      let str = `export const ${token.name} = '${token.value}';\n`;
      if (!idx) {
        const addStr = '';
        str = addStr + str;
      }
      return str;
    })
    .join(`\n`)}`;

module.exports = {
  source: ['design-tokens/**/*.json'],
  format: {
    customCssFormat,
    customJsFormat,
  },
  platforms: {
    // Web output in css partialformat
    'css/category': {
      transforms: ['attribute/cti', 'name/cti/camel'],
      buildPath: `src/styles/variables/`,
      files: tokens.map((tokenCategory) => ({
        destination: `_${tokenCategory}.css`,
        format: `customCssFormat`,
        filter: {
          attributes: {
            category: tokenCategory,
          },
        },
      })),
    },
    'css/global': {
      transforms: ['attribute/cti', 'name/cti/camel'],
      buildPath: `src/styles/`,
      files: [
        {
          destination: `index.css`,
          format: `customCssFormat`,
          filter: ({attributes}) => !attributes.category.includes('base'),
        },
      ],
    },
    'js/category': {
      transforms: ['attribute/cti', 'name/cti/camel'],
      transformGroup: 'js',
      buildPath: `src/styles/variables/`,
      files: tokens.map((tokenCategory) => ({
        destination: `_${tokenCategory}.ts`,
        format: `customJsFormat`,
        filter: {
          attributes: {
            category: tokenCategory,
          },
        },
      })),
    },
    'js/global': {
      transforms: ['attribute/cti', 'name/cti/camel'],
      transformGroup: 'js',
      buildPath: `src/styles/`,
      files: [
        {
          destination: `index.ts`,
          format: `customJsFormat`,
          filter: ({attributes}) => !attributes.category.includes('base'),
        },
      ],
    },
  },
};