Merge pull request #42 from cdonohue/add-element-normalization

Add element normalization and cleanup preflight
cdonohue · Oct 6, 2019 · 8e0a587 · 8e0a587
2 parents cf0573c + 5ccc9dc
commit 8e0a587
Show file tree

Hide file tree

Showing 20 changed files with 496 additions and 754 deletions.
diff --git a/packages/benefit-docs/gatsby-node.js b/packages/benefit-docs/gatsby-node.js
@@ -36,3 +36,11 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     })
   })
 }
+
+exports.onCreateWebpackConfig = ({ actions }) => {
+  actions.setWebpackConfig({
+    node: {
+      fs: "empty",
+    },
+  })
+}
diff --git a/packages/benefit-docs/gatsby-ssr.js b/packages/benefit-docs/gatsby-ssr.js
@@ -1,11 +1,11 @@
 import React, { Fragment } from "react"
 import { renderToString } from "react-dom/server"
-import { StylesContainer } from "benefit-react"
+import { ServerStyleManager } from "benefit-react"
 
 export const replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
   const app = () => (
     <Fragment>
-      <StylesContainer />
+      <ServerStyleManager />
       {bodyComponent}
     </Fragment>
   )

diff --git a/packages/benefit-docs/package.json b/packages/benefit-docs/package.json
@@ -7,7 +7,7 @@
   "dependencies": {
     "@babel/core": "^7.5.5",
     "@babel/plugin-transform-react-jsx": "^7.3.0",
-    "@babel/standalone": "^7.5.5",
+    "@babel/standalone": "^7.6.0",
     "@mdx-js/mdx": "^1.1.1",
     "@mdx-js/react": "^1.1.1",
     "benefit-react": "2.1.0",

diff --git a/packages/benefit-docs/src/components/CodeBlock.js b/packages/benefit-docs/src/components/CodeBlock.js
@@ -1,7 +1,21 @@
 /** @jsx jsx */
-import { jsx, css, theme as benefitTheme } from "benefit-react"
+import {
+  jsx,
+  css,
+  theme as benefitTheme,
+  ConfigConsumer,
+  Box,
+} from "benefit-react"
 import Highlight, { defaultProps } from "prism-react-renderer"
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live"
+import { transform } from "@babel/standalone"
+import prettier from "prettier/standalone"
+
+const stripLastLine = css`
+  /* .token-line:last-child {
+    display: none;
+  } */
+`
 
 var theme /*: PrismTheme */ = {
   plain: {
@@ -82,29 +96,57 @@ export default ({ children, className, live }) => {
   const language = className.replace(/language-/, "")
   if (live) {
     return (
-      <div className="rounded overflow-hidden mb-4 focus-within:shadow-outline">
-        <LiveProvider code={children} theme={theme}>
-          <div className="bg-gray-800 p-4">
-            <LivePreview />
-          </div>
-          <div
-            className="relative border-t-4 border-blue-600"
-            css={css`
-              & textarea {
-                outline: none !important;
+      <div className="shadow-lg">
+        <div className="rounded overflow-hidden mb-4 focus-within:shadow-outline">
+          <LiveProvider
+            code={children}
+            theme={theme}
+            scope={{ jsx, css }}
+            transformCode={code => {
+              try {
+                const transformedCode = transform(code, {
+                  plugins: [
+                    [
+                      "transform-react-jsx",
+                      {
+                        pragma: "jsx",
+                      },
+                    ],
+                  ],
+                }).code
+
+                return prettier.format(transformedCode, {
+                  semi: false,
+                  parser: "babylon",
+                })
+              } catch {
+                return code
               }
-            `}
+            }}
           >
-            <LiveEditor />
-          </div>
-          <LiveError />
-        </LiveProvider>
+            <div className="bg-white p-4 font-sans">
+              <LivePreview />
+            </div>
+
+            <div
+              className={`relative leading-tight ${stripLastLine}`}
+              css={css`
+                & textarea {
+                  outline: none !important;
+                }
+              `}
+            >
+              <LiveEditor />
+              <LiveError />
+            </div>
+          </LiveProvider>
+        </div>
       </div>
     )
   }
 
   return (
-    <div className="overflow-hidden rounded relative mb-4 border-t-4 border-blue-300">
+    <div className="overflow-hidden rounded relative mb-4 border-t-4 border-blue-300 shadow-lg">
       <div className="inline-block absolute right-0 bg-blue-300 text-blue-800 font-bold py-px px-2 rounded-bl text-xs uppercase font-mono">
         {language}
       </div>
@@ -116,13 +158,8 @@ export default ({ children, className, live }) => {
       >
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
           <pre
-            className={`${className} whitespace-pre-wrap text-xs p-4`}
+            className={`${className} ${stripLastLine} whitespace-pre-wrap text-xs p-4`}
             style={{ ...style }}
-            css={css`
-              & .token-line:last-child {
-                display: none;
-              }
-            `}
           >
             {tokens.map((line, i) => (
               <div key={i} {...getLineProps({ line, key: i })}>

diff --git a/packages/benefit-docs/src/components/Page.js b/packages/benefit-docs/src/components/Page.js
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { useState, useEffect, Fragment } from "react"
+
 import { graphql, Link } from "gatsby"
 import { MDXProvider } from "@mdx-js/react"
 import { MDXRenderer } from "gatsby-plugin-mdx"
@@ -9,7 +9,6 @@ import {
   Box,
   css,
   theme,
-  global,
   keyframes,
   ConfigConsumer,
   ConfigProvider,
@@ -63,16 +62,6 @@ const fadeInRight = keyframes`
   }
 `
 
-global`
-  html {
-    font-size: 12px;
-
-    @media (min-width: 768px) {
-      font-size: 16px;
-    }
-  }
-`
-
 export default function PageTemplate({ data: { mdx } }) {
   return (
     <Layout>

diff --git a/packages/benefit-docs/src/components/PageLayout.js b/packages/benefit-docs/src/components/PageLayout.js
@@ -3,15 +3,14 @@ import { useState, useEffect, Fragment } from "react"
 import { Link } from "gatsby"
 
 import Nav from "./nav"
-import { jsx, css, theme, global } from "benefit-react"
+import { jsx, css, theme, injectGlobal, Preflight } from "benefit-react"
 
 import Icon from "./Icon"
 import Logo from "../images/benefit-logo.svg"
-import { Preflight } from "benefit-react"
 
-global`
+injectGlobal`
   html {
-    font-size: 12px;
+    font-size: 14px;
     @media (min-width: 768px) {
       font-size: 16px;
     }
@@ -23,10 +22,10 @@ export default function Layout({ children }) {
 
   useEffect(() => {
     const sideMenu = document.querySelector(".side-menu")
-    sideMenu.scrollTop = localStorage.getItem("menuScroll") || 0
+    sideMenu.scrollTop = sessionStorage.getItem("menuScroll") || 0
 
-    sideMenu.onscroll = ({ target }) => {
-      localStorage.setItem("menuScroll", target.scrollTop)
+    return () => {
+      sessionStorage.setItem("menuScroll", sideMenu.scrollTop)
     }
   }, [])
 

diff --git a/packages/benefit-react/Preflight.tsx b/packages/benefit-react/Preflight.tsx
@@ -1,8 +1,6 @@
-import { preflight, preflightStyles } from "benefit"
+import { injectPreflight } from "benefit"
 
-export default function Preflight() {
-  preflight`
-    ${preflightStyles}
-  `
+export default function Preflight({ selector = "" }) {
+  injectPreflight(selector)
   return null
 }
diff --git a/packages/benefit-react/StylesContainer.tsx → ...ages/benefit-react/ServerStyleManager.tsx b/packages/benefit-react/StylesContainer.tsx → ...ages/benefit-react/ServerStyleManager.tsx
@@ -21,12 +21,13 @@ function createContainer(label: string, styles: any[]) {
   )
 }
 
-export default function StylesContainer() {
+export default function ServerStyleManager() {
   const benefitRegistry = registry.getInstance()
   const {
     css,
     global,
     keyframes,
+    normalize,
     preflight,
     utilities,
   } = benefitRegistry.getRegistry()
@@ -45,6 +46,7 @@ export default function StylesContainer() {
       {createContainer("preflight", preflight)}
       {createContainer("global", global)}
       {createContainer("keyframes", keyframes)}
+      {createContainer("normalize", normalize)}
       {createContainer("utilities", utilities)}
       {createContainer("css", css)}
     </div>

diff --git a/packages/benefit-react/index.ts b/packages/benefit-react/index.ts
@@ -1,5 +1,5 @@
 import ConfigContext, { ConfigConsumer, ConfigProvider } from "./ConfigContext"
-import StylesContainer from "./StylesContainer"
+import ServerStyleManager from "./ServerStyleManager"
 import Box from "./Box"
 import jsx from "./jsx"
 import Preflight from "./Preflight"
@@ -11,7 +11,8 @@ import {
   createVariantsFromMap,
   flattenColorConfig,
   css,
-  global,
+  injectGlobal,
+  injectPreflight,
   registry,
   keyframes,
   parseDeclarations,
@@ -22,7 +23,7 @@ export {
   ConfigContext,
   ConfigConsumer,
   ConfigProvider,
-  StylesContainer,
+  ServerStyleManager,
   Box,
   jsx,
   registry,
@@ -34,7 +35,8 @@ export {
   keyframes,
   flattenColorConfig,
   parseDeclarations,
-  global,
+  injectGlobal,
+  injectPreflight,
   Preflight,
   theme,
 }
diff --git a/packages/benefit/createBenefit.ts b/packages/benefit/createBenefit.ts
@@ -6,11 +6,12 @@ import getProcessedRules from "./util/getProcessedRules"
 import createHash from "./util/createHash"
 import registry from "./util/registry"
 import insertStyle from "./util/insertStyle"
+import { injectNormalize } from "./util/css"
 
 interface Options {
   prefix?: string
   theme?: { [key: string]: any }
-  normalize?: (theme?: { [key: string]: any }) => { [key: string]: any }
+  normalize?: (theme: { [key: string]: any }) => { [key: string]: any }
   utilities?: Array<(theme?: { [key: string]: any }) => { [key: string]: any }>
   variants?: any
   apply?: any
@@ -29,12 +30,12 @@ export default function createBenefit(
   const benefitRegistry = registry.getInstance()
   benefitRegistry.addListener(insertStyle)
 
-  // const isDevMode = process.env.NODE_ENV === "development"
   const config = configFn(defaultConfig)
 
   const {
     prefix = "",
     theme = {},
+    normalize = () => ({}),
     utilities = [],
     variants = [],
     apply = {},
@@ -50,6 +51,10 @@ export default function createBenefit(
 
   const prefixStr = prefix ? `${prefix}-` : ""
 
+  const normalizeDeclarations = normalize(theme)
+  const shouldNormalize = Object.keys(normalizeDeclarations).length
+  const normalizeStyles = parseDeclarations(normalizeDeclarations).join("")
+
   const utilityClasses: any = {}
   Object.keys(generatedUtilities).forEach(
     (key) => (utilityClasses[`${prefixStr}${key}`] = generatedUtilities[key])
@@ -90,6 +95,13 @@ export default function createBenefit(
     const ignoredClasses = []
     const activeDeclarations = []
 
+    if (shouldNormalize) {
+      const normalizeClass = injectNormalize`
+        ${normalizeStyles}
+      `
+      classList.push(normalizeClass)
+    }
+
     for (let i = 0; i < classList.length; i++) {
       const className = classList[i]
 

diff --git a/packages/benefit/index.ts b/packages/benefit/index.ts
@@ -2,8 +2,8 @@ import createBenefit from "./createBenefit"
 import createUtilitiesFromMap from "./config/createUtilitiesFromMap"
 import createVariant from "./config/createVariant"
 import createVariantsFromMap from "./config/createVariantsFromMap"
-import { css, global, keyframes, preflight } from "./util/css"
-import { preflightStyles } from "./util/preflight"
+import { css, injectGlobal, keyframes, injectPreflight } from "./util/css"
+import { generatePreflightStyles } from "./util/preflight"
 import registry from "./util/registry"
 import flattenColorConfig from "./config/flattenColorConfig"
 import parseDeclarations from "./util/parseDeclarations"
@@ -16,11 +16,11 @@ export {
   createVariantsFromMap,
   css,
   flattenColorConfig,
-  global,
-  preflight,
+  injectGlobal,
+  injectPreflight,
   keyframes,
   parseDeclarations,
-  preflightStyles,
+  generatePreflightStyles,
   registry,
   theme,
 }