feat: add style-dictionary-plugins

packages/style-dictionary-plugins/package.json

@@ -3,14 +3,18 @@
     "type": "module",
     "private": true,
     "scripts": {
-        "build": "FORCE_COLOR=1 tsup-node",
+        "build": "run-p --print-label 'build:*'",
+        "build:bundle": "FORCE_COLOR=1 tsup-node",
+        "build:dts": "tsc --project tsconfig.build.json --pretty --emitDeclarationOnly",
         "typecheck": "tsc --project tsconfig.build.json --pretty --noEmit"
     },
     "devDependencies": {
+        "npm-run-all": "^4.1.5",
+        "style-dictionary": "^4.2.0",
         "tsup": "^8.3.5",
         "typescript": "^5.7.2"
     },
-    "dependencies": {
+    "peerDependencies": {
         "style-dictionary": "^4.2.0"
     },
     "main": "./dist/index.js",

packages/style-dictionary-plugins/src/format/index.ts

@@ -1,19 +1,40 @@
-import { Formatter, formatHelpers } from 'style-dictionary/types'
+import { fileHeader, formattedVariables } from 'style-dictionary/utils'
+import type {
+  FormatFnArguments,
+  Config,
+  LocalOptions,
+} from 'style-dictionary/types'
+import StyleDictionary from 'style-dictionary'
 
-export const variables: Formatter = ({ dictionary, options = {}, file }) => {
-  const selector =
-    typeof options.selector == 'string' && options.selector
-      ? options.selector
-      : `:root`
+/** style-dictionaryのtypesがany多用しててつらい */
+export const charcoalVariables = ({
+  dictionary,
+  options = {},
+  file,
+}: Omit<FormatFnArguments, 'options'> & {
+  options: Config &
+    LocalOptions & {
+      selector?: string
+    }
+}) => {
+  const selector = options.selector ?? `:root`
   const { outputReferences } = options
   return (
-    formatHelpers.fileHeader({ file }) +
+    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands, @typescript-eslint/no-base-to-string
+    fileHeader({ file }) +
     `${selector} {\n` +
-    formatHelpers.formattedVariables({
+    formattedVariables({
       format: 'css',
       dictionary,
       outputReferences,
     }) +
     `\n}\n`
   )
 }
+
+export const registerCharcoalFormats = () => {
+  StyleDictionary.registerFormat({
+    name: 'css/charcoal-variables',
+    format: charcoalVariables,
+  })
+}

packages/style-dictionary-plugins/src/index.ts

@@ -1,4 +1,4 @@
-import * as formats from './format'
-import * as transforms from './transform'
+import * as formats from './format/index.js'
+import * as transforms from './transform/index.js'
 
 export { formats, transforms }

packages/style-dictionary-plugins/src/transform/index.ts

@@ -1,3 +1,4 @@
+import StyleDictionary from 'style-dictionary'
 import type { TransformedToken } from 'style-dictionary/types'
 export const nameTransformer = (token: TransformedToken): string => {
   const name = token.path
@@ -10,3 +11,11 @@ export const nameTransformer = (token: TransformedToken): string => {
     .replace(/(--)(\D)/g, '-$2')
   return `charcoal-${name}`
 }
+
+export const registerCharcoalTransforms = () => {
+  StyleDictionary.registerTransform({
+    name: 'charcoal/kebab',
+    type: 'name',
+    transform: nameTransformer,
+  })
+}

packages/style-dictionary-plugins/tsconfig.build.json

@@ -1,10 +1,11 @@
 {
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
-    "types": ["node", "style-dictionary/types"],
     "incremental": true,
     "outDir": "./dist",
-    "tsBuildInfoFile": "./.tsbuildinfo"
+    "tsBuildInfoFile": "./.tsbuildinfo",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext"
   },
   "include": ["./src"]
 }

packages/style-dictionary-plugins/tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": ["./src"]
+  "include": ["./src"],
+  "compilerOptions": {
+    "moduleResolution": "nodenext"
+  }
 }

packages/style-dictionary-plugins/tsup.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'tsup'
 
 export default defineConfig({
   entry: ['src/index.ts'],
-  target: 'node16',
+  target: 'esnext',
   sourcemap: true,
   format: ['cjs', 'esm'],
 })

yarn.lock

@@ -2192,9 +2192,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@charcoal-ui/style-dictionary-plugins@workspace:packages/style-dictionary-plugins"
   dependencies:
+    npm-run-all: ^4.1.5
     style-dictionary: ^4.2.0
     tsup: ^8.3.5
     typescript: ^5.7.2
+  peerDependencies:
+    style-dictionary: ^4.2.0
   languageName: unknown
   linkType: soft