Add experimental css modules mode

package.json

@@ -34,6 +34,7 @@
     "react-live": "^2.1.2",
     "rebass": "^4.0.2",
     "stringify-object": "^3.3.0",
+    "style-object-to-css-string": "^1.0.1",
     "theme-ui": "^0.2.31"
   }
 }

src/code.js

@@ -14,6 +14,8 @@ import {
 import { Box, Flex } from 'rebass'
 import { useContext } from './context'
 
+import toCSS from 'style-object-to-css-string'
+
 Box.displayName = 'Box'
 Flex.displayName = 'Flex'
 
@@ -42,13 +44,50 @@ const elements = {
     Flex: 'div',
     Box: 'div',
   },
+  'css-modules': {},
 }
 
-const theme = {
-  colors: {
-    primary: '#07c',
-    secondary: '#07c',
+const theme = {}
+
+const numberProperties = {
+  lineHeight: true,
+  fontWeight: true,
+  zIndex: true,
+  flexGrow: true,
+  flexShrink: true,
+}
+const numberToPixels = obj => {
+  const next = {}
+  for (let key in obj) {
+    const value = obj[key]
+    if (typeof value !== 'number' || numberProperties[key] || value === 0) {
+      next[key] = value
+    } else {
+      next[key] = value + 'px'
+    }
   }
+  return next
+}
+
+const renderCSSModules = (type, props, children) => {
+  const styles = scss(props.sx)(theme)
+  const pixels = numberToPixels(styles)
+  const ruleset = toCSS(pixels)
+  const chx = React.Children.map(children, child => {
+    if (typeof child === 'string' && /^\./.test(child)) {
+      return child
+    }
+    return null
+  })
+  const rules = [
+    `.${props.name || 'root'} {`,
+    indent(ruleset, 2),
+    '}',
+    '',
+    ...chx
+  ].filter(Boolean).join('\n')
+
+  return rules
 }
 
 export const jsx = (type, props = {}, ...children) => {
@@ -57,6 +96,10 @@ export const jsx = (type, props = {}, ...children) => {
   const name = type.displayName || type
   const tag = elements[mode][name]
 
+  if (mode === 'css-modules') {
+    return renderCSSModules(type, props, children)
+  }
+
   const styles = props.sx
   let sx, css
   if (styles) {
@@ -97,6 +140,7 @@ export const jsx = (type, props = {}, ...children) => {
     })
   })
 
+
   const lines = [
     `<${tag}` + (styleProps ? styleProps : '>'),
     ...chx,

src/context.js

@@ -6,6 +6,7 @@ export const Context = React.createContext({
     'rebass',
     'theme-ui',
     'emotion',
+    // 'css-modules',
   ],
 })
 

src/editor.js

@@ -75,6 +75,14 @@ export const Editor = props => {
     copy(formatCode(code, mode))
   }
 
+  if (mode === 'css-modules') {
+    return (
+      <Styled.pre>
+        {code}
+      </Styled.pre>
+    )
+  }
+
   return (
     <Box mx={-3}>
       <LiveProvider

src/examples/bottom-footer.js

@@ -0,0 +1,31 @@
+/** @jsx jsx */
+import { jsx, Box } from '../code'
+
+export default props =>
+  <Box
+    sx={{
+      display: 'flex',
+      flexDirection: 'column',
+      minHeight: '100vh',
+    }}>
+    <Box as='header'
+      sx={{
+        p: 3,
+      }}>
+      Header
+    </Box>
+    <Box as='main'
+      sx={{
+        flex: '1 1 auto',
+        p: 3,
+      }}>
+      Content
+    </Box>
+    <Box
+      as='footer'
+      sx={{
+        p: 3,
+      }}>
+      Footer
+    </Box>
+  </Box>

src/examples/sidebar.js

@@ -3,10 +3,12 @@ import { jsx, Flex, Box } from '../code'
 
 export default props => (
   <Flex
+    name='root'
     sx={{
       flexWrap: 'wrap',
     }}>
     <Box
+      name='sidebar'
       sx={{
         p: 3,
         flexGrow: 1,
@@ -15,6 +17,7 @@ export default props => (
       Sidebar
     </Box>
     <Box
+      name='main'
       sx={{
         p: 3,
         flexGrow: 99999,

src/gatsby-plugin-theme-ui/index.js

@@ -26,6 +26,10 @@ const theme = merge(preset, {
   fontWeights: {
     heading: 900,
   },
+  sizes: {
+    // hack to limit height in examples
+    '100vh': 256,
+  },
   prism,
   styles: {
     focused: {

src/pages/bottom-footer.mdx

@@ -0,0 +1,12 @@
+---
+title: Bottom Footer
+---
+
+import { Editor } from '..'
+import BottomFooter from '../examples/bottom-footer'
+
+# Bottom Footer
+
+Note the height is altered in the preview to better fit in the screen
+
+<Editor component={BottomFooter} />

src/pages/demo.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import Sidebar from '../examples/sidebar'
+
+export default () =>
+  <div>
+    <h1>Demo</h1>
+    <pre
+      children={Sidebar()}
+    />
+  </div>

src/pages/index.js

@@ -9,6 +9,7 @@ import TilesByWidth from '../examples/tiles-by-width'
 import TilesByColumns from '../examples/tiles-by-columns'
 import Container from '../examples/container'
 import Stack from '../examples/stack'
+import BottomFooter from '../examples/bottom-footer'
 
 const Grid = ({
   width = 320,
@@ -112,6 +113,11 @@ export default props => {
           component={Stack}
           href='/stack'
         />
+        <Card
+          title='Bottom Footer'
+          component={BottomFooter}
+          href='/bottom-footer'
+        />
       </Grid>
     </div>
   )

src/pages/notes.mdx

@@ -9,13 +9,16 @@
 - [x] MDX pages
 - [x] Index page with previews
   - [x] scale/zoom
-- [ ] css modules mode
+- [x] css modules mode
+  - [x] convert numbers to px
+  - [ ] add names to elements
+  - [ ] alternative UI for css modules
 - [ ] Examples
   - [x] Sidebar
   - [x] grid tiles by width
   - [x] grid tiles by column count
   - [x] Container
-  - [ ] Header/footer
+  - [x] Header/footer
   - [ ] grid stack
   - [ ] grid masonry
   - [ ] vertical center

yarn.lock

@@ -10042,6 +10042,11 @@ style-loader@^0.21.0:
     loader-utils "^1.1.0"
     schema-utils "^0.4.5"
 
+style-object-to-css-string@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/style-object-to-css-string/-/style-object-to-css-string-1.0.1.tgz#ef47ed3e47417189b3ea19604a3599f9310d743a"
+  integrity sha512-ci7tySCofUqq86WziXoEsIE/aGZ2rkw7mmz6Afklhbmk7i05Z1d8hSUaJMUWUOJPbsvK+7TW5ulklZm55/S44Q==
+
 style-to-object@0.2.3, style-to-object@^0.2.1, style-to-object@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.2.3.tgz#afcf42bc03846b1e311880c55632a26ad2780bcb"