Inline Vanilla Extract styles exported by Capsize (#1423)

seek-oss · Jan 16, 2024 · 24f9844 · 24f9844
1 parent c63374d
commit 24f9844
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 16 deletions.
diff --git a/.changeset/clean-coats-tie.md b/.changeset/clean-coats-tie.md
@@ -0,0 +1,5 @@
+---
+'braid-design-system': patch
+---
+
+Inline Vanilla Extract styles imported from Capsize
diff --git a/packages/braid-design-system/package.json b/packages/braid-design-system/package.json
@@ -184,7 +184,6 @@
   "dependencies": {
     "@capsizecss/core": "^3.1.0",
     "@capsizecss/metrics": "^1.1.1",
-    "@capsizecss/vanilla-extract": "^1.0.0",
     "@types/autosuggest-highlight": "^3.1.1",
     "@types/dedent": "^0.7.0",
     "@types/lodash": "^4.14.168",
@@ -212,6 +211,7 @@
     "@babel/core": "^7.18.0",
     "@babel/plugin-transform-typescript": "^7.20.13",
     "@braid-design-system/source.macro": "*",
+    "@capsizecss/vanilla-extract": "^1.0.1",
     "@svgr/core": "^5.5.0",
     "@svgr/plugin-jsx": "^5.5.0",
     "@svgr/plugin-prettier": "^5.5.0",

diff --git a/packages/braid-design-system/src/lib/css/capsize.css.ts b/packages/braid-design-system/src/lib/css/capsize.css.ts
@@ -0,0 +1,4 @@
+// ! Do not add exports that are not Vanilla Extract styles
+// Until Capsize is packaged with Crackle, we need to use this file to correctly generate CSS in consuming apps.
+// See this PR for detailed explanation: https://github.com/seek-oss/braid-design-system/pull/1423
+export { createTextStyle } from '@capsizecss/vanilla-extract';
diff --git a/packages/braid-design-system/src/lib/css/typography.css.ts b/packages/braid-design-system/src/lib/css/typography.css.ts
@@ -5,8 +5,8 @@ import {
   styleVariants,
 } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
-import { createTextStyle } from '@capsizecss/vanilla-extract';
 
+import { createTextStyle } from './capsize.css';
 import { vars } from '../themes/vars.css';
 import { breakpointQuery, responsiveStyle } from '../css/responsiveStyle';
 

diff --git a/packages/braid-design-system/src/lib/themes/makeVanillaTheme.ts b/packages/braid-design-system/src/lib/themes/makeVanillaTheme.ts
@@ -1,6 +1,5 @@
 import mapValues from 'lodash/mapValues';
-import { getCapHeight } from '@capsizecss/core';
-import { precomputeValues } from '@capsizecss/vanilla-extract';
+import { getCapHeight, precomputeValues } from '@capsizecss/core';
 
 import type { BraidTokens, TextDefinition } from './tokenType';
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/site/package.json b/site/package.json
@@ -23,7 +23,6 @@
     "@braid-design-system/docs-ui": "*",
     "@braid-design-system/generate-component-docs": "*",
     "@braid-design-system/source.macro": "*",
-    "@capsizecss/vanilla-extract": "^1.0.0",
     "@types/dedent": "^0.7.0",
     "@types/lodash": "^4.14.168",
     "@types/react": "^18.0.21",

diff --git a/site/src/App/Markdown/Markdown.css.ts b/site/src/App/Markdown/Markdown.css.ts
@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { createTextStyle } from '@capsizecss/vanilla-extract';
+import { createTextStyle } from 'braid-src/lib/css/capsize.css';
 import { vars } from 'braid-src/lib/themes/vars.css';
 
 const toCapsizeValues = ({