Make styled-components types an optional peer peer dependency

.changeset/lovely-windows-juggle.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Makes @types/styled-components an optional peer dependency, not a dependency

.github/workflows/consumer_test.yml

@@ -11,41 +11,33 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
-
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
           node-version: 18
           cache: npm
-
-      # `prepare` is a special case in `npm` and likes to run all the time, even
-      # with `--ignore-scripts` and even when using `npm link @primer/react
-      # --ignore-scripts`. This just removes it entirely for the duration of
-      # this workflow.
-      - name: Remove "prepare" script
-        run: npm pkg delete scripts.prepare
-
       - name: Install dependencies
         run: npm ci
-
       - name: Build
         run: npm run build
-
-      - name: Install only production dependencies
-        run: npm ci --production
-
-      - name: Link
-        run: npm link
-
-      - name: Link and test
-        id: link-and-test
+      # Output the artifact as a tarball in `consumer-test`. Write the
+      # information for this package in `consumer-test/pack.json` so we can read
+      # from it later to install the package
+      - name: Create a tarball for the package
+        run: npm pack --pack-destination consumer-test --json > consumer-test/pack.json
+      - name: Clean package directory
+        run: |
+          npm run clean
+          rm -rf node_modules
+      - name: Test
+        id: test
         working-directory: consumer-test
         run: |
+          # Read the filename for the tarball from `pack.json`
+          npm install $(jq -r '.[0].filename' pack.json)
           npm install
-          npm link @primer/react
           npm run check
-
       - name: Add annotation
-        if: failure() && steps.link-and-test.conclusion == 'failure'
+        if: failure() && steps.test.conclusion == 'failure'
         run: |
           echo "::error file=tsconfig.build.json::Test package could not build. See https://github.com/primer/react/blob/main/consumer-test"

consumer-test/App.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import {Box} from '@primer/react'
 
 export default function App() {

consumer-test/package.json

@@ -3,7 +3,13 @@
     "check": "tsc --noEmit"
   },
   "dependencies": {
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@types/styled-components": "^5.1.11",
     "@primer/react": "*",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "styled-components": "^5.3.11",
     "typescript": "~4.7.2"
   }
 }

package.json

@@ -105,7 +105,6 @@
     "@styled-system/css": "^5.1.5",
     "@styled-system/props": "^5.1.5",
     "@styled-system/theme-get": "^5.1.2",
-    "@types/styled-components": "^5.1.11",
     "@types/styled-system": "^5.1.12",
     "@types/styled-system__css": "^5.0.16",
     "@types/styled-system__theme-get": "^5.0.1",
@@ -171,6 +170,7 @@
     "@types/node": "16.11.11",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.2.6",
+    "@types/styled-components": "^5.1.11",
     "@typescript-eslint/eslint-plugin": "5.59.6",
     "@typescript-eslint/parser": "5.59.6",
     "ajv": "8.12.0",
@@ -258,10 +258,24 @@
     "yaml": "2.2.2"
   },
   "peerDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/styled-components": "^5.1.11",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "styled-components": "4.x || 5.x"
   },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    },
+    "@types/styled-components": {
+      "optional": true
+    }
+  },
   "prettier": "@github/prettier-config",
   "size-limit": [
     {

src/CounterLabel/CounterLabel.tsx

@@ -34,7 +34,6 @@ const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(
           )}
           {...props}
           as="span"
-          // @ts-expect-error Box is expecting a divelement, but this component forces a span element
           ref={forwardedRef}
         >
           {children}