feat: removes global TW styles (#80)

packages/swingset-theme-hashicorp/package.json

@@ -32,11 +32,14 @@
   "devDependencies": {
     "autoprefixer": "^10.4.13",
     "next": "^13.1.6",
-    "postcss-cli": "^10.1.0",
     "postcss": "^8.4.21",
-    "react-dom": "^18.2.0",
+    "postcss-cli": "^10.1.0",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "swingset": "file:../swingset",
     "tailwindcss": "^3.2.7"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.5.2"
   }
 }

packages/swingset-theme-hashicorp/src/components.tsx

@@ -1,6 +1,13 @@
 import { PropsTable } from './components/props-table'
+import { Heading } from './components/heading'
 
 export default {
+  h1: (props: any) => <Heading as="h1" {...props} />,
+  h2: (props: any) => <Heading as="h2" {...props} />,
+  h3: (props: any) => <Heading as="h3" {...props} />,
+  h4: (props: any) => <Heading as="h4" {...props} />,
+  h5: (props: any) => <Heading as="h5" {...props} />,
+  h6: (props: any) => <Heading as="h6" {...props} />,
   p: (props: any) => <p className="ss-my-4" {...props} />,
   pre: (props: any) => <pre className="ss-my-4" {...props} />,
   PropsTable,

packages/swingset-theme-hashicorp/src/components/heading.tsx

@@ -0,0 +1,32 @@
+import { type HTMLAttributes } from 'react'
+import { cx, cva } from 'class-variance-authority'
+
+type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+}
+
+const headingStyles = cva('m-0 p0', {
+  variants: {
+    as: {
+      h1: 'ss-text-3xl',
+      h2: 'ss-text-2xl',
+      h3: 'ss-text-xl',
+      h4: 'ss-text-lg',
+      h5: 'ss-text-md',
+      h6: 'ss-text-md',
+    },
+  },
+  defaultVariants: {
+    as: 'h2',
+  },
+})
+
+export function Heading({ as = 'h2', className, ...restProps }: HeadingProps) {
+  const Component = as
+  return (
+    <Component
+      className={cx(headingStyles({ as }), className)}
+      {...restProps}
+    />
+  )
+}

packages/swingset-theme-hashicorp/src/components/link.tsx

@@ -0,0 +1,16 @@
+import { type ComponentProps } from 'react'
+import NextLink from 'next/link'
+import { cx } from 'class-variance-authority'
+
+type NextLinkProps = ComponentProps<typeof NextLink>
+
+export type LinkProps = NextLinkProps & { className?: string }
+
+export function Link({ className, ...restProps }: LinkProps) {
+  return (
+    <NextLink
+      className={cx('ss-text-blue-500 ss-underline', className)}
+      {...restProps}
+    />
+  )
+}

packages/swingset-theme-hashicorp/src/css/styles.css

@@ -1,25 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  h1 {
-    @apply ss-text-3xl;
-  }
-
-  h2 {
-    @apply ss-text-2xl;
-  }
-
-  h3 {
-    @apply ss-text-xl;
-  }
-
-  h4 {
-    @apply ss-text-lg;
-  }
-
-  a {
-    @apply ss-text-blue-500 ss-underline;
-  }
-}

packages/swingset-theme-hashicorp/src/index.tsx

@@ -1,6 +1,6 @@
-import Link from 'next/link'
 // @ts-expect-error -- this should be resolved once the theme is externalized
 import { meta, categories } from 'swingset/meta'
+import { Link } from './components/link'
 
 import Page from './page'
 

packages/swingset-theme-hashicorp/src/page.tsx

@@ -1,3 +1,4 @@
+import { Heading } from './components/heading'
 import { OpenInEditor } from './components/open-in-editor'
 
 export default async function Page({
@@ -9,7 +10,7 @@ export default async function Page({
 }) {
   return (
     <>
-      <h1>{data?.frontmatter?.title ?? data?.slug}</h1>
+      <Heading as="h1">{data?.frontmatter?.title ?? data?.slug}</Heading>
       <p>{data?.frontmatter?.description}</p>
       {content}
       <div className="ss-mt-4 ss-text-right">

packages/swingset-theme-hashicorp/tsup.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'tsup'
 import { Buffer } from 'node:buffer'
+import { defineConfig } from 'tsup'
 
 /**
  * Ensure that the "use client"; directive for RSC is always at the top of the output file even after the build is finished.