Adopt PNPM (#492)

Co-authored-by: Matt Jones <mattjones701@gmail.com>

.changeset/config.json

@@ -15,6 +15,7 @@
   "ignore": [
     "@fixtures/*",
     "test-helpers",
+    "tests",
     "vanilla-extract-example-next",
     "vanilla-extract-example-webpack-react"
   ]

.changeset/metal-crabs-provide.md

@@ -0,0 +1,11 @@
+---
+'@vanilla-extract/webpack-plugin': patch
+---
+
+Fix requiring of webpack loader
+
+Previously, the webpack plugin would reference itself as a loader by requiring `@vanilla-extract/webpack-plugin/loader`, but this was technically incorrect, and only worked because of the flat node_modules structure that yarn provides.
+
+When using a package manager like pnpm, which does not have a flat structure, this breaks.
+
+This change uses relative references internally to ensure that the loader can always be required.

.github/workflows/release.yml

@@ -12,6 +12,10 @@ jobs:
     env:
       CI: true
     steps:
+      - uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 6.23.1
+
       - name: Checkout Repo
         uses: actions/checkout@main
         with:
@@ -22,15 +26,16 @@ jobs:
         uses: actions/setup-node@main
         with:
           node-version: 14.x
+          cache: 'pnpm'
 
       - name: Install Dependencies
-        run: yarn --immutable
+        run: pnpm i
 
       - name: Create release PR or publish to npm
         uses: changesets/action@c2918239208f2162b9d27a87f491375c51592434
         with:
-          version: yarn run version
-          publish: yarn release
+          version: pnpm run version
+          publish: pnpm release
         env:
           GITHUB_TOKEN: ${{ secrets.SEEK_OSS_CI_GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.SEEK_OSS_CI_NPM_TOKEN }}

.github/workflows/validate.yml

@@ -9,31 +9,40 @@ jobs:
     env:
       CI: true
     steps:
+      - uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 6.23.1
+
       - name: Checkout Repo
         uses: actions/checkout@main
 
       - name: Setup Node.js 14.x
         uses: actions/setup-node@main
         with:
           node-version: 14.x
+          cache: 'pnpm'
 
       - name: Install Dependencies
-        run: yarn --immutable
+        run: pnpm i
 
       - name: Build
-        run: yarn build && node ./site/makeDocsManifest
+        run: pnpm build && node ./site/makeDocsManifest
 
       - name: Lint
-        run: yarn lint
+        run: pnpm lint
 
       - name: Test
-        run: yarn test:jest
+        run: pnpm test:jest
   playwright:
     name: Playwright tests
     runs-on: macos-11
     env:
       CI: true
     steps:
+      - uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 6.23.1
+
       - name: Checkout Repo
         uses: actions/checkout@main
 
@@ -43,16 +52,16 @@ jobs:
           node-version: 14.x
 
       - name: Install Dependencies
-        run: yarn --immutable
+        run: pnpm i
 
       - name: Install Browsers
-        run: yarn playwright install chromium
+        run: pnpm playwright install chromium
 
       - name: Build packages
-        run: yarn build
+        run: pnpm build
 
       - name: Screenshot tests
-        run: yarn test:playwright
+        run: pnpm test:playwright
 
       - uses: actions/upload-artifact@v2
         if: failure()

.gitignore

@@ -1,18 +1,11 @@
 node_modules
 dist
 tsconfig.tsbuildinfo
-yarn-error.log
 packages/**/README.md
 !packages/sprinkles/README.md
 !packages/integration/README.md
 test-results
 
 
-.yarn/*
-!.yarn/patches
-!.yarn/releases
-!.yarn/plugins
-!.yarn/sdks
-!.yarn/versions
 .pnp.*
 .next

.prettierignore

@@ -3,10 +3,9 @@
 node_modules
 dist
 CHANGELOG.md
-.yarn/
 README.md
-.yarnrc.yml
 .github/ISSUE_TEMPLATE
 site/docs-manifest.json
 .changeset
 .next
+pnpm-lock.yaml

babel-jest.config.js

@@ -2,5 +2,8 @@ const baseConfig = require('./babel.config');
 
 module.exports = {
   ...baseConfig,
-  plugins: [...(baseConfig.plugins ?? []), '@vanilla-extract/babel-plugin'],
+  plugins: [
+    ...(baseConfig.plugins ?? []),
+    require.resolve('@vanilla-extract/babel-plugin'),
+  ],
 };

package.json

@@ -9,17 +9,17 @@
     "build": "preconstruct build",
     "watch": "preconstruct watch",
     "start-fixture": "ts-node --log-error ./test-helpers/src/startFixtureCLI",
-    "start": "yarn start-fixture themed",
+    "start": "pnpm start-fixture themed",
     "start-site": "manypkg run site start",
     "build-site": "manypkg run site build",
-    "postinstall": "yarn dev",
+    "postinstall": "pnpm dev",
     "test:jest": "jest",
     "test:playwright": "playwright test",
     "format": "prettier --write .",
     "lint": "manypkg check && prettier --check . && tsc",
     "copy-readme-to-packages": "ts-node scripts/copy-readme-to-packages",
-    "version": "changeset version && yarn --mode=update-lockfile",
-    "release": "yarn copy-readme-to-packages && yarn build && changeset publish"
+    "version": "changeset version && pnpm --lockfile-only",
+    "release": "pnpm copy-readme-to-packages && pnpm build && changeset publish"
   },
   "workspaces": [
     "packages/*",
@@ -34,8 +34,7 @@
     ]
   },
   "volta": {
-    "node": "14.16.0",
-    "yarn": "1.22.10"
+    "node": "14.16.0"
   },
   "dependencies": {
     "@babel/core": "^7.13.10",
@@ -47,9 +46,8 @@
     "@manypkg/cli": "^0.17.0",
     "@playwright/test": "^1.14.1",
     "@preconstruct/cli": "^2.0.1",
-    "@testing-library/dom": "^7.30.0",
-    "@testing-library/jest-dom": "^5.11.9",
     "@types/jest": "^26.0.20",
+    "@vanilla-extract/babel-plugin": "*",
     "babel-jest": "^26.6.3",
     "jest": "^26.6.3",
     "prettier": "^2.3.2",

packages/webpack-plugin/src/index.ts

@@ -94,7 +94,7 @@ export class VanillaExtractPlugin {
       test: this.test,
       use: [
         {
-          loader: require.resolve('@vanilla-extract/webpack-plugin/loader'),
+          loader: require.resolve('../loader'),
           options: {
             outputCss: this.outputCss,
             childCompiler: this.childCompiler,

packages/webpack-plugin/src/loader.ts

@@ -13,12 +13,7 @@ import { debug, formatResourcePath } from './logger';
 import { ChildCompiler } from './compiler';
 
 const emptyCssExtractionFile = require.resolve(
-  path.join(
-    path.dirname(
-      require.resolve('@vanilla-extract/webpack-plugin/package.json'),
-    ),
-    'extracted',
-  ),
+  path.join(path.dirname(require.resolve('../../package.json')), 'extracted'),
 );
 
 interface LoaderOptions {