feat(token-cli): custom formatter

.github/workflows/tokens.yml

@@ -1,4 +1,4 @@
-name: tokens
+name: Generate CSS variables
 
 on:
   schedule:
@@ -51,5 +51,5 @@ jobs:
 
       - name: Generate CSS variables
         run: |
-          yarn style-dictionary build -c pixiv-light.config.json
-          yarn style-dictionary build -c pixiv-dark.config.json
+          yarn style-dictionary build -c pixiv-light.config.js
+          yarn style-dictionary build -c pixiv-dark.config.js

packages/token-cli/README.md

@@ -1,35 +1,42 @@
 # `@charcoal-ui/token-cli`
+
 CLI for Fetching Figma Variables and transforming Design Tokens as CSS variables.
 
 ## Install
+
 ### npm
+
 ```
 npm i --save-dev @charcoal-ui/token-cli
 ```
 
 ### yarn
+
 ```
 yarn add -D @charcoal-ui/token-cli
 ```
 
 ## Usage
+
 ### Fetch Figma Variables
+
 ```
 FIGMA_TOKEN=xxxx FIGMA_NODE_ID=xxxx yarn token-cli fetch -o ./path/to/fetched_figma_variables.json
 ```
 
-| param name | required | description |
-| --- | --- | --- |
-| -o, --output | :check: | Output file name (ex: `./out/raw_variables.json`) |
+| param name   | required | description                                       |
+| ------------ | -------- | ------------------------------------------------- |
+| -o, --output | :check:  | Output file name (ex: `./out/raw_variables.json`) |
 
 ### Transform to Design Token json file
+
 ```
 yarn token-cli transform --source ./path/to/fetched_figma_variables.json --output ./path/to/design_token.json
 ```
 
-| param name | required | description |
-| --- | --- | --- |
-| --source | true | source file path |
-| --output, -o | true | output file path |
-| --mode-name | false | figma variable mode name (ex: `--mode-name "pixiv/dark"`)|
-| --variable-collection-names | false | target variable collection names (ex: `--variable-collection-names Color Space "Border radius"`)|
+| param name                  | required | description                                                                                      |
+| --------------------------- | -------- | ------------------------------------------------------------------------------------------------ |
+| --source                    | true     | source file path                                                                                 |
+| --output, -o                | true     | output file path                                                                                 |
+| --mode-name                 | false    | figma variable mode name (ex: `--mode-name "pixiv/dark"`)                                        |
+| --variable-collection-names | false    | target variable collection names (ex: `--variable-collection-names Color Space "Border radius"`) |

packages/token-cli/pixiv-dark.config.js

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+module.exports = {
+  source: ['tokens/base.json', 'tokens/pixiv-light.json'],
+  transform: {
+    'name/cti/kebab': {
+      type: 'name',
+      transformer: (token) => {
+        return token.path
+          .join('-')
+          .toLowerCase()
+          .replaceAll('/', '-')
+          .replaceAll(' ', '-')
+      },
+    },
+  },
+  platforms: {
+    css: {
+      transformGroup: 'css',
+      buildPath: 'build/css/',
+      prefix: 'charcoal',
+      files: [
+        {
+          destination: '_variables_dark.css',
+          format: 'css/variables',
+        },
+      ],
+      options: {
+        outputReferences: true,
+      },
+    },
+  },
+}

packages/token-cli/pixiv-light.config.js

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+module.exports = {
+  source: ['tokens/base.json', 'tokens/pixiv-light.json'],
+  transform: {
+    'name/cti/kebab': {
+      type: 'name',
+      transformer: (token) => {
+        return token.path
+          .join('-')
+          .toLowerCase()
+          .replaceAll('/', '-')
+          .replaceAll(' ', '-')
+      },
+    },
+  },
+  platforms: {
+    css: {
+      transformGroup: 'css',
+      buildPath: 'build/css/',
+      prefix: 'charcoal',
+      files: [
+        {
+          destination: '_variables_light.css',
+          format: 'css/variables',
+        },
+      ],
+      options: {
+        outputReferences: true,
+      },
+    },
+  },
+}