feat(style-dictionary): upgrade to v4 and esm [KHCP-12846] (#332)

* feat(style-dictionary): upgrade to v4 and esm

* refactor: stylelint plugin

* feat: switch to pnpm

* fix: ci command

* docs: change yarn to pnpm

* chore: config options

* feat: add type

* fix: exports

.github/CODEOWNERS

@@ -4,4 +4,4 @@
 # Allow Kongponents BOT to approve renovate updates
 # These rules MUST remain at the bottom as the last entry
 package.json @kongponents-bot @adamdehaven @jillztom @portikM
-yarn.lock @kongponents-bot @adamdehaven @jillztom @portikM
+pnpm-lock.yaml @kongponents-bot @Kong/team-core-ui

.github/actions/setup-pnpm-with-dependencies/action.yaml

@@ -0,0 +1,60 @@
+name: Setup PNPM with Dependencies
+description: Reusable composition of setup-node, cache, and pnpm install actions
+inputs:
+  nodejs-version:
+    description: 'Version of NodeJS to use (ex: 20.16.0)'
+    default: '20.16.0'
+  force-install:
+    description: When 'true', pnpm install will be executed regardless of a cache hit
+    required: false
+    default: 'false'
+  frozen-lockfile:
+    description: When false, pnpm install will use the --no-frozen-lockfile flag
+    required: false
+    default: 'true'
+outputs:
+  cache-hit:
+    description: Whether or not there was a cache hit
+    value: ${{ steps.dependency-cache.outputs.cache-hit }}
+runs:
+  using: composite
+  steps:
+
+    - name: get Node version
+      id: node-version
+      shell: bash
+      run: |
+        voltaNodeVersion=$(cat package.json|jq -r ".volta.node")
+        if [[ $voltaNodeVersion == null ]]; then
+          voltaNodeVersion="${{ inputs.nodejs-version }}"
+        fi
+        voltaPnpmVersion=$(cat package.json|jq -r ".volta.pnpm")
+        if [[ $voltaPnpmVersion == null ]]; then
+          voltaPnpmVersion="9.3.0"
+        fi
+
+        echo "node-version=${voltaNodeVersion}">> $GITHUB_OUTPUT
+        echo "pnpm-version=${voltaPnpmVersion}">> $GITHUB_OUTPUT
+
+    - name: Setup Node
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ steps.node-version.outputs.node-version }}
+
+    - name: Install PNPM
+      shell: bash
+      run: |
+        npm i -g pnpm@${{ steps.node-version.outputs.pnpm-version }}
+        pnpm --version
+
+    - name: Dependency Cache
+      id: dependency-cache
+      uses: actions/cache@v4
+      with:
+        path: '**/node_modules'
+        key: pnpm-${{ steps.node-version.outputs.pnpm-version }}-${{ steps.node-version.outputs.node-version }}-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+    - name: Install Dependencies
+      if: ${{ inputs.force-install == 'true' || steps.dependency-cache.outputs.cache-hit != 'true' }}
+      shell: bash
+      run: pnpm i${{ inputs.frozen-lockfile == 'false' && ' --no-frozen-lockfile' || '' }}

.github/workflows/publish.yaml

@@ -24,16 +24,11 @@ jobs:
         with:
           token: ${{ secrets.KONGPONENTS_BOT_PAT }}
 
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
+      - name: Setup PNPM with Dependencies
+        uses: ./.github/actions/setup-pnpm-with-dependencies/
 
       - name: Build
-        run: yarn build
+        run: pnpm build
 
       - name: Semantic Release
         uses: cycjimmy/semantic-release-action@v4

.github/workflows/test.yaml

@@ -34,19 +34,16 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Use Node.js
-        uses: actions/setup-node@v4
+      - name: Setup PNPM with Dependencies
+        uses: ./.github/actions/setup-pnpm-with-dependencies/
         with:
-          node-version-file: '.nvmrc'
-
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
+          force-install: true
 
       - name: Lint
-        run: yarn lint
+        run: pnpm lint
 
       - name: Build style dictionary
-        run: yarn build
+        run: pnpm build
 
       - name: Publish package preview
         id: package-preview
@@ -64,7 +61,7 @@ jobs:
 
           echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > .npmrc
 
-          yarn version --prerelease --preid ${preid} --allow-branch ${{ github.head_ref }} --no-git-tag-version --yes --amend
+          pnpm version prerelease --preid ${preid} --no-git-tag-version --yes --amend
 
           package_version=$(jq -r ".version" package.json)
           package=@kong/design-tokens@"${package_version}"

.npmrc

@@ -0,0 +1,4 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
+auto-install-peers=true
+side-effects-cache=false # Ensure the postinstall script of the lefthook package is executed and hooks are installed

README.md

@@ -160,7 +160,7 @@ The package also exports a JSON file of all tokens from `@kong/design-tokens/tok
 In your host project, install the package **only** as a `devDependency`:
 
 ```shell
-yarn add -D @kong/design-tokens
+pnpm add -D @kong/design-tokens
 ```
 
 #### Why a `devDependency`?
@@ -294,7 +294,7 @@ export default defineConfig({
 To get started, install the package dependencies
 
 ```sh
-yarn install --frozen-lockfile
+pnpm install
 ```
 
 ### Token Requirements
@@ -357,7 +357,7 @@ This repository includes a Vue sandbox (see the `/sandbox` directory) to allow y
 To start the sandbox:
 
 ```sh
-yarn sandbox
+pnpm sandbox
 ```
 
 This command will simultaneously start the Vite dev server and initialize a watcher on the `/tokens` directory. If any files in the `/tokens` directory are modified, the sandbox will automatically run the build command to update the tokens and then restart the Vite dev server (simulating hot module reload).
@@ -370,18 +370,18 @@ Lint package files, and optionally auto-fix detected issues.
 
 ```sh
 # Lint only
-yarn lint
+pnpm lint
 
 # Lint and fix
-yarn lint:fix
+pnpm lint:fix
 ```
 
 ### Build for production
 
 Utilize the `style-dictionary` CLI to build the token assets for production based on the configuration in `/config.js`.
 
 ```sh
-yarn build
+pnpm build
 ```
 
 If additional sub-directories (other than `dist/tokens`) are added to the `dist/` directory in `/config.js`, you will also need to create a new corresponding entry in the `package.json > exports` section to allow for importing into the host project without `dist/` in the path.
@@ -401,8 +401,8 @@ For example, if I want to add a new `my-feature` folder, I'd update the `exports
 1. Ensure you are on the `main` branch, then pull down the latest code by running `git checkout main && git pull origin main`
 2. Checkout a new branch for your changes with `git checkout -b {type}/{jira-ticket}-{description}` - as an example, `git checkout feat/khcp-1234-add-color-tokens`
 3. Add/edit the tokens in the `/tokens` directory as needed, ensuring to adhere to the [Token Requirements](#token-requirements)
-4. Before committing your changes, locally run `yarn lint` to ensure you do not have any linting errors. If you have errors, you can try running `yarn lint:fix` to resolve
-5. Commit your changes, adhering to [Conventional Commits](#committing-changes). To make this easier, you're encouraged to run `yarn commit` to help build your commit message
+4. Before committing your changes, locally run `pnpm lint` to ensure you do not have any linting errors. If you have errors, you can try running `pnpm lint:fix` to resolve
+5. Commit your changes, adhering to [Conventional Commits](#committing-changes). To make this easier, you're encouraged to run `pnpm commit` to help build your commit message
 6. Push your branch up to the remote with `git push origin {branch-name}`
 7. Open a pull request and request a review
 
@@ -417,7 +417,7 @@ This repo uses [Conventional Commits](https://www.conventionalcommits.org/en/v1.
 It is **highly recommended** to use the following command in order to create your commits:
 
 ```sh
-yarn commit
+pnpm commit
 ```
 
 This will trigger the Commitizen interactive prompt for building your commit message.