Import Tailwind tokens

gistfile1.txt

// Run this script in your directory containing tailwind.config.js, and follow the printed instructions to import them into your project.

const defaultTheme = require('tailwindcss/defaultTheme')
const colors = require('tailwindcss/colors')
const config = require('./tailwind.config')

const extended = {
  spacing: Object.assign({}, defaultTheme.spacing, config.theme.extend.spacing),
  fontFamily: Object.assign({}, defaultTheme.fontFamily, config.theme.extend.fontFamily),
  colors: Object.assign({}, defaultTheme.colors, config.theme.extend.colors),
}

// console.log(extended)

const normalized = {
  spacing: extended.spacing,
  fontFamily: Object.fromEntries(
    Object.entries(extended.fontFamily).map(([key, value]) => [key, value[0]])
  ),
  colors: Object.fromEntries(
    Object.entries(extended.colors).flatMap(([key, value]) =>
      typeof value === 'string'
        ? [[key, value]]
        : Object.entries(value).map(([key2, value2]) => [`${key}-${key2}`, value2])
    )
  ),
}

// console.log(normalized)

console.log(`
0. open your project in Plasmic Studio
1. open chrome devtools
2. use the top/left most button (the mouse selector) to inspect an element in the studio, such as the logo - this sets the focus on the correct iframe (rather than the outermost iframe)
3. switch to the console tab
4. paste the included snippet to populate the tokens

{
const normalized = ${JSON.stringify(normalized, null, 2)}

const tokenTypes = {
  colors: 'Color',
  spacing: 'Spacing',
  fontFamily: 'FontFamily',
}

for (const [key, entry] of Object.entries(normalized)) {
  const tokenType = tokenTypes[key]

  const inputs = entry

  const _ = dbg.deps._

  const baseStyles = Object.entries(inputs).filter(([k, v]) => !v.startsWith('var('))
  const secondaryStyles = Object.entries(inputs).filter(([k, v]) => v.startsWith('var('))

  function normalize(text) {
    return text
  }

  const { studioCtx } = dbg
  studioCtx.changeUnsafe(() => {
    for (const [key, value] of [...baseStyles, ...secondaryStyles]) {
      const match = /var\((.+)\)/.exec(value)
      let definition = value
      if (match) {
        const name = match[1]
        const referenced = studioCtx.site.styleTokens.find(
          (token) => token.name === normalize(name)
        )
        definition = \`var(--token-\${referenced.uuid})\`
      }
      console.log({
        tokenType,
        name: normalize(key),
        value: definition,
      })
      studioCtx.tplMgr().addToken({
        tokenType,
        name: normalize(key),
        value: definition,
      })
    }
  })
}

}
`)