feat: add prefix to tokens to avoid shadowing (#21)

widgetbot-io · Aug 17, 2023 · 2de589a · 2de589a
1 parent c2b48c5
commit 2de589a
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "i18n-extract": "i18next 'src/**/*.tsx' --config i18next-parser.config.mjs",
-    "build": "pnpm run i18n-extract && vite build",
+    "build": "vite build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "prepublishOnly": "pnpm build",

diff --git a/src/Stitches/stitches.config.tsx b/src/Stitches/stitches.config.tsx
@@ -1,6 +1,9 @@
 import { createStitches } from "@stitches/react";
 
+export const prefix = "wb-msg";
+
 const stitches = createStitches({
+  prefix,
   theme: {
     colors: {
       primaryOpacity10: "rgba(255, 255, 255, 0.1)",

diff --git a/src/stories/Wrapper.tsx b/src/stories/Wrapper.tsx
@@ -61,7 +61,7 @@ import type {
   Snowflake,
 } from "discord-api-types/v10";
 import { ChannelType, GuildNSFWLevel } from "discord-api-types/v10";
-import { globalCss, styled, theme } from "../Stitches/stitches.config";
+import { globalCss, prefix, styled, theme } from "../Stitches/stitches.config";
 import getDisplayName from "../utils/getDisplayName";
 import type {
   ChatBadgeProps,
@@ -357,7 +357,7 @@ const globalStyles = globalCss({
 });
 
 const StorybookStyles = styled("div", {
-  "--fonts-main":
+  [`--${prefix}-fonts-main`]:
     '"gg sans","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif',
   fontFamily: theme.fonts.main,
   padding: 40,