Experimental WIP: strict-ui

packages/css/package.json

@@ -17,6 +17,6 @@
     "access": "public"
   },
   "dependencies": {
-    "csstype": "^2.5.7"
+    "csstype": "^2.6.10"
   }
 }

packages/css/src/index.ts

@@ -29,7 +29,7 @@ const defaultTheme = {
   fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
 }
 
-const aliases = {
+export const aliases = {
   bg: 'backgroundColor',
   m: 'margin',
   mt: 'marginTop',
@@ -195,7 +195,7 @@ const positiveOrNegative = (scale: object, value: string | number) => {
   return Number(n) * -1
 }
 
-const transforms = [
+export const transforms = [
   'margin',
   'marginTop',
   'marginRight',

packages/strict-ui/README.md

@@ -0,0 +1,2 @@
+
+# `strict-ui`

packages/strict-ui/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "strict-ui",
+  "version": "0.1.3",
+  "source": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "prepare": "microbundle --no-compress",
+    "watch": "microbundle watch --no-compress"
+  },
+  "author": "Max Stoiber",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@theme-ui/components": ">= 0.4.0-alpha.0",
+    "@theme-ui/css": ">= 0.4.0-alpha.0",
+    "@types/reflexbox": "^4.0.0",
+    "emotion": "^10.0.27",
+    "reflexbox": "^4.0.6",
+    "theme-ui": ">= 0.4.0-alpha.0"
+  }
+}

packages/strict-ui/src/Flex.ts

@@ -0,0 +1,36 @@
+/* @jsx jsx */
+import React from 'react'
+import { jsx } from 'theme-ui'
+import { Flex as Reflex, BoxProps } from 'reflexbox'
+
+export const Flex = (
+  props: BoxProps & {
+    gap?: number
+    children: React.ReactNode
+  }
+) => {
+  let { children, ...rest } = props
+
+  if (typeof props.gap === 'number' && props.gap !== 0) {
+    children = React.Children.map(children, (child, index) => {
+      if (!child) return child
+
+      return jsx(
+        'div',
+        {
+          sx:
+            index !== 0
+              ? {
+                  [props.flexDirection === 'column'
+                    ? 'marginTop'
+                    : 'marginLeft']: props.gap,
+                }
+              : {},
+        },
+        child
+      )
+    })
+  }
+
+  return jsx(Reflex, rest, children)
+}

packages/strict-ui/src/css.ts

@@ -0,0 +1,107 @@
+import { get } from '@theme-ui/css'
+
+/**
+ *
+ * COPIED FROM @theme-ui/css UNTIL EXPORTS ARE MERGED + PUBLISHED
+ */
+export const aliases = {
+  bg: 'backgroundColor',
+  m: 'margin',
+  mt: 'marginTop',
+  mr: 'marginRight',
+  mb: 'marginBottom',
+  ml: 'marginLeft',
+  mx: 'marginX',
+  my: 'marginY',
+  p: 'padding',
+  pt: 'paddingTop',
+  pr: 'paddingRight',
+  pb: 'paddingBottom',
+  pl: 'paddingLeft',
+  px: 'paddingX',
+  py: 'paddingY',
+}
+
+export const positiveOrNegative = (scale: object, value: string | number) => {
+  if (typeof value !== 'number' || value >= 0) {
+    return get(scale, value, value)
+  }
+  const absolute = Math.abs(value)
+  const n = get(scale, absolute, absolute)
+  if (typeof n === 'string') return '-' + n
+  return Number(n) * -1
+}
+
+export const scales = {
+  color: 'colors',
+  backgroundColor: 'colors',
+  borderColor: 'colors',
+  margin: 'space',
+  marginTop: 'space',
+  marginRight: 'space',
+  marginBottom: 'space',
+  marginLeft: 'space',
+  marginX: 'space',
+  marginY: 'space',
+  padding: 'space',
+  paddingTop: 'space',
+  paddingRight: 'space',
+  paddingBottom: 'space',
+  paddingLeft: 'space',
+  paddingX: 'space',
+  paddingY: 'space',
+  top: 'space',
+  right: 'space',
+  bottom: 'space',
+  left: 'space',
+  gridGap: 'space',
+  gridColumnGap: 'space',
+  gridRowGap: 'space',
+  gap: 'space',
+  columnGap: 'space',
+  rowGap: 'space',
+  fontFamily: 'fonts',
+  fontSize: 'fontSizes',
+  fontWeight: 'fontWeights',
+  lineHeight: 'lineHeights',
+  letterSpacing: 'letterSpacings',
+  border: 'borders',
+  borderTop: 'borders',
+  borderRight: 'borders',
+  borderBottom: 'borders',
+  borderLeft: 'borders',
+  borderWidth: 'borderWidths',
+  borderStyle: 'borderStyles',
+  borderRadius: 'radii',
+  borderTopRightRadius: 'radii',
+  borderTopLeftRadius: 'radii',
+  borderBottomRightRadius: 'radii',
+  borderBottomLeftRadius: 'radii',
+  borderTopWidth: 'borderWidths',
+  borderTopColor: 'colors',
+  borderTopStyle: 'borderStyles',
+  borderBottomWidth: 'borderWidths',
+  borderBottomColor: 'colors',
+  borderBottomStyle: 'borderStyles',
+  borderLeftWidth: 'borderWidths',
+  borderLeftColor: 'colors',
+  borderLeftStyle: 'borderStyles',
+  borderRightWidth: 'borderWidths',
+  borderRightColor: 'colors',
+  borderRightStyle: 'borderStyles',
+  outlineColor: 'colors',
+  boxShadow: 'shadows',
+  textShadow: 'shadows',
+  zIndex: 'zIndices',
+  width: 'sizes',
+  minWidth: 'sizes',
+  maxWidth: 'sizes',
+  height: 'sizes',
+  minHeight: 'sizes',
+  maxHeight: 'sizes',
+  flexBasis: 'sizes',
+  size: 'sizes',
+  // svg
+  fill: 'colors',
+  stroke: 'colors',
+}

packages/strict-ui/src/index.ts

@@ -0,0 +1,112 @@
+import { jsx as themeuijsx } from 'theme-ui'
+import { get } from '@theme-ui/css'
+import { scales, aliases } from './css'
+// Always inject the CSS reset. You should not be able to use strict-ui without it.
+import './sanitize.css'
+
+export { ThemeProvider, useThemeUI as useStrictUI } from 'theme-ui'
+export { Grid } from '@theme-ui/components'
+export * from './Flex'
+
+export const jsx = (type, props, ...children) => {
+  if (props && props.css) throw new Error('Using the `css` prop is disallowed.')
+
+  if (process.env.NODE_ENV !== 'production' && props && props.sx) {
+    const filteredCSSProps = [
+      // General
+      'box-sizing',
+      'float',
+      'margin',
+      'margin-top',
+      'margin-left',
+      'margin-right',
+      'margin-bottom',
+      'margin-x',
+      'margin-y',
+      'display', // TBD!
+      // Flexbox
+      'justify-content',
+      'align-items',
+      'order',
+      'flex-direction',
+      'flex-grow',
+      'flex-wrap',
+      'flex-shrink',
+      'flex-basis',
+      'flex-flow',
+      'flex',
+      'align-self',
+      'align-content',
+      // Grid
+      'grid-column-start',
+      'grid-column-end',
+      'grid-row-start',
+      'grid-row-end',
+      'grid-template-columns',
+      'grid-template-rows',
+      'grid-column',
+      'grid-row',
+      'grid-area',
+      'grid-template-areas',
+      'justify-self',
+      'grid-template',
+      'grid-column-gap',
+      'grid-row-gap',
+      'grid-gap',
+      'place-self',
+      'place-items',
+      'place-content',
+      'grid-auto-columns',
+      'grid-auto-rows',
+      'grid-auto-flow',
+      'grid',
+    ]
+
+    const dashize = (str: string) => {
+      return str.replace(/(\w)([A-Z])/g, (word, first, second) => {
+        return `${first}-${second.toLowerCase()}`
+      })
+    }
+
+    for (const prop of Object.keys(props.sx)) {
+      const alias = prop in aliases ? aliases[prop] : prop
+
+      // Filter certain CSS properties like e.g. margin
+      if (
+        filteredCSSProps.indexOf(dashize(prop)) > -1 ||
+        (aliases[prop] &&
+          (filteredCSSProps.indexOf(aliases[prop]) > -1 ||
+            filteredCSSProps.indexOf(dashize(aliases[prop])) > -1))
+      )
+        throw new Error(`Cannot specify disallowed CSS property "${prop}".`)
+
+      // Disallow non theme-based values for properties that are in the theme
+      if (scales[alias]) {
+        const value = props.sx[prop]
+        props.sx[prop] = (theme) => {
+          const scale = get(theme, scales[alias])
+          if (!scale)
+            throw new Error(
+              `Cannot specify "${prop}" because no "${scales[alias]}" scale is defined in the theme.`
+            )
+
+          const valuesToCheck = Array.isArray(value) ? value : [value]
+
+          valuesToCheck.forEach((toCheck) => {
+            const scaleValue = get(scale, toCheck)
+
+            if (!scaleValue) {
+              throw new Error(
+                `Cannot use a non-theme value "${toCheck}" for "${prop}". Please either use a theme value or add a new value to the theme.`
+              )
+            }
+          })
+
+          return value
+        }
+      }
+    }
+  }
+
+  return themeuijsx(type, props, ...children)
+}