fix(token-cli): prefix, selector, actions

.github/workflows/tokens.yml

@@ -10,7 +10,10 @@ jobs:
       run:
         working-directory: packages/token-cli
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.base_ref }}
+
       - uses: actions/setup-node@v3
         with:
           node-version-file: '.node-version'
@@ -50,9 +53,15 @@ jobs:
 
       - name: Copy to theme package
         run: |
+          rm -rf ../theme/src/json
+          rm -rf ../theme/src/css
           cp -r ./tokens ../theme/src/json
           cp -r ./build/css ../theme/src/css
 
+      - name: Run prettier
+        working-directory: ./
+        run: yarn fmt:prettier
+
       - name: Generate github token
         id: generate_token
         uses: tibdex/github-app-token@v1
@@ -66,7 +75,7 @@ jobs:
           GITHUB_ACCESS_TOKEN: ${{ steps.generate_token.outputs.token }}
           GITHUB_REPO_OWNER: pixiv
           GITHUB_REPO_NAME: charcoal
-          GITHUB_DEFAULT_BRANCH: main
+          GITHUB_DEFAULT_BRANCH: ${{ github.ref_name }}
           TARGET_DIR: packages/theme
         run: yarn pullrequest-cli github:pr -c theme -t 'Update theme'
 

.prettierignore

@@ -15,5 +15,4 @@ LICENSE
 /packages/token-cli/build/
 /packages/token-cli/tokens/
 /packages/token-cli/out/
-/packages/theme/src/json/
 /packages/theme/src/css/

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

@@ -1,29 +1,31 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const { transformer } = require('./src/transformer')
+const { nameTransformer } = require('./src/transformer')
 
-/** @type { import('style-dictionary') } */
+/** @type { import('style-dictionary').Config } */
 module.exports = {
   source: ['tokens/base.json', 'tokens/pixiv-dark.json'],
   transform: {
-    'name/cti/kebab': {
+    'charcoal/kebab': {
       type: 'name',
-      transformer: transformer,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      transformer: nameTransformer,
     },
   },
   platforms: {
     css: {
+      transforms: ['charcoal/kebab'],
       transformGroup: 'css',
       buildPath: 'build/css/',
-      prefix: 'charcoal',
       files: [
         {
           destination: '_variables_dark.css',
           format: 'css/variables',
+          options: {
+            selector: ":root[data-color-scheme='dark']",
+            outputReferences: true,
+          },
         },
       ],
-      options: {
-        outputReferences: true,
-      },
     },
   },
 }

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

@@ -1,29 +1,32 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const { transformer } = require('./src/transformer')
+const { nameTransformer } = require('./src/transformer')
 
-/** @type { import('style-dictionary') } */
+/** @type { import('style-dictionary').Config } */
 module.exports = {
   source: ['tokens/base.json', 'tokens/pixiv-light.json'],
   transform: {
-    'name/cti/kebab': {
+    'charcoal/kebab': {
       type: 'name',
-      transformer: transformer,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      transformer: nameTransformer,
     },
   },
   platforms: {
     css: {
+      transforms: ['charcoal/kebab'],
       transformGroup: 'css',
       buildPath: 'build/css/',
-      prefix: 'charcoal',
       files: [
         {
           destination: '_variables_light.css',
           format: 'css/variables',
+          options: {
+            selector:
+              ":root[data-color-scheme='light'], :root:not([data-color-scheme])",
+            outputReferences: true,
+          },
         },
       ],
-      options: {
-        outputReferences: true,
-      },
     },
   },
 }

packages/token-cli/src/transformer/index.js

@@ -2,17 +2,19 @@
  * @param {import('style-dictionary').TransformedToken} token
  * @return {string}
  */
-const transformer = (token) => {
-  return token.path
+const nameTransformer = (token) => {
+  const name = token.path
     .join('-')
     .replace(/(.)([A-Z])/g, '$1-$2')
     .replace(/([A-Z])([A-Z])/g, '$1-$2')
     .toLowerCase()
     .replaceAll('/', '-')
     .replaceAll(' ', '-')
     .replace(/(--)(\D)/g, '-$2')
+
+  return `charcoal-${name}`
 }
 
 module.exports = {
-  transformer,
+  nameTransformer,
 }

packages/token-cli/src/transformer/index.test.js

@@ -1,22 +1,22 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const { transformer } = require('.')
+const { nameTransformer } = require('.')
 test('tests transformer real case', () => {
-  expect(transformer({ path: ['Color', 'container/secondary/defaultA'] })).toBe(
-    'color-container-secondary-default-a'
-  )
+  expect(
+    nameTransformer({ path: ['Color', 'container/secondary/defaultA'] })
+  ).toBe('color-container-secondary-default-a')
 })
 test('tests transformer negative primitive value case', () => {
-  expect(transformer({ path: ['Colors', 'Dark/Neutral/-10'] })).toBe(
+  expect(nameTransformer({ path: ['Colors', 'Dark/Neutral/-10'] })).toBe(
     'colors-dark-neutral--10'
   )
 })
 test('tests transformer negative primitive value unreal case', () => {
-  expect(transformer({ path: ['Colors', 'dark/neutralABCDEF/-10'] })).toBe(
+  expect(nameTransformer({ path: ['Colors', 'dark/neutralABCDEF/-10'] })).toBe(
     'colors-dark-neutral-a-b-c-d-e-f--10'
   )
 })
 test('tests transformer unreal case', () => {
   expect(
-    transformer({ path: ['Color', 'Container/Secondary/DefaultABCDEF'] })
+    nameTransformer({ path: ['Color', 'Container/Secondary/DefaultABCDEF'] })
   ).toBe('color-container-secondary-default-a-b-c-d-e-f')
 })