@planningcenter/tapestry-tokens 0.0.1 → 3.0.0-rc.27

package/src/style-dictionary.build.js

@@ -1,367 +0,0 @@
-import * as ChangeCase from "change-case"
-import fs from "fs"
-import StyleDictionary from "style-dictionary"
-import {
-  fileHeader,
-  getReferences,
-  usesReferences,
-} from "style-dictionary/utils"
-import Color from "tinycolor2"
-
-import componentNames from "./componentNames.js"
-import { default as config } from "./style-dictionary.config.js"
-
-const prefix = config.platforms.css.prefix
-
-const deprecatedTokensRegex = /(\[DEPRECATED\]|🚫)/
-
-// Define the array of extra token extensions patterns
-const extraTokenExtensions = [/\d+\s?-\s?base$/, /\d+\s?-\s?white$/]
-
-// Rename component tokens by re-ordering the path array
-// e.g. [1, 2, 3, 4] => [1, 4, 2, 3]
-//      [collection, group, group, token] => [collection, token, group, group]
-function reorderedNameKebab(path) {
-  return reorderedName(path).join("-")
-}
-
-function reorderedName(path) {
-  const newPath = []
-  const length = path.length
-
-  newPath.push(path[0], path[length - 1])
-  for (let i = 1; i < length - 1; i++) {
-    newPath.push(path[i])
-  }
-  return newPath
-}
-
-function trimExtraTokenExtensions(name) {
-  extraTokenExtensions.forEach((pattern) => {
-    name = name.replace(pattern, (match) =>
-      match.split("-").slice(0, -1).join("-")
-    )
-  })
-  return name
-}
-
-function normalizeName(token, options) {
-  let { filePath, path } = token
-  // Remove the collection at the front for alias tokens
-  // e.g. color, numeric
-  if (filePath.includes("alias")) {
-    path = path.slice(1, path.length)
-  }
-  const orderedPath = isComponentDefinition(token) ? reorderedName(path) : path
-  orderedPath[orderedPath.length - 1] = trimExtraTokenExtensions(
-    orderedPath[orderedPath.length - 1]
-  )
-
-  return [options.prefix].concat(orderedPath).join(" ")
-}
-
-function isComponentDefinition({ filePath, path }) {
-  return filePath.includes("components") && path.length > 2
-}
-
-console.log("Build started...")
-console.log("\n==============================================")
-
-// REGISTER CUSTOM FORMATS
-StyleDictionary.registerFormat({
-  format: async function ({ dictionary, file, options }) {
-    let lastComponentSelector
-    const { outputReferences } = options
-
-    const variables = dictionary.allTokens
-      .map((token) => {
-        let { name, path } = token
-        const topPath = path[0]
-        let value = token.$value
-        const originalValue = token.original.$value
-        let returnValue = ""
-
-        if (file.destination.includes("components") && path.length > 2) {
-          name = `${prefix}-${reorderedNameKebab(path)}`
-        }
-
-        name = trimExtraTokenExtensions(name).replaceAll("-deprecated", "")
-
-        const shouldOutputRefs =
-          usesReferences(originalValue) &&
-          (typeof outputReferences === "function"
-            ? outputReferences(token, { dictionary })
-            : outputReferences)
-
-        // Output alias token if value has a reference
-        if (
-          shouldOutputRefs &&
-          usesReferences(originalValue, dictionary.tokens)
-        ) {
-          const refs = getReferences(originalValue, dictionary.unfilteredTokens)
-          refs.forEach((ref) => {
-            if (typeof value !== "string") {
-              value = value.toString()
-            }
-            value = value.replace(ref.$value, function () {
-              let refName = ref.name
-              if (ref.filePath.includes("components") && ref.path.length > 2) {
-                refName = `${prefix}-${reorderedNameKebab(ref.path)}`
-              }
-              refName = trimExtraTokenExtensions(refName)
-              return `var(--${refName})`
-            })
-          })
-        }
-
-        returnValue = `  --${name}: ${value};`
-
-        // Wrap/scope component-specific tokens with parent class
-        if (
-          file.destination.includes("components") &&
-          lastComponentSelector !== topPath
-        ) {
-          const selector =
-            topPath.charAt(0) === "_" ? ":root" : `.${prefix}-${topPath}`
-
-          returnValue = `${selector} {\n${returnValue}`
-          if (lastComponentSelector) {
-            returnValue = `}\n${returnValue}`
-          }
-          lastComponentSelector = topPath
-        }
-
-        return returnValue
-      })
-
-      .join(`\n`)
-
-    let filePrepend = ":root {\n"
-    if (file.destination.includes("components")) {
-      filePrepend = ""
-    }
-
-    return (await fileHeader({ file })) + filePrepend + variables + "\n}\n"
-  },
-  name: "css/variables-custom",
-})
-
-const CORRECTLY_ORDERED = ["color", "numeric"]
-
-StyleDictionary.registerFormat({
-  format: async function ({ dictionary, options }) {
-    const formattedTokens = Object.keys(dictionary.tokens).reduce(
-      (acc, token) => {
-        if (token === "color-primitive") return acc // Skip color-primitive
-        return {
-          ...acc,
-          [token]: buildDefinitions(dictionary.tokens[token], {
-            ...options,
-            reorderName: !CORRECTLY_ORDERED.includes(token),
-          }),
-        }
-      },
-      {}
-    )
-
-    return JSON.stringify(formattedTokens, null, 2)
-  },
-  name: "json/docs-custom",
-})
-
-function buildDefinitions(data, options) {
-  const prefix = options.platforms.css.prefix
-  return Object.values(data).reduce((acc, obj) => {
-    if (obj.$type) {
-      const key = options.reorderName
-        ? `--${prefix}-${reorderedNameKebab(obj.path)}`
-        : `--${obj.name}`
-      return {
-        ...acc,
-        [key]: {
-          type: obj.$type,
-          value: formatVar(obj.original.$value, { prefix }) || obj.$value,
-        },
-      }
-    }
-    return {
-      ...acc,
-      ...buildDefinitions(obj, options),
-    }
-  }, {})
-}
-
-function formatVar(str, { prefix }) {
-  if (typeof str !== "string" || !str || str.startsWith("#")) return
-  const strElements = str.replace(/{|}/g, "").split(".")
-  const group = strElements[0]
-  if (group === "color-primitive") return // we don't reference primitives
-
-  return `var(--${prefix}-${strElements.slice(1).join("-")})`
-}
-
-StyleDictionary.registerFormat({
-  format: async function ({ dictionary, options, file }) {
-    const { formatting } = options
-    const header = await fileHeader({ file, formatting, options })
-    const content = [
-      header,
-      "export const tokens = {",
-      dictionary.allTokens
-        .map((token) => {
-          const value = options.usesDtcg ? token.$value : token.value
-          return `  "${token.name}": "${value}" as const`
-        })
-        .join(",\n"),
-      "}\n",
-    ]
-      .flat()
-      .join("\n")
-    return content
-  },
-  name: "ts/flat-object",
-})
-
-// REGISTER CUSTOM TRANSFORMS
-StyleDictionary.registerTransform({
-  name: "name/kebab-custom",
-  transform: function (token, options) {
-    // Remove the collection at the front for alias tokens
-    // e.g. color, numeric
-    let { filePath, path } = token
-    if (filePath.includes("alias")) {
-      path = path.slice(1, path.length)
-    }
-
-    return ChangeCase.kebabCase([options.prefix].concat(path).join(" "))
-  },
-  type: "name",
-})
-
-// This transform handles:
-// - Re-ordering the path for component tokens
-// - Removing the unwanted suffixes from the token name
-// - Formats as kebab-case
-StyleDictionary.registerTransform({
-  name: "name/kebab-complete",
-  transform(token, options) {
-    const orderedName = normalizeName(token, options)
-    const kebabName = ChangeCase.kebabCase(orderedName, {
-      mergeAmbiguousCharacters: true,
-    })
-    return `--${kebabName}`
-  },
-  type: "name",
-})
-
-StyleDictionary.registerTransform({
-  filter: function (token) {
-    return (
-      (token.attributes.category === "size" ||
-        token.$type === "dimension" ||
-        token.$type === "number") &&
-      !token.name.includes("weight")
-    )
-  },
-  name: "size/px-custom",
-  transform: function (token) {
-    return `${token.$value}px`
-  },
-  type: "value",
-})
-
-StyleDictionary.registerTransform({
-  filter: function (token) {
-    return token.attributes.category === "color" || token.$type === "color"
-  },
-  name: "color/hsl-custom",
-  transform: function (token) {
-    return Color(token.$value).toHslString()
-  },
-  type: "value",
-})
-
-// REGISTER CUSTOM FILTERS
-StyleDictionary.registerFilter({
-  filter: function (token) {
-    return (
-      token.filePath.includes("alias") &&
-      !token.path.join(" ").match(deprecatedTokensRegex)
-    )
-  },
-  name: "onlyAlias",
-})
-
-StyleDictionary.registerFilter({
-  filter: function (token) {
-    return (
-      token.filePath.includes("alias") &&
-      token.path.join(" ").match(deprecatedTokensRegex)
-    )
-  },
-  name: "onlyAliasDeprecated",
-})
-
-StyleDictionary.registerFilter({
-  filter: function (token) {
-    return token.filePath.includes("alias")
-  },
-  name: "allAlias",
-})
-
-StyleDictionary.registerFilter({
-  filter: function (token) {
-    return token.filePath.includes("components")
-  },
-  name: "onlyComponents",
-})
-
-StyleDictionary.registerFilter({
-  filter: function (token) {
-    return !token.path.join(" ").match(deprecatedTokensRegex)
-  },
-  name: "docsNoDeprecated",
-})
-
-StyleDictionary.registerFilter({
-  filter: function (token) {
-    return token.path.join(" ").match(deprecatedTokensRegex)
-  },
-  name: "docsOnlyDeprecated",
-})
-
-componentNames.forEach((component) => {
-  StyleDictionary.registerFilter({
-    filter: function (token) {
-      return (
-        token.filePath.includes("components") &&
-        token.attributes.category === component
-      )
-    },
-    name: `component:${component}`,
-  })
-})
-
-// REGISTER CUSTOM ACTIONS
-StyleDictionary.registerAction({
-  do: function () {
-    const file = "./src/js/tokens-deprecated.json"
-
-    if (!fs.existsSync(file)) {
-      fs.writeFileSync(file, "{}")
-    }
-  },
-  name: "docs/create-empty-files",
-})
-
-// APPLY THE CONFIGURATION
-// IMPORTANT: the registration of custom transforms
-// needs to be done _before_ applying the configuration
-const sd = new StyleDictionary("./src/style-dictionary.config.js")
-await sd.hasInitialized
-
-// FINALLY, BUILD ALL THE PLATFORMS
-await sd.buildAllPlatforms()
-
-console.log("\n==============================================")
-console.log("\nBuild completed!")

package/src/style-dictionary.config.js

@@ -1,67 +0,0 @@
-import componentNames from "./componentNames.js"
-
-export default {
-  platforms: {
-    css: {
-      actions: ["docs/create-empty-files"],
-      buildPath: "src/",
-      files: [
-        {
-          destination: "css/tokens-alias.css",
-          filter: "onlyAlias",
-          format: "css/variables-custom",
-        },
-        {
-          destination: "css/tokens-alias-deprecated.css",
-          filter: "onlyAliasDeprecated",
-          format: "css/variables-custom",
-        },
-        {
-          destination: "js/tokens.json",
-          filter: "docsNoDeprecated",
-          format: "json/docs-custom",
-        },
-        {
-          destination: "js/tokens-deprecated.json",
-          filter: "docsOnlyDeprecated",
-          format: "json/docs-custom",
-        },
-        ...componentNames.map((component) => ({
-          destination: `css/components/${component}.css`,
-          filter: `component:${component}`,
-          format: "css/variables-custom",
-          options: { outputReferences: true },
-        })),
-      ],
-      prefix: "t",
-      transforms: [
-        "attribute/cti",
-        "name/kebab-custom",
-        "size/px-custom",
-        "color/hsl-custom",
-      ],
-    },
-    js: {
-      buildPath: "src/",
-      files: [
-        {
-          destination: "ts/tokens.ts",
-          filter: "allAlias",
-          format: "ts/flat-object",
-        },
-      ],
-      prefix: "t",
-      transforms: [
-        "attribute/cti",
-        "name/kebab-complete",
-        "size/px-custom",
-        "color/hsl-custom",
-      ],
-    },
-  },
-  source: [
-    "src/json/primitives.json",
-    "src/json/alias.json",
-    "src/json/components.json",
-  ],
-}