Migrate home styles to vanilla-extract

Author: kossnocorp

config/webpackDefaults.ts

@@ -1,4 +1,5 @@
 import { DefinePlugin, Configuration } from 'webpack'
+import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import { getMode, getPath } from './utils'
 import merge from 'webpack-merge'
@@ -13,7 +14,12 @@ export function webpackDefaults(config: Configuration): Configuration {
       mode,
       devtool: isProduction ? 'source-map' : 'inline-source-map',
       module: {
-        rules: [tsRule(), cssRule(isWeb), fileRule(isWeb)],
+        rules: [
+          tsRule(),
+          vanillaExtractRule(),
+          cssRule(isWeb),
+          fileRule(isWeb),
+        ],
       },
       resolve: {
         extensions: ['.tsx', '.ts', '.js', '.json'],
@@ -22,6 +28,7 @@ export function webpackDefaults(config: Configuration): Configuration {
         },
       },
       plugins: [
+        new VanillaExtractPlugin(),
         new MiniCssExtractPlugin(
           isProduction
             ? {
@@ -54,7 +61,7 @@ function tsRule() {
         },
       },
     ],
-    exclude: /node_modules/,
+    exclude: [/node_modules/, /\.css\.ts$/i],
   }
 }
 
@@ -84,6 +91,22 @@ function cssRule(isWeb: boolean) {
       },
       { use: nyancssLoaders },
     ],
+    exclude: [/\.vanilla\.css$/i],
+  }
+}
+
+function vanillaExtractRule() {
+  return {
+    test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract
+    use: [
+      MiniCssExtractPlugin.loader,
+      {
+        loader: require.resolve('css-loader'),
+        options: {
+          url: false, // Required as image imports should be handled via JS/TS import statements
+        },
+      },
+    ],
   }
 }
 

package.json

@@ -35,8 +35,11 @@
     "@types/webpack-hot-middleware": "^2.25.6",
     "@types/webpack-node-externals": "^2.5.3",
     "@typesaurus/preact": "6.0.0-alpha.4",
+    "@vanilla-extract/css": "^1.9.2",
+    "@vanilla-extract/webpack-plugin": "^2.2.0",
     "assets-webpack-plugin": "^7.1.1",
     "body-parser": "^1.19.0",
+    "classnames": "^2.3.2",
     "copy-webpack-plugin": "^11.0.0",
     "cors": "^2.8.5",
     "css-loader": "^6.7.3",
@@ -71,6 +74,7 @@
     "tsconfig-paths": "^4.1.1",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
     "tslint": "~6.1.3",
+    "typedoc": "^0.23.23",
     "typeroo": "^0.9.0",
     "typesaurus": "10.0.0-alpha.41",
     "typescript": "^4.9.4",

src/types/assets.d.ts

@@ -0,0 +1,14 @@
+declare module '*.png' {
+  const url: string
+  export default url
+}
+
+declare module '*.jpg' {
+  const url: string
+  export default url
+}
+
+declare module '*.svg' {
+  const url: string
+  export default url
+}

src/ui/screens/Docs/Doc/JSDoc/Issue/index.tsx renamed to src/ui/components/DocLinks/index.tsx

@@ -1,10 +1,10 @@
 import { h } from 'preact'
 import { useContext } from 'preact/hooks'
-import { Link } from '~/ui/components/Home/style.css'
 import { RouterContext, RouterLink } from '~/ui/router'
 import { bugTemplateText, docIssueTemplateText } from './templateText'
+import * as styles from './styles.css'
 
-export default function Issue() {
+export const DocLinks = () => {
   const { location } = useContext(RouterContext)
   const pageUrl = window.location.href
   const fnName = location.params?.page || ''
@@ -18,9 +18,9 @@ export default function Issue() {
       <ul>
         <li>
           <div>
-            <Link
+            <RouterLink
+              class={styles.link}
               decorated
-              tag={RouterLink}
               to={{
                 name: 'docs',
                 params: {
@@ -29,7 +29,7 @@ export default function Issue() {
               }}
             >
               Suggest edits by sending a PR
-            </Link>
+            </RouterLink>
           </div>
         </li>
 

src/ui/components/DocLinks/styles.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css'
+
+export const link = style({
+  color: '#862d5b',
+  textDecoration: 'none',
+})

src/ui/screens/Docs/Doc/JSDoc/Issue/templateText.ts renamed to src/ui/components/DocLinks/templateText.ts

@@ -1,6 +1,6 @@
 import { h, FunctionComponent } from 'preact'
 import { RouterLink, AppRouteRef } from '~/ui/router'
-import { Action } from './style.css'
+import * as styles from './styles.css'
 
 interface Props {
   to: AppRouteRef
@@ -12,7 +12,7 @@ export const HomeAction: FunctionComponent<Props> = ({
   title,
   children,
 }) => (
-  <Action tag={RouterLink} to={to} title={title}>
+  <RouterLink class={styles.action} to={to} title={title}>
     {children}
-  </Action>
+  </RouterLink>
 )

src/ui/components/Home/HomeAction.tsx

@@ -1,12 +1,5 @@
 import { h, ComponentChild, FunctionComponent } from 'preact'
-import {
-  Block,
-  InnerContainer,
-  Header,
-  SubHeader,
-  Content,
-  Actions,
-} from './style.css'
+import * as styles from './styles.css'
 
 interface Props {
   header?: ComponentChild
@@ -20,15 +13,15 @@ export const HomeBlock: FunctionComponent<Props> = ({
   actions,
   children,
 }) => (
-  <Block>
-    <InnerContainer>
-      {header && <Header>{header}</Header>}
+  <div class={styles.block}>
+    <div class={styles.innerContainer}>
+      {header && <h2 class={styles.header}>{header}</h2>}
 
-      {subHeader && <SubHeader>{subHeader}</SubHeader>}
+      {subHeader && <h3 class={styles.subHeader}>{subHeader}</h3>}
 
-      <Content>{children}</Content>
+      <div class={styles.content}>{children}</div>
 
-      <Actions>{actions}</Actions>
-    </InnerContainer>
-  </Block>
+      <div class={styles.actions}>{actions}</div>
+    </div>
+  </div>
 )

src/ui/components/Home/HomeBlock.tsx

@@ -1,10 +1,11 @@
 import { h, FunctionComponent } from 'preact'
-import { Button } from './style.css'
+import classNames from 'classnames'
+import * as styles from './styles.css'
 
 interface Props {
   href: string
   newTab?: boolean
-  type: 'primary' | 'secondary'
+  type: keyof typeof styles.button
 }
 
 export const HomeButton: FunctionComponent<Props> = ({
@@ -13,13 +14,13 @@ export const HomeButton: FunctionComponent<Props> = ({
   newTab,
   type,
 }) => (
-  <Button
-    tag="a"
+  <a
+    class={classNames(styles.button[type])}
     href={href}
     target={newTab ? '_blank' : undefined}
     rel={newTab ? 'noopener noreferrer' : undefined}
     type={type}
   >
     {children}
-  </Button>
+  </a>
 )

src/ui/components/Home/HomeButton.tsx

@@ -1,5 +1,5 @@
 import { h, FunctionComponent } from 'preact'
-import { Action } from './style.css'
+import * as styles from './styles.css'
 
 interface Props {
   href: string
@@ -11,7 +11,7 @@ export const HomeExternalAction: FunctionComponent<Props> = ({
   title,
   children,
 }) => (
-  <Action tag="a" href={href} title={title}>
+  <a class={styles.action} href={href} title={title}>
     {children}
-  </Action>
+  </a>
 )