fix: use pnpm (#160)

* fix: use pnpm for plugin

* install pnpm in jobs

* use pnpm for other packages too

* update snapshots

* feat: emit es2019

* chore: use pnpm for pre-commit

* ci: install node types for e2e repo

.github/workflows/ci.yml

@@ -10,55 +10,72 @@ jobs:
     steps:
       - name: checkout
         uses: actions/checkout@v4
+      - name: install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
       - uses: actions/setup-node@v4
         with:
           node-version: 22
-      - name: restore dependencies
-        uses: bahmutov/npm-install@v1
-      - name: restore dependencies
-        uses: bahmutov/npm-install@v1
-        with:
-          working-directory: e2e
+          cache: 'pnpm'
+      - name: install plugin
+        run: pnpm install
+      - name: install e2e
+        run: pnpm install
+        working-directory: e2e
+      - name: lint plugin and e2e
+        run: pnpm run lint:all
+      # lint the e2e repos
       # e2e repos need the plugin to be built
-      - run: npm run build
-      - name: restore dependencies
-        uses: bahmutov/npm-install@v1
-        with:
-          working-directory: e2e/test_repos/repos/tailwindv3/repo
-      - run: npm run lint:all
-      - run: npm run lint
+      - run: pnpm run build
+      - name: install tailwindv3
+        run: pnpm install
+        working-directory: e2e/test_repos/repos/tailwindv3/repo
+      - name: lint tailwindv3
+        run: pnpm run lint
         working-directory: e2e/test_repos/repos/tailwindv3/repo
   type_check:
     name: type check
     runs-on: ubuntu-latest
     steps:
       - name: checkout
         uses: actions/checkout@v4
+      - name: install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
       - uses: actions/setup-node@v4
         with:
           node-version: 22
-      - name: restore dependencies
-        uses: bahmutov/npm-install@v1
+          cache: 'pnpm'
+      - name: install plugin
+        run: pnpm install
+      - name: type-check plugin
+        run: pnpm run type-check
+      # type check the e2e repos
       # e2e repos need the plugin to be built
-      - run: npm run build
-      - name: restore dependencies
-        uses: bahmutov/npm-install@v1
-        with:
-          working-directory: e2e/test_repos/repos/tailwindv3/repo
-      - run: npm run type-check
-      - run: npm run type-check
+      - run: pnpm run build
+      - name: install tailwindv3
+        run: pnpm install
+        working-directory: e2e/test_repos/repos/tailwindv3/repo
+      - name: type-check tailwindv3
+        run: pnpm run type-check
         working-directory: e2e/test_repos/repos/tailwindv3/repo
   test:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
         uses: actions/checkout@v4
+      - name: install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
       - uses: actions/setup-node@v4
         with:
           node-version: 22
-      - name: restore dependencies
-        uses: bahmutov/npm-install@v1
-      - run: npm run test
+          cache: 'pnpm'
+      - run: pnpm install
+      - run: pnpm run test
       - name: report coverage
         if: always()
         uses: davelosert/vitest-coverage-report-action@v2
@@ -67,17 +84,19 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - name: install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
       - uses: actions/setup-node@v4
         with:
           node-version: 22
-      - name: restore dependencies
-        uses: bahmutov/npm-install@v1
-      - run: npm run build
-      - name: restore e2e dependencies
-        uses: bahmutov/npm-install@v1
-        with:
-          working-directory: e2e
-      - run: npm run e2e
+          cache: 'pnpm'
+      - run: pnpm install
+      - run: pnpm run build
+      - run: pnpm install
+        working-directory: e2e
+      - run: pnpm run e2e
         working-directory: e2e
       - name: upload playwright report
         uses: actions/upload-artifact@v4

.github/workflows/release.yml

@@ -9,15 +9,18 @@ jobs:
     steps:
       - name: checkout
         uses: actions/checkout@v4
+      - name: install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
       - name: setup node
         uses: actions/setup-node@v2
         with:
           node-version: 22
           registry-url: https://registry.npmjs.org/
-      - name: restore dependencies
-        uses: bahmutov/npm-install@v1
-      - name: release
-        run: npm run release
+          cache: 'pnpm'
+      - run: pnpm install
+      - run: pnpm run release
         env:
           HUSKY: 0 # semantic-release does a push which would trigger the pre-push git hook
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.husky/pre-commit

@@ -1 +1 @@
-npx lint-staged
+pnpm lint-staged

.husky/pre-push

@@ -1 +1 @@
-npm run test:all
+pnpm run test:all

.lintstagedrc.json

@@ -1,6 +1,6 @@
 {
-  "*.@(ts|tsx|js|jsx)": ["npm run lint:js", "npm run format"],
-  "*.json": ["npm run format"],
-  "*.*rc": ["npm run format -- --parser json"],
-  "*.@(css|scss)": ["npm run lint:styles", "npm run format"]
+  "*.@(ts|tsx|js|jsx)": ["pnpm run lint:js", "pnpm run format"],
+  "*.json": ["pnpm run format"],
+  "*.*rc": ["pnpm run format --parser json"],
+  "*.@(css|scss)": ["pnpm run lint:styles", "pnpm run format"]
 }

CONTRIBUTING.md

@@ -19,7 +19,7 @@ If you are here to suggest a feature, feel free to [start a discussion](https://
 The fastest way to work on the repository is by using [Stackblitz's Codeflow](https://stackblitz.com/codeflow)
 
 1. Click the `Open in Codeflow` button on this repo's README (or go directly to [this link](https:///pr.new/RyanClementsHax/tailwindcss-themer))
-2. Run the build using `npm run watch`
+2. Run the build using `pnpm run watch`
 3. Implement your changes and tests to files in the `src/` directory and corresponding test files
 4. Use the example repos to integration test changes
 5. Document your changes in the appropriate doc page
@@ -31,35 +31,36 @@ The fastest way to work on the repository is by using [Stackblitz's Codeflow](ht
 If you prefer to not use Stackblitz for faster development, you can still do this the old fashioned way.
 
 1. Fork this repository
-2. Install dependencies by running `npm install`
-3. Run the build using `npm run watch`
-4. Implement your changes and tests to files in the `src/` directory and corresponding test files
-5. Use the example repos to integration test changes
-6. Document your changes in the appropriate doc page
-7. Git stage your required changes and commit (see below commit guidelines)
-8. Submit PR for review
+2. [Install pnpm](https://pnpm.io/installation)
+3. Install dependencies by running `pnpm install`
+4. Run the build using `pnpm run watch`
+5. Implement your changes and tests to files in the `src/` directory and corresponding test files
+6. Use the example repos to integration test changes
+7. Document your changes in the appropriate doc page
+8. Git stage your required changes and commit (see below commit guidelines)
+9. Submit PR for review
 
 ### Running examples
 
 All examples are located in the `examples` directory of this repo.
 
-1. Run `npm run watch` in the root of `tailwindcss-themer` to build the plugin and watch for any changes
+1. Run `pnpm run watch` in the root of `tailwindcss-themer` to build the plugin and watch for any changes
 2. Replace the `"tailwindcss-themer": "latest"` line in the example project's `package.json` with `"tailwindcss-themer": "file:../../"`
-3. Run`npm install` in the repo's root directory
+3. Run `npm install` in the repo's root directory (The examples use `npm` as a package manager, not `pnpm`)
 4. Run `npm run start` in the selected example's directory
 5. After making a change to the plugin, restart the example's server (i.e. rerun `npm run start`) so that it picks up the changes
 
 ### Running e2e tests
 
 For e2e testing we use [Playwright](https://playwright.dev/).
 
-1. Run `npm install` to install dependencies
-2. Run `npm run build` to build the plugin
+1. Run `pnpm install` to install dependencies
+2. Run `pnpm run build` to build the plugin
 3. Change directories to the `e2e` directory
-4. Run `npm install` to install the playwright dependencies and browsers
+4. Run `pnpm install` to install the playwright dependencies and browsers
    - This step should handle setting up playwright but if this isn't working, their [documentation](https://playwright.dev/python/docs/intro) for more help on setting up your environment
    - If you use WSL, you might find [this comment](https://github.com/microsoft/playwright/issues/13533#issuecomment-1098391029) to be helpful
-5. Run `npm run e2e` to run the playwright tests
+5. Run `pnpm run e2e` to run the playwright tests
 
 ## Commit message conventions