Migrate CSS to vanilla-extract

Author: kossnocorp

src/ui/components/BooksWidget/index.tsx

@@ -2,18 +2,7 @@ import { h, FunctionComponent } from 'preact'
 import shuffle from 'lodash/shuffle'
 import { useMemo, useState } from 'preact/hooks'
 import { books } from './constants'
-import {
-  Container,
-  Badge,
-  BadgeLabel,
-  BadgeNext,
-  Cover,
-  Text,
-  Header,
-  Title,
-  Description,
-  Link,
-} from './style.css'
+import * as styles from './styles.css'
 
 export const BooksWidget: FunctionComponent = () => {
   const shuffledBooks = useMemo(() => shuffle(books), [])
@@ -22,29 +11,29 @@ export const BooksWidget: FunctionComponent = () => {
 
   return (
     <div>
-      <Container
-        tag="a"
+      <a
+        class={styles.container}
         href={book.url}
         target="_blank"
         rel="noopener noreferrer"
       >
-        <Cover tag="img" src={book.cover} />
+        <img class={styles.cover} src={book.cover} />
 
-        <Text>
-          <Header>
-            <Title>{book.title}</Title>
-            <Description>{book.description}</Description>
-          </Header>
+        <div class={styles.text}>
+          <div class={styles.header}>
+            <div class={styles.title}>{book.title}</div>
+            <div class={styles.description}>{book.description}</div>
+          </div>
 
-          <Link tag="button">Get the book</Link>
-        </Text>
-      </Container>
+          <button class={styles.link}>Get the book</button>
+        </div>
+      </a>
 
-      <Badge>
-        <BadgeLabel>☝️ Support date-fns, buy a book 🙏</BadgeLabel>
+      <div class={styles.badge}>
+        <div class={styles.badgeLabel}>☝️ Support date-fns, buy a book 🙏</div>
 
-        <BadgeNext
-          tag="button"
+        <button
+          class={styles.badgeNext}
           onClick={() => {
             let newIndex = bookIndex + 1
             if (newIndex > books.length - 1) {
@@ -54,8 +43,8 @@ export const BooksWidget: FunctionComponent = () => {
           }}
         >
           Next book
-        </BadgeNext>
-      </Badge>
+        </button>
+      </div>
     </div>
   )
 }

src/ui/components/BooksWidget/style.css

@@ -0,0 +1,99 @@
+import { style, globalStyle } from '@vanilla-extract/css'
+
+export const badge = style({
+  background: '#9a0f98',
+  padding: '0.25rem',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+})
+
+export const badgeLabel = style({
+  color: 'white',
+  fontWeight: '600',
+})
+
+export const badgeNext = style({
+  background: 'transparent',
+  color: 'white',
+  border: '1px solid white',
+  borderRadius: '0.25rem',
+  cursor: 'pointer',
+
+  ':hover': {
+    color: '#9a0f98',
+    background: 'white',
+  },
+})
+
+export const cover = style({
+  width: '6rem',
+  flexShrink: '0',
+})
+
+export const description = style({
+  lineHeight: '1.4',
+  fontSize: '0.9rem',
+  color: '#fdf4dc',
+})
+
+export const container = style({
+  padding: '0.5rem',
+  background: '#39065a',
+  color: '#fff6f6',
+  display: 'flex',
+  alignItems: 'flex-start',
+  textDecoration: 'none',
+  transition: 'background 150ms ease-out',
+
+  ':hover': {
+    background: '#6a0572',
+  },
+})
+
+globalStyle(`${container} > *:not(:last-child)`, {
+  marginRight: '0.75rem',
+})
+
+export const header = style({})
+
+globalStyle(`${header} > *:not(:last-child)`, {
+  marginBottom: '0.125rem',
+})
+
+export const link = style({
+  background: '#ea0599',
+  padding: '0.25rem 0.5rem',
+  display: 'inline-block',
+  color: 'white',
+  fontSize: '1rem',
+  fontWeight: '500',
+  borderRadius: '0.25rem',
+  transition: 'background 150ms ease-out',
+  border: 'none',
+  cursor: 'pointer',
+  selectors: {
+    [`${container}:hover &`]: {
+      background: '#ff00a5',
+    },
+  },
+})
+
+export const text = style({
+  lineHeight: '1.2',
+})
+
+globalStyle(`${text} > *:not(:last-child)`, {
+  marginBottom: '0.5rem',
+})
+
+export const title = style({
+  fontWeight: '600',
+  fontSize: '1.25rem',
+  color: '#ead7af',
+  selectors: {
+    [`${container}:hover &`]: {
+      textDecoration: 'underline',
+    },
+  },
+})

src/ui/components/BooksWidget/style.css.d.ts

@@ -1,19 +1,18 @@
-import { h, FunctionComponent, Fragment } from 'preact'
+import { FunctionComponent, h } from 'preact'
 import Prism from 'prismjs'
 import 'prismjs/themes/prism.css?global'
 import './global.css?global'
-import { Pre, Code as StyledCode } from './style.css'
+import * as styles from './styles.css'
 
 interface CodeProps {
   value: string
 }
 export const Code: FunctionComponent<CodeProps> = ({ value }) => {
   const html = Prism.highlight(value, Prism.languages.javascript, 'javascript')
+
   return (
-    <>
-      <Pre tag="pre">
-        <StyledCode tag="code" dangerouslySetInnerHTML={{ __html: html }} />
-      </Pre>
-    </>
+    <pre class={styles.pre}>
+      <code class={styles.code} dangerouslySetInnerHTML={{ __html: html }} />
+    </pre>
   )
 }

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

@@ -0,0 +1,21 @@
+import { style } from '@vanilla-extract/css'
+
+export const code = style({
+  display: 'block',
+  color: '#5d583b',
+  backgroundColor: '#fffffe',
+  font: "13px Consolas, 'Liberation Mono', Menlo, Courier, monospace",
+  '::after': {
+    display: 'none',
+  },
+  '::before': {
+    display: 'none',
+  },
+})
+
+export const pre = style({
+  overflowX: 'auto',
+  border: '1px solid #b9a2b2',
+  backgroundColor: '#fffffe',
+  padding: '4px 8px',
+})

src/ui/components/Code/index.tsx

@@ -1,9 +1,9 @@
 import { h, FunctionComponent } from 'preact'
 import { Code } from '~/ui/components/Code'
 import { DocHeaderAnchor } from '~/ui/components/DocHeaderAnchor'
-import { CodeContainer } from './style.css'
 import isArray from 'lodash/isArray'
 import { Markdown } from '~/ui/components/Markdown'
+import * as styles from './styles.css'
 
 interface Props {
   examples: string[] | string
@@ -17,13 +17,11 @@ export const DocExamples: FunctionComponent<Props> = ({ examples }) => (
     </h2>
 
     {isArray(examples) ? (
-      examples.map((example, index) => {
-        return (
-          <CodeContainer key={index}>
-            <Code value={example} />
-          </CodeContainer>
-        )
-      })
+      examples.map((example, index) => (
+        <div class={styles.codeContainer} key={index}>
+          <Code value={example} />
+        </div>
+      ))
     ) : (
       <Markdown value={examples} />
     )}