sd.config.js

import StyleDictionary from 'style-dictionary'

// Generate meta data for token categorizing tree
StyleDictionary.registerTransform({
  type: `attribute`,
  name: `attribute/nova`,
  transform: (token) => {
    const attrNames = ['datatype', 'category', 'type', 'theme', 'subitem', 'state']
    const originalAttrs = token.attributes || {}
    /** @type {Record<string, string>} */
    const generatedAttrs = {}

    for (let i = 0; i < token.path.length && i < attrNames.length; i++) {
      generatedAttrs[attrNames[i]] = token.path[i]
    }
    return Object.assign(generatedAttrs, originalAttrs)
  },
})
// Transform values with spaces to dashed, strip base path from token name resulting in just the token name
StyleDictionary.registerTransform({
  type: 'name',
  name: `name/nova`,
  transform: function (token, config) {
    if (token.attributes.category == 'components') {
      let fullPath = token.path.join('-')
      let pathChange = fullPath.split(`${token.attributes.theme}-`)[1]
      return pathChange.replaceAll(' ', '-').toLowerCase()
    }
    else {
      return token.path.join('-').replaceAll(' ', '-').toLowerCase()
    }
  },
})
StyleDictionary.registerTransform({
  name: 'typography/fontFamily-wrap-quotes',
  type: 'value',
  filter: function (token) {
    return token.$type === 'typography'
  },
  transform: function (token) {
    const typography = token.$value
    typography.fontFamily = `"${typography.fontFamily}"`
    return typography
  },
})
StyleDictionary.registerFormat({
  name: 'css/custom',
  format: (dictionary, config) => {
    const now = new Date()
    const formattedDateTime = now.toLocaleString('en-US', {
      month: '2-digit',
      day: '2-digit',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false,
    }).replace(',', '')
    let line1 = '/***********************************************'
    let line2 = `* THIS FILE IS AUTO GENERATED ON ${formattedDateTime}`
    let line3 = '* DO NOT EDIT THIS FILE'
    let line4 = '***********************************************/'
    let themeStyles = `${line1}\n${line2}\n${line3}\n${line4}\n\n`
    // COLORS

    // TYPOGRAPHY
    themeStyles += '/*--- TYPOGRAPHY ---*/'
    for (const typography in dictionary.tokens.tokens.rte) {
      // if (typography === '$type') continue // Skip the top-level $type key

      const typographyToken = dictionary.tokens.tokens.rte[typography].original.$value
      const className = `\n.${typography.replaceAll(' ', '-').replaceAll('/', '-').toLowerCase()}`

      // Retrieve properties with fallbacks for defaults
      const fontFamily = typographyToken.fontFamily ? `'${typographyToken.fontFamily}'` : 'inherit'
      const fontSize = typographyToken.fontSize || 'inherit'
      const fontWeight = typographyToken.fontWeight ? typographyToken.fontWeight : 400
      const lineHeight = typographyToken.lineHeight || 'normal'
      const letterSpacing = typographyToken.letterSpacing?.$value || 'normal'
      const textTransform = typographyToken.textCase?.$value || 'none'

      // Create the CSS rule with 2-space indentation
      const typographyStyles = `
            font-family: ${fontFamily};
            font-size: ${fontSize};
            font-weight: ${fontWeight};
            line-height: ${lineHeight};
            letter-spacing: ${letterSpacing};
            text-transform: ${textTransform};
          `

      themeStyles += `${className} {${typographyStyles}}`
    }

    // COMPONENTS
    for (const component in dictionary.tokens.tokens.components) {
      const componentObject = dictionary.tokens.tokens.components[component]
      const selectorBase = `cmp-${component}`
      themeStyles += `\n\n\n/*--- ${component.toUpperCase()} ---*/\n`
      for (const theme in componentObject) {
        if (theme !== '$extensions') {
          const themeSelector = `.${selectorBase}.${theme.replaceAll(' ', '-').toLowerCase()}`

          const componentVariables = Object.keys(componentObject[theme])
            .filter(prop => componentObject[theme][prop] !== '')
            .map(prop => `  --${component}-${componentObject[theme][prop].name}: ${componentObject[theme][prop].$value};`)
            .join('\n')
          themeStyles = `${themeStyles}\n${themeSelector} {\n${componentVariables}\n}`
        }
      }
    }

    // Return the CSS with the custom selector
    return themeStyles
  },
})
// Export the configuration as the default export for ESM
export default {
  source: ['tokens/tokens.json'],
  platforms: {
    css: {
      // transformGroup: 'css',
      transforms: [
        'attribute/nova',
        'name/nova',
        'typography/fontFamily-wrap-quotes',
        'typography/css/shorthand',
        'border/css/shorthand',
        'shadow/css/shorthand',
      ],
      buildPath: 'build/css/',
      files: [{

        destination: 'variables.css',
        format: 'css/custom', // Custom format name
        options: {
          outputReferences: true, // Optional to enable token references
        },
      }],
    },
  },
}