backfill missing control tokens

Author: rezrah

.changeset/fix-esm-functional-size-tokens.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Fixed missing size and animation tokens in tree-shaken ESM component bundles like `Button`. Now all control tokens are loaded globally as a side-effect.

.github/workflows/integration_test_nextjs.yml

@@ -96,6 +96,8 @@ jobs:
         run: |
           rm ./${{ env.NEXTJS_FOLDER }}/app/page.tsx
           cp ./packages/e2e/integration-tests/nextjs/page.tsx ./${{ env.NEXTJS_FOLDER }}/app
+          mkdir ./${{ env.NEXTJS_FOLDER }}/app/button-only
+          cp ./packages/e2e/integration-tests/nextjs/button-only/page.tsx ./${{ env.NEXTJS_FOLDER }}/app/button-only
           cp ./packages/e2e/cypress.config.js ./${{ env.NEXTJS_FOLDER }}
           mkdir ${{ env.NEXTJS_FOLDER }}/integration-tests
           cp -r ./packages/e2e/integration-tests/fixtures ./${{ env.NEXTJS_FOLDER }}/integration-tests

packages/e2e/integration-tests/nextjs/button-only/page.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import {Button} from '../../integration-tests/fixtures'
+
+export default function ButtonOnlyPage() {
+  return <Button data-testid="button-only">Button-only page</Button>
+}

packages/e2e/integration-tests/tests/check-warnings.cy.ts

@@ -24,4 +24,18 @@ describe('Integration tests', () => {
       expect(windowWarningSpy).to.not.be.called
     })
   })
+
+  it('loads shared size tokens without Stack on the page', () => {
+    cy.visit('http://localhost:3000/button-only')
+
+    cy.get('[data-testid="button-only"]').should(button => {
+      const ownerWindow = button[0].ownerDocument.defaultView
+
+      if (!ownerWindow) throw new Error('Expected the Button document to have a window')
+
+      const controlSize = ownerWindow.getComputedStyle(button[0]).getPropertyValue('--brand-control-medium-size').trim()
+
+      expect(controlSize).not.to.equal('')
+    })
+  })
 })

packages/react/src/css/stylesheets.ts

@@ -9,6 +9,8 @@ import './reset.css'
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.css'
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/base/size/size.css'
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/base/typography/typography.css'
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/animation/base.css'
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/size/size.css'
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css'
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/size/breakpoints.css'
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/size/border.css'