From 64eab4e1013a8906c93edcbb7593e0eba48e86ff Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Mon, 24 Feb 2020 15:11:35 -0800 Subject: [PATCH 01/48] Experimental WIP: strict-ui --- packages/strict-ui/README.md | 2 ++ packages/strict-ui/package.json | 21 +++++++++++ packages/strict-ui/src/index.ts | 60 ++++++++++++++++++++++++++++++++ packages/strict-ui/test/index.ts | 13 +++++++ packages/strict-ui/tsconfig.json | 5 +++ 5 files changed, 101 insertions(+) create mode 100644 packages/strict-ui/README.md create mode 100644 packages/strict-ui/package.json create mode 100644 packages/strict-ui/src/index.ts create mode 100644 packages/strict-ui/test/index.ts create mode 100644 packages/strict-ui/tsconfig.json diff --git a/packages/strict-ui/README.md b/packages/strict-ui/README.md new file mode 100644 index 000000000..9dddd0e2e --- /dev/null +++ b/packages/strict-ui/README.md @@ -0,0 +1,2 @@ + +# `strict-ui` diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json new file mode 100644 index 000000000..fc7dc6008 --- /dev/null +++ b/packages/strict-ui/package.json @@ -0,0 +1,21 @@ +{ + "name": "strict-ui", + "version": "0.0.1", + "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": "0.3.x" + } +} diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts new file mode 100644 index 000000000..cd560fd81 --- /dev/null +++ b/packages/strict-ui/src/index.ts @@ -0,0 +1,60 @@ +import { jsx as themeuijsx } from 'theme-ui' + +const filteredCSSProps = [ + // General + 'box-sizing', + 'float', + 'margin', + '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', +] + +export * from 'theme-ui' + +export const jsx = (type, props, ...children) => { + if (props.css) throw new Error('Using the `css` prop is disallowed.') + + if (props.sx) { + for (const prop of Object.keys(props.sx)) { + if (filteredCSSProps.indexOf(prop) > -1) + throw new Error(`Cannot specify CSS property "${prop}".`) + } + } + + return themeuijsx(type, props, ...children) +} diff --git a/packages/strict-ui/test/index.ts b/packages/strict-ui/test/index.ts new file mode 100644 index 000000000..c236f0269 --- /dev/null +++ b/packages/strict-ui/test/index.ts @@ -0,0 +1,13 @@ +import { jsx } from '../src/index' + +test('it throws an error when an invalid CSS property is specified', () => { + expect(() => + jsx('div', { + sx: { + flex: 1, + }, + }) + ).toThrowErrorMatchingInlineSnapshot( + `"Cannot specify CSS property \\"flex\\"."` + ) +}) diff --git a/packages/strict-ui/tsconfig.json b/packages/strict-ui/tsconfig.json new file mode 100644 index 000000000..fe80b9156 --- /dev/null +++ b/packages/strict-ui/tsconfig.json @@ -0,0 +1,5 @@ +{ + "extends": "../core/tsconfig.json", + "compilerOptions": {}, + "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"] +} From ece7a337da105eb14fa7160177495bd43b578419 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Mon, 2 Mar 2020 12:02:54 +1100 Subject: [PATCH 02/48] Add support for camelCase props --- packages/strict-ui/src/index.ts | 15 ++++++++++++--- packages/strict-ui/test/index.ts | 24 ++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 3 deletions(-) diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts index cd560fd81..51207027b 100644 --- a/packages/strict-ui/src/index.ts +++ b/packages/strict-ui/src/index.ts @@ -44,14 +44,23 @@ const filteredCSSProps = [ 'grid', ] -export * from 'theme-ui' +export { Grid } from 'theme-ui' + +function dashize(str: string) { + return str.replace(/(\w)([A-Z])/g, (word, first, second) => { + return `${first}-${second.toLowerCase()}` + }) +} export const jsx = (type, props, ...children) => { if (props.css) throw new Error('Using the `css` prop is disallowed.') - if (props.sx) { + if (process.env.NODE_ENV !== 'production' && props.sx) { for (const prop of Object.keys(props.sx)) { - if (filteredCSSProps.indexOf(prop) > -1) + if ( + filteredCSSProps.indexOf(prop) > -1 || + filteredCSSProps.indexOf(dashize(prop)) > -1 + ) throw new Error(`Cannot specify CSS property "${prop}".`) } } diff --git a/packages/strict-ui/test/index.ts b/packages/strict-ui/test/index.ts index c236f0269..4bbc9fb8b 100644 --- a/packages/strict-ui/test/index.ts +++ b/packages/strict-ui/test/index.ts @@ -11,3 +11,27 @@ test('it throws an error when an invalid CSS property is specified', () => { `"Cannot specify CSS property \\"flex\\"."` ) }) + +test('it handles dash-case', () => { + expect(() => + jsx('div', { + sx: { + 'justify-content': 1, + }, + }) + ).toThrowErrorMatchingInlineSnapshot( + `"Cannot specify CSS property \\"justify-content\\"."` + ) +}) + +test('it handles camelCase', () => { + expect(() => + jsx('div', { + sx: { + justifyContent: 1, + }, + }) + ).toThrowErrorMatchingInlineSnapshot( + `"Cannot specify CSS property \\"justifyContent\\"."` + ) +}) From 004fba15aff7f33c8bfb712234dd5a6b6e9248d5 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Mon, 2 Mar 2020 12:14:26 +1100 Subject: [PATCH 03/48] v0.0.2 --- packages/strict-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index fc7dc6008..e36ddbee2 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,6 +1,6 @@ { "name": "strict-ui", - "version": "0.0.1", + "version": "0.0.2", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", From ff34efd9dc938b87b6303549531d5520e4bdcadc Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Mon, 2 Mar 2020 16:22:04 +1100 Subject: [PATCH 04/48] Disallow non theme-based values for properties that are in the theme --- packages/css/src/index.ts | 4 ++-- packages/strict-ui/package.json | 3 ++- packages/strict-ui/src/index.ts | 32 ++++++++++++++++++++++++++--- packages/strict-ui/test/index.ts | 35 +++++++++++++++++++++++--------- 4 files changed, 58 insertions(+), 16 deletions(-) diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts index b24d0d30c..7a3fd9331 100644 --- a/packages/css/src/index.ts +++ b/packages/css/src/index.ts @@ -25,7 +25,7 @@ const defaultTheme = { fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72], } -const aliases = { +export const aliases = { bg: 'backgroundColor', m: 'margin', mt: 'marginTop', @@ -137,7 +137,7 @@ const positiveOrNegative = (scale: object, value: string | number) => { return Number(n) * -1 } -const transforms = [ +export const transforms = [ 'margin', 'marginTop', 'marginRight', diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index e36ddbee2..b96843054 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -16,6 +16,7 @@ "access": "public" }, "dependencies": { - "theme-ui": "0.3.x" + "theme-ui": "0.3.x", + "@theme-ui/css": "0.3.x" } } diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts index 51207027b..ee6ef6d5b 100644 --- a/packages/strict-ui/src/index.ts +++ b/packages/strict-ui/src/index.ts @@ -1,10 +1,15 @@ -import { jsx as themeuijsx } from 'theme-ui' +import { jsx as themeuijsx, useThemeUI } from 'theme-ui' +import { scales, transforms, aliases, get } from '@theme-ui/css' const filteredCSSProps = [ // General 'box-sizing', 'float', 'margin', + 'margin-top', + 'margin-left', + 'margin-right', + 'margin-bottom', 'display', // TBD! // Flexbox 'justify-content', @@ -57,11 +62,32 @@ export const jsx = (type, props, ...children) => { if (process.env.NODE_ENV !== 'production' && props.sx) { 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(prop) > -1 || - filteredCSSProps.indexOf(dashize(prop)) > -1 + filteredCSSProps.indexOf(dashize(prop)) > -1 || + filteredCSSProps.indexOf(aliases[prop]) > -1 ) throw new Error(`Cannot specify 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]) + const transform = get(transforms, prop, get) + const transformedValue = transform(scale, value, value) + + if (transformedValue === value) { + throw new Error( + `Cannot use a non-theme value "${value}" for "${prop}". Please either use a theme value or add a new value to the theme.` + ) + } + + return transformedValue + } + } } } diff --git a/packages/strict-ui/test/index.ts b/packages/strict-ui/test/index.ts index 4bbc9fb8b..0cde9fd59 100644 --- a/packages/strict-ui/test/index.ts +++ b/packages/strict-ui/test/index.ts @@ -1,3 +1,4 @@ +import { renderToString } from 'react-dom/server' import { jsx } from '../src/index' test('it throws an error when an invalid CSS property is specified', () => { @@ -12,26 +13,40 @@ test('it throws an error when an invalid CSS property is specified', () => { ) }) -test('it handles dash-case', () => { +test('it handles camelCase', () => { expect(() => jsx('div', { sx: { - 'justify-content': 1, + justifyContent: 1, }, }) ).toThrowErrorMatchingInlineSnapshot( - `"Cannot specify CSS property \\"justify-content\\"."` + `"Cannot specify CSS property \\"justifyContent\\"."` ) }) -test('it handles camelCase', () => { +test('it disallows non-theme values for padding', () => { expect(() => - jsx('div', { - sx: { - justifyContent: 1, - }, - }) + renderToString( + jsx('div', { + sx: { + padding: '2px', + }, + }) + ) ).toThrowErrorMatchingInlineSnapshot( - `"Cannot specify CSS property \\"justifyContent\\"."` + `"Cannot use a non-theme value \\"2px\\" for \\"padding\\". Please either use a theme value or add a new value to the theme."` ) }) + +test('it allows theme values for padding', () => { + expect(() => + renderToString( + jsx('div', { + sx: { + padding: 3, + }, + }) + ) + ).not.toThrowError() +}) From d18cb232df4a062d2825b1e76252aa071d5815fa Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Mon, 2 Mar 2020 16:25:31 +1100 Subject: [PATCH 05/48] Slight test suite cleanup --- packages/strict-ui/src/index.ts | 2 +- packages/strict-ui/test/index.ts | 39 ++++++++++++++------------------ 2 files changed, 18 insertions(+), 23 deletions(-) diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts index ee6ef6d5b..7b4677894 100644 --- a/packages/strict-ui/src/index.ts +++ b/packages/strict-ui/src/index.ts @@ -1,4 +1,4 @@ -import { jsx as themeuijsx, useThemeUI } from 'theme-ui' +import { jsx as themeuijsx } from 'theme-ui' import { scales, transforms, aliases, get } from '@theme-ui/css' const filteredCSSProps = [ diff --git a/packages/strict-ui/test/index.ts b/packages/strict-ui/test/index.ts index 0cde9fd59..e9f1f7ef2 100644 --- a/packages/strict-ui/test/index.ts +++ b/packages/strict-ui/test/index.ts @@ -1,12 +1,17 @@ import { renderToString } from 'react-dom/server' import { jsx } from '../src/index' +const render = (sx: Object) => + renderToString( + jsx('div', { + sx, + }) + ) + test('it throws an error when an invalid CSS property is specified', () => { expect(() => - jsx('div', { - sx: { - flex: 1, - }, + render({ + flex: 1, }) ).toThrowErrorMatchingInlineSnapshot( `"Cannot specify CSS property \\"flex\\"."` @@ -15,10 +20,8 @@ test('it throws an error when an invalid CSS property is specified', () => { test('it handles camelCase', () => { expect(() => - jsx('div', { - sx: { - justifyContent: 1, - }, + render({ + justifyContent: 1, }) ).toThrowErrorMatchingInlineSnapshot( `"Cannot specify CSS property \\"justifyContent\\"."` @@ -27,13 +30,9 @@ test('it handles camelCase', () => { test('it disallows non-theme values for padding', () => { expect(() => - renderToString( - jsx('div', { - sx: { - padding: '2px', - }, - }) - ) + render({ + padding: '2px', + }) ).toThrowErrorMatchingInlineSnapshot( `"Cannot use a non-theme value \\"2px\\" for \\"padding\\". Please either use a theme value or add a new value to the theme."` ) @@ -41,12 +40,8 @@ test('it disallows non-theme values for padding', () => { test('it allows theme values for padding', () => { expect(() => - renderToString( - jsx('div', { - sx: { - padding: 3, - }, - }) - ) + render({ + padding: 3, + }) ).not.toThrowError() }) From 3af8f7f35122e2054b3832195964332ed4665b41 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Mon, 2 Mar 2020 16:37:28 +1100 Subject: [PATCH 06/48] Publish 0.0.3 to npm --- packages/strict-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index b96843054..d2a5440c7 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,6 +1,6 @@ { "name": "strict-ui", - "version": "0.0.2", + "version": "0.0.3", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", From 734ed42214816b4c7743013b9166c9cf28ca455e Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Mon, 2 Mar 2020 17:30:12 +1100 Subject: [PATCH 07/48] Fix publish usage for now --- packages/strict-ui/package.json | 3 +- packages/strict-ui/src/index.ts | 51 ++++++++++++++++++++++++++++++++- 2 files changed, 51 insertions(+), 3 deletions(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index d2a5440c7..22a9f9030 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,13 +1,12 @@ { "name": "strict-ui", - "version": "0.0.3", + "version": "0.0.4", "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", diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts index 7b4677894..7a310763e 100644 --- a/packages/strict-ui/src/index.ts +++ b/packages/strict-ui/src/index.ts @@ -1,5 +1,54 @@ import { jsx as themeuijsx } from 'theme-ui' -import { scales, transforms, aliases, get } from '@theme-ui/css' +import { scales, get } from '@theme-ui/css' + +// COPIED FROM @theme-ui/css UNTIL EXPORTS ARE MERGED + PUBLISHED +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', +} + +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 +} + +const transforms = [ + 'margin', + 'marginTop', + 'marginRight', + 'marginBottom', + 'marginLeft', + 'marginX', + 'marginY', + 'top', + 'bottom', + 'left', + 'right', +].reduce( + (acc, curr) => ({ + ...acc, + [curr]: positiveOrNegative, + }), + {} +) const filteredCSSProps = [ // General From 1083fb3c50582afc9bdd7e0cf4a2fa6234afd77f Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 3 Mar 2020 12:37:53 +1100 Subject: [PATCH 08/48] Copy all the unexported stuff from @theme-ui/css --- packages/strict-ui/src/css.ts | 127 ++++++++++++++++++++++++++++++++ packages/strict-ui/src/index.ts | 52 +------------ 2 files changed, 129 insertions(+), 50 deletions(-) create mode 100644 packages/strict-ui/src/css.ts diff --git a/packages/strict-ui/src/css.ts b/packages/strict-ui/src/css.ts new file mode 100644 index 000000000..fc8336c01 --- /dev/null +++ b/packages/strict-ui/src/css.ts @@ -0,0 +1,127 @@ +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 transforms = [ + 'margin', + 'marginTop', + 'marginRight', + 'marginBottom', + 'marginLeft', + 'marginX', + 'marginY', + 'top', + 'bottom', + 'left', + 'right', +].reduce( + (acc, curr) => ({ + ...acc, + [curr]: positiveOrNegative, + }), + {} +) + +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', +} diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts index 7a310763e..e98e01efc 100644 --- a/packages/strict-ui/src/index.ts +++ b/packages/strict-ui/src/index.ts @@ -1,54 +1,6 @@ import { jsx as themeuijsx } from 'theme-ui' -import { scales, get } from '@theme-ui/css' - -// COPIED FROM @theme-ui/css UNTIL EXPORTS ARE MERGED + PUBLISHED -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', -} - -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 -} - -const transforms = [ - 'margin', - 'marginTop', - 'marginRight', - 'marginBottom', - 'marginLeft', - 'marginX', - 'marginY', - 'top', - 'bottom', - 'left', - 'right', -].reduce( - (acc, curr) => ({ - ...acc, - [curr]: positiveOrNegative, - }), - {} -) +import { get } from '@theme-ui/css' +import { scales, aliases, transforms } from './css' const filteredCSSProps = [ // General From 3157517be5304dded6162ffeb47b42c8f52cfeaa Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 3 Mar 2020 12:39:01 +1100 Subject: [PATCH 09/48] 0.0.5 --- packages/strict-ui/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index 22a9f9030..2563a07af 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,12 +1,13 @@ { "name": "strict-ui", - "version": "0.0.4", + "version": "0.0.5", "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", From cea48bb9f502b82f32352304c758eb1a357888cc Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 3 Mar 2020 13:58:47 +1100 Subject: [PATCH 10/48] Add some more missing exports --- packages/strict-ui/package.json | 5 +- packages/strict-ui/src/index.ts | 8 +- packages/strict-ui/src/sanitize.css.ts | 203 +++++++++++++++++++++++++ yarn.lock | 2 +- 4 files changed, 213 insertions(+), 5 deletions(-) create mode 100644 packages/strict-ui/src/sanitize.css.ts diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index 2563a07af..130671fc5 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -16,7 +16,8 @@ "access": "public" }, "dependencies": { - "theme-ui": "0.3.x", - "@theme-ui/css": "0.3.x" + "@emotion/core": "10.0.22", + "@theme-ui/css": "0.3.x", + "theme-ui": "0.3.x" } } diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts index e98e01efc..c1d07f438 100644 --- a/packages/strict-ui/src/index.ts +++ b/packages/strict-ui/src/index.ts @@ -1,6 +1,10 @@ import { jsx as themeuijsx } from 'theme-ui' import { get } from '@theme-ui/css' +import { Global } from '@emotion/core' import { scales, aliases, transforms } from './css' +import sanitize from './sanitize.css' + +export { Grid, ThemeProvider, useThemeUI } from 'theme-ui' const filteredCSSProps = [ // General @@ -50,14 +54,14 @@ const filteredCSSProps = [ 'grid', ] -export { Grid } from 'theme-ui' - function dashize(str: string) { return str.replace(/(\w)([A-Z])/g, (word, first, second) => { return `${first}-${second.toLowerCase()}` }) } +export const CSSReset = () => jsx(Global, { styles: sanitize }) + export const jsx = (type, props, ...children) => { if (props.css) throw new Error('Using the `css` prop is disallowed.') diff --git a/packages/strict-ui/src/sanitize.css.ts b/packages/strict-ui/src/sanitize.css.ts new file mode 100644 index 000000000..a5fc437e1 --- /dev/null +++ b/packages/strict-ui/src/sanitize.css.ts @@ -0,0 +1,203 @@ +import { css } from '@emotion/core' + +// Copied from https://cdnjs.cloudflare.com/ajax/libs/sanitize.css/2.0.0/sanitize.min.css +export default css` + /*! + * Sanitize 2.0.0 (http://git.io/sanitize) + * Licensed under the MIT License. + */ + + html { + font-family: sans-serif; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + } + body { + margin: 0; + } + article, + aside, + figcaption, + figure, + footer, + header, + legend, + nav, + section { + display: block; + } + audio, + canvas, + label, + video { + display: inline-block; + } + audio:not([controls]) { + display: none; + height: 0; + } + [hidden], + template { + display: none; + } + a { + background: 0 0; + } + hr { + height: 0; + -moz-box-sizing: content-box; + box-sizing: content-box; + } + h1 { + margin: 0.7em 0; + font-size: 2em; + } + b, + strong { + font-weight: 700; + } + small { + font-size: 85%; + } + sub, + sup { + position: relative; + font-size: 80%; + line-height: 0; + vertical-align: baseline; + } + sup { + top: -0.25em; + } + sub { + bottom: -0.25em; + } + dfn { + font-style: italic; + } + abbr[title] { + border-bottom: 1px dotted; + } + mark { + color: #000; + background: #ff0; + } + blockquote:before, + blockquote:after { + content: ''; + } + code, + kbd, + pre, + samp { + font-family: monospace; + } + pre { + overflow: auto; + word-break: break-all; + word-wrap: break-word; + white-space: pre-wrap; + } + audio, + canvas, + embed, + iframe, + img, + object, + svg, + video { + vertical-align: middle; + } + img { + height: auto; + max-width: 100%; + border: 0; + } + svg:not(:root) { + overflow: hidden; + } + figure { + margin: 1em 40px; + } + progress { + vertical-align: baseline; + } + button, + input, + optgroup, + select, + textarea { + margin: 0; + font: inherit; + color: inherit; + } + button, + select { + text-transform: none; + } + fieldset { + padding: 0; + margin: 0; + border: 0; + } + legend { + padding: 0; + border: 0; + } + input { + line-height: normal; + } + input[type='search'] { + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-appearance: textfield; + } + input[type='number']::-webkit-inner-spin-button, + input[type='number']::-webkit-outer-spin-button { + height: auto; + } + input[type='search']::-webkit-search-cancel-button, + input[type='search']::-webkit-search-decoration { + -webkit-appearance: none; + } + button, + html input[type='button'], + input[type='reset'], + input[type='submit'] { + cursor: pointer; + -webkit-appearance: button; + } + button[disabled], + html input[disabled] { + cursor: default; + } + input::-moz-placeholder { + opacity: 1; + } + button::-moz-focus-inner, + input::-moz-focus-inner { + padding: 0; + border: 0; + } + input[type='checkbox'], + input[type='radio'] { + padding: 0; + margin: 4px 0 0; + line-height: normal; + box-sizing: border-box; + } + textarea { + padding: 0; + vertical-align: top; + } + button { + overflow: visible; + } + table { + max-width: 100%; + border-collapse: collapse; + } + th { + text-align: left; + } +` diff --git a/yarn.lock b/yarn.lock index 2ae0ddd2a..b5783fa9f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1424,7 +1424,7 @@ "@emotion/utils" "0.11.2" "@emotion/weak-memoize" "0.2.4" -"@emotion/core@^10.0.0", "@emotion/core@^10.0.10", "@emotion/core@^10.0.14", "@emotion/core@^10.0.15", "@emotion/core@^10.0.16", "@emotion/core@^10.0.17": +"@emotion/core@10.0.22", "@emotion/core@^10.0.0", "@emotion/core@^10.0.10", "@emotion/core@^10.0.14", "@emotion/core@^10.0.15", "@emotion/core@^10.0.16", "@emotion/core@^10.0.17": version "10.0.22" resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.22.tgz#2ac7bcf9b99a1979ab5b0a876fbf37ab0688b177" integrity sha512-7eoP6KQVUyOjAkE6y4fdlxbZRA4ILs7dqkkm6oZUJmihtHv0UBq98VgPirq9T8F9K2gKu0J/au/TpKryKMinaA== From e55f0674dbba1effa209db2b09a3c667b8ab99d1 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 3 Mar 2020 13:59:23 +1100 Subject: [PATCH 11/48] useStrictUI --- packages/strict-ui/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts index c1d07f438..1c26716fa 100644 --- a/packages/strict-ui/src/index.ts +++ b/packages/strict-ui/src/index.ts @@ -4,7 +4,7 @@ import { Global } from '@emotion/core' import { scales, aliases, transforms } from './css' import sanitize from './sanitize.css' -export { Grid, ThemeProvider, useThemeUI } from 'theme-ui' +export { Grid, ThemeProvider, useThemeUI as useStrictUI } from 'theme-ui' const filteredCSSProps = [ // General From 54c253bc86e6ca2bec02a31fdd0c702cef5840f2 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 3 Mar 2020 14:11:41 +1100 Subject: [PATCH 12/48] 0.0.6 --- packages/strict-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index 130671fc5..ab0b0d3cc 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,6 +1,6 @@ { "name": "strict-ui", - "version": "0.0.5", + "version": "0.0.6", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", From eac4d7671b1b2c361d432417ea41e3f975ee76a5 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 3 Mar 2020 14:12:03 +1100 Subject: [PATCH 13/48] Some more custom reset stuff --- packages/strict-ui/src/sanitize.css.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/strict-ui/src/sanitize.css.ts b/packages/strict-ui/src/sanitize.css.ts index a5fc437e1..62bea18b4 100644 --- a/packages/strict-ui/src/sanitize.css.ts +++ b/packages/strict-ui/src/sanitize.css.ts @@ -200,4 +200,16 @@ export default css` th { text-align: left; } + + /* + * Custom stuff + */ + *, + *:before, + *:after { + box-sizing: border-box; + } + img { + display: inline-block; + } ` From 80bc32f6e2116ba52daaf5feab620149bfc4269d Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 3 Mar 2020 14:15:20 +1100 Subject: [PATCH 14/48] 0.0.7 --- packages/strict-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index ab0b0d3cc..f60f33ac8 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,6 +1,6 @@ { "name": "strict-ui", - "version": "0.0.6", + "version": "0.0.7", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", From 07621279a95331016ebc36293f80cf441754bccc Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 3 Mar 2020 14:32:02 +1100 Subject: [PATCH 15/48] Also export --- packages/strict-ui/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts index 1c26716fa..dac10cd33 100644 --- a/packages/strict-ui/src/index.ts +++ b/packages/strict-ui/src/index.ts @@ -4,7 +4,7 @@ import { Global } from '@emotion/core' import { scales, aliases, transforms } from './css' import sanitize from './sanitize.css' -export { Grid, ThemeProvider, useThemeUI as useStrictUI } from 'theme-ui' +export { Grid, Flex, ThemeProvider, useThemeUI as useStrictUI } from 'theme-ui' const filteredCSSProps = [ // General From 4649a67f8b34946927fab02b88733ca899650227 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 3 Mar 2020 15:06:59 +1100 Subject: [PATCH 16/48] Force CSS reset usage --- packages/strict-ui/package.json | 4 +-- packages/strict-ui/src/index.ts | 6 ++-- packages/strict-ui/src/sanitize.css.ts | 9 +++--- yarn.lock | 45 +++++++++++++++++++++++++- 4 files changed, 52 insertions(+), 12 deletions(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index f60f33ac8..4540962c7 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,6 +1,6 @@ { "name": "strict-ui", - "version": "0.0.7", + "version": "0.0.8", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", @@ -16,8 +16,8 @@ "access": "public" }, "dependencies": { - "@emotion/core": "10.0.22", "@theme-ui/css": "0.3.x", + "emotion": "^10.0.27", "theme-ui": "0.3.x" } } diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts index dac10cd33..400226761 100644 --- a/packages/strict-ui/src/index.ts +++ b/packages/strict-ui/src/index.ts @@ -1,8 +1,8 @@ import { jsx as themeuijsx } from 'theme-ui' import { get } from '@theme-ui/css' -import { Global } from '@emotion/core' import { scales, aliases, transforms } from './css' -import sanitize from './sanitize.css' +// Always inject the CSS reset. You should not be able to use strict-ui without it. +import './sanitize.css' export { Grid, Flex, ThemeProvider, useThemeUI as useStrictUI } from 'theme-ui' @@ -60,8 +60,6 @@ function dashize(str: string) { }) } -export const CSSReset = () => jsx(Global, { styles: sanitize }) - export const jsx = (type, props, ...children) => { if (props.css) throw new Error('Using the `css` prop is disallowed.') diff --git a/packages/strict-ui/src/sanitize.css.ts b/packages/strict-ui/src/sanitize.css.ts index 62bea18b4..d88215bd5 100644 --- a/packages/strict-ui/src/sanitize.css.ts +++ b/packages/strict-ui/src/sanitize.css.ts @@ -1,12 +1,11 @@ -import { css } from '@emotion/core' +import { injectGlobal } from 'emotion' -// Copied from https://cdnjs.cloudflare.com/ajax/libs/sanitize.css/2.0.0/sanitize.min.css -export default css` - /*! +/*! * Sanitize 2.0.0 (http://git.io/sanitize) * Licensed under the MIT License. */ - +// Copied from https://cdnjs.cloudflare.com/ajax/libs/sanitize.css/2.0.0/sanitize.min.css +injectGlobal` html { font-family: sans-serif; -webkit-text-size-adjust: 100%; diff --git a/yarn.lock b/yarn.lock index b5783fa9f..77d36d40d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1424,7 +1424,17 @@ "@emotion/utils" "0.11.2" "@emotion/weak-memoize" "0.2.4" -"@emotion/core@10.0.22", "@emotion/core@^10.0.0", "@emotion/core@^10.0.10", "@emotion/core@^10.0.14", "@emotion/core@^10.0.15", "@emotion/core@^10.0.16", "@emotion/core@^10.0.17": +"@emotion/cache@^10.0.27": + version "10.0.29" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0" + integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ== + dependencies: + "@emotion/sheet" "0.9.4" + "@emotion/stylis" "0.8.5" + "@emotion/utils" "0.11.3" + "@emotion/weak-memoize" "0.2.5" + +"@emotion/core@^10.0.0", "@emotion/core@^10.0.10", "@emotion/core@^10.0.14", "@emotion/core@^10.0.15", "@emotion/core@^10.0.16", "@emotion/core@^10.0.17": version "10.0.22" resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.22.tgz#2ac7bcf9b99a1979ab5b0a876fbf37ab0688b177" integrity sha512-7eoP6KQVUyOjAkE6y4fdlxbZRA4ILs7dqkkm6oZUJmihtHv0UBq98VgPirq9T8F9K2gKu0J/au/TpKryKMinaA== @@ -1499,6 +1509,11 @@ resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.3.tgz#689f135ecf87d3c650ed0c4f5ddcbe579883564a" integrity sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A== +"@emotion/sheet@0.9.4": + version "0.9.4" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5" + integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA== + "@emotion/styled-base@^10.0.27": version "10.0.27" resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.27.tgz#d9efa307ae4e938fcc4d0596b40b7e8bc10f7c7c" @@ -1522,6 +1537,11 @@ resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.4.tgz#6c51afdf1dd0d73666ba09d2eb6c25c220d6fe4c" integrity sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ== +"@emotion/stylis@0.8.5": + version "0.8.5" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" + integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== + "@emotion/unitless@0.7.4": version "0.7.4" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677" @@ -1547,6 +1567,11 @@ resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz#622a72bebd1e3f48d921563b4b60a762295a81fc" integrity sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA== +"@emotion/weak-memoize@0.2.5": + version "0.2.5" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" + integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== + "@evocateur/libnpmaccess@^3.1.2": version "3.1.2" resolved "https://registry.yarnpkg.com/@evocateur/libnpmaccess/-/libnpmaccess-3.1.2.tgz#ecf7f6ce6b004e9f942b098d92200be4a4b1c845" @@ -7687,6 +7712,16 @@ create-ecdh@^4.0.0: bn.js "^4.1.0" elliptic "^6.0.0" +create-emotion@^10.0.27: + version "10.0.27" + resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.27.tgz#cb4fa2db750f6ca6f9a001a33fbf1f6c46789503" + integrity sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg== + dependencies: + "@emotion/cache" "^10.0.27" + "@emotion/serialize" "^0.11.15" + "@emotion/sheet" "0.9.4" + "@emotion/utils" "0.11.3" + create-error-class@^3.0.0, create-error-class@^3.0.1: version "3.0.2" resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6" @@ -9143,6 +9178,14 @@ emojis-list@^2.0.0: resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k= +emotion@^10.0.27: + version "10.0.27" + resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.27.tgz#f9ca5df98630980a23c819a56262560562e5d75e" + integrity sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g== + dependencies: + babel-plugin-emotion "^10.0.27" + create-emotion "^10.0.27" + enabled@1.0.x: version "1.0.2" resolved "https://registry.yarnpkg.com/enabled/-/enabled-1.0.2.tgz#965f6513d2c2d1c5f4652b64a2e3396467fc2f93" From 8857816fd32c0558fc84f073f4a04f2163df2989 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Wed, 4 Mar 2020 10:09:10 +1100 Subject: [PATCH 17/48] 0.0.9 --- packages/strict-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index 4540962c7..e7c3d8a1f 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,6 +1,6 @@ { "name": "strict-ui", - "version": "0.0.8", + "version": "0.0.9", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", From ae1831291c8fadad8568118a63ffc6d6b0aff077 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Wed, 4 Mar 2020 10:25:32 +1100 Subject: [PATCH 18/48] Add support for responsive arrays --- packages/strict-ui/src/index.ts | 20 ++++++++++++-------- packages/strict-ui/test/index.ts | 18 ++++++++++++++++++ 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts index 400226761..53ae0d828 100644 --- a/packages/strict-ui/src/index.ts +++ b/packages/strict-ui/src/index.ts @@ -79,16 +79,20 @@ export const jsx = (type, props, ...children) => { const value = props.sx[prop] props.sx[prop] = theme => { const scale = get(theme, scales[alias]) - const transform = get(transforms, prop, get) - const transformedValue = transform(scale, value, value) + const valuesToCheck = Array.isArray(value) ? value : [value] - if (transformedValue === value) { - throw new Error( - `Cannot use a non-theme value "${value}" for "${prop}". Please either use a theme value or add a new value to the theme.` - ) - } + valuesToCheck.forEach(toCheck => { + const transform = get(transforms, prop, get) + const transformedValue = transform(scale, toCheck, toCheck) - return transformedValue + if (transformedValue === toCheck) { + 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 } } } diff --git a/packages/strict-ui/test/index.ts b/packages/strict-ui/test/index.ts index e9f1f7ef2..56f92a593 100644 --- a/packages/strict-ui/test/index.ts +++ b/packages/strict-ui/test/index.ts @@ -45,3 +45,21 @@ test('it allows theme values for padding', () => { }) ).not.toThrowError() }) + +test('it passes valid responsive values', () => { + expect(() => + render({ + padding: [1, 2, 3], + }) + ).not.toThrowError() +}) + +test('it fails partially invalid responsive values', () => { + expect(() => + render({ + padding: [1, '3px', 3], + }) + ).toThrowErrorMatchingInlineSnapshot( + `"Cannot use a non-theme value \\"3px\\" for \\"padding\\". Please either use a theme value or add a new value to the theme."` + ) +}) From 1b9b3a1a574aaaf570e463d357941272135290ef Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Wed, 4 Mar 2020 10:29:07 +1100 Subject: [PATCH 19/48] Add support for blocking marginX and mx shorthands --- packages/strict-ui/src/index.ts | 116 ++++++++++++++++--------------- packages/strict-ui/test/index.ts | 24 ++++++- 2 files changed, 82 insertions(+), 58 deletions(-) diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts index 53ae0d828..a6b192c15 100644 --- a/packages/strict-ui/src/index.ts +++ b/packages/strict-ui/src/index.ts @@ -6,73 +6,77 @@ import './sanitize.css' export { Grid, Flex, ThemeProvider, useThemeUI as useStrictUI } from 'theme-ui' -const filteredCSSProps = [ - // General - 'box-sizing', - 'float', - 'margin', - 'margin-top', - 'margin-left', - 'margin-right', - 'margin-bottom', - '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', -] - -function dashize(str: string) { - return str.replace(/(\w)([A-Z])/g, (word, first, second) => { - return `${first}-${second.toLowerCase()}` - }) -} - export const jsx = (type, props, ...children) => { if (props.css) throw new Error('Using the `css` prop is disallowed.') if (process.env.NODE_ENV !== 'production' && 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 || - filteredCSSProps.indexOf(aliases[prop]) > -1 + (aliases[prop] && + (filteredCSSProps.indexOf(aliases[prop]) > -1 || + filteredCSSProps.indexOf(dashize(aliases[prop])) > -1)) ) - throw new Error(`Cannot specify CSS property "${prop}".`) + throw new Error(`Cannot specify disallowed CSS property "${prop}".`) // Disallow non theme-based values for properties that are in the theme if (scales[alias]) { diff --git a/packages/strict-ui/test/index.ts b/packages/strict-ui/test/index.ts index 56f92a593..0afe7fb73 100644 --- a/packages/strict-ui/test/index.ts +++ b/packages/strict-ui/test/index.ts @@ -14,7 +14,7 @@ test('it throws an error when an invalid CSS property is specified', () => { flex: 1, }) ).toThrowErrorMatchingInlineSnapshot( - `"Cannot specify CSS property \\"flex\\"."` + `"Cannot specify disallowed CSS property \\"flex\\"."` ) }) @@ -24,7 +24,7 @@ test('it handles camelCase', () => { justifyContent: 1, }) ).toThrowErrorMatchingInlineSnapshot( - `"Cannot specify CSS property \\"justifyContent\\"."` + `"Cannot specify disallowed CSS property \\"justifyContent\\"."` ) }) @@ -63,3 +63,23 @@ test('it fails partially invalid responsive values', () => { `"Cannot use a non-theme value \\"3px\\" for \\"padding\\". Please either use a theme value or add a new value to the theme."` ) }) + +test('it fails shorthands', () => { + expect(() => + render({ + mx: 2, + }) + ).toThrowErrorMatchingInlineSnapshot( + `"Cannot specify disallowed CSS property \\"mx\\"."` + ) +}) + +test('it fails marginX', () => { + expect(() => + render({ + marginX: 2, + }) + ).toThrowErrorMatchingInlineSnapshot( + `"Cannot specify disallowed CSS property \\"marginX\\"."` + ) +}) From 19804543bc0fdcfae424463e8fb544b9dd3fa093 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Wed, 4 Mar 2020 10:29:54 +1100 Subject: [PATCH 20/48] 0.0.10 --- packages/strict-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index e7c3d8a1f..530b041f3 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,6 +1,6 @@ { "name": "strict-ui", - "version": "0.0.9", + "version": "0.0.10", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", From eaedc88f3b4e92eadf02d4ebe81b14063943e98e Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Wed, 4 Mar 2020 10:32:29 +1100 Subject: [PATCH 21/48] Add test verifying that red: "red" in theme works --- packages/strict-ui/test/index.ts | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/strict-ui/test/index.ts b/packages/strict-ui/test/index.ts index 0afe7fb73..900a6a0b6 100644 --- a/packages/strict-ui/test/index.ts +++ b/packages/strict-ui/test/index.ts @@ -1,5 +1,5 @@ import { renderToString } from 'react-dom/server' -import { jsx } from '../src/index' +import { jsx, ThemeProvider } from '../src/index' const render = (sx: Object) => renderToString( @@ -83,3 +83,25 @@ test('it fails marginX', () => { `"Cannot specify disallowed CSS property \\"marginX\\"."` ) }) + +test('it correctly handles theme properties that match their values', () => { + expect(() => + renderToString( + jsx( + ThemeProvider, + { + theme: { + colors: { + red: 'red', + }, + }, + }, + jsx('div', { + sx: { + color: 'red', + }, + }) + ) + ) + ).not.toThrowError() +}) From 2bbcf21bb0b97ed1acb3b3dbbfa997d99056f590 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Wed, 4 Mar 2020 11:25:35 +1100 Subject: [PATCH 22/48] Simplify "is theme value" check, add support for missing scales --- packages/strict-ui/src/index.ts | 7 +++-- packages/strict-ui/test/index.ts | 50 ++++++++++++++++++++++++++++++++ 2 files changed, 54 insertions(+), 3 deletions(-) diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts index a6b192c15..165e4e089 100644 --- a/packages/strict-ui/src/index.ts +++ b/packages/strict-ui/src/index.ts @@ -83,13 +83,14 @@ export const jsx = (type, props, ...children) => { const value = props.sx[prop] props.sx[prop] = theme => { const scale = get(theme, scales[alias]) + if (!scale) return value + const valuesToCheck = Array.isArray(value) ? value : [value] valuesToCheck.forEach(toCheck => { - const transform = get(transforms, prop, get) - const transformedValue = transform(scale, toCheck, toCheck) + const scaleValue = get(scale, toCheck) - if (transformedValue === 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.` ) diff --git a/packages/strict-ui/test/index.ts b/packages/strict-ui/test/index.ts index 900a6a0b6..df37d27fd 100644 --- a/packages/strict-ui/test/index.ts +++ b/packages/strict-ui/test/index.ts @@ -105,3 +105,53 @@ test('it correctly handles theme properties that match their values', () => { ) ).not.toThrowError() }) + +test('it correctly handles unspecified scales', () => { + expect(() => + render({ + height: 2, + }) + ).not.toThrowError() +}) + +test('it correctly validates valid sizes', () => { + expect(() => + renderToString( + jsx( + ThemeProvider, + { + theme: { + sizes: ['0', '2px', '4px'], + }, + }, + jsx('div', { + sx: { + height: 2, + }, + }) + ) + ) + ).not.toThrowError() +}) + +test('it correctly validates invalid sizes', () => { + expect(() => + renderToString( + jsx( + ThemeProvider, + { + theme: { + sizes: ['0', '2px', '4px'], + }, + }, + jsx('div', { + sx: { + height: '16px', + }, + }) + ) + ) + ).toThrowErrorMatchingInlineSnapshot( + `"Cannot use a non-theme value \\"16px\\" for \\"height\\". Please either use a theme value or add a new value to the theme."` + ) +}) From ca6980c0a8e45f6b4eab72c5616f1640b7738926 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Wed, 4 Mar 2020 11:27:11 +1100 Subject: [PATCH 23/48] Throw error on unspecified scale --- packages/strict-ui/src/index.ts | 5 ++++- packages/strict-ui/test/index.ts | 4 +++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts index 165e4e089..4f844ebbd 100644 --- a/packages/strict-ui/src/index.ts +++ b/packages/strict-ui/src/index.ts @@ -83,7 +83,10 @@ export const jsx = (type, props, ...children) => { const value = props.sx[prop] props.sx[prop] = theme => { const scale = get(theme, scales[alias]) - if (!scale) return value + 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] diff --git a/packages/strict-ui/test/index.ts b/packages/strict-ui/test/index.ts index df37d27fd..c929967c8 100644 --- a/packages/strict-ui/test/index.ts +++ b/packages/strict-ui/test/index.ts @@ -111,7 +111,9 @@ test('it correctly handles unspecified scales', () => { render({ height: 2, }) - ).not.toThrowError() + ).toThrowErrorMatchingInlineSnapshot( + `"Cannot specify \\"height\\" because no \\"sizes\\" scale is defined in the theme."` + ) }) test('it correctly validates valid sizes', () => { From de7df5f56ac706de2fe99084a43dcac153d5c597 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Wed, 4 Mar 2020 11:28:11 +1100 Subject: [PATCH 24/48] 0.0.11 --- packages/strict-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index 530b041f3..da3e8a8be 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,6 +1,6 @@ { "name": "strict-ui", - "version": "0.0.10", + "version": "0.0.11", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", From 8dd3ea790b8c4042a308e6399076dd77e34efc5a Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Wed, 4 Mar 2020 11:56:14 +1100 Subject: [PATCH 25/48] Add test that verifies correct CSS transformation occurring --- packages/strict-ui/test/index.ts | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/packages/strict-ui/test/index.ts b/packages/strict-ui/test/index.ts index c929967c8..7908a8813 100644 --- a/packages/strict-ui/test/index.ts +++ b/packages/strict-ui/test/index.ts @@ -1,3 +1,4 @@ +/** @jest-environment node */ import { renderToString } from 'react-dom/server' import { jsx, ThemeProvider } from '../src/index' @@ -157,3 +158,29 @@ test('it correctly validates invalid sizes', () => { `"Cannot use a non-theme value \\"16px\\" for \\"height\\". Please either use a theme value or add a new value to the theme."` ) }) + +test('it outputs the transformed styles with their theme values', () => { + expect( + renderToString( + jsx( + ThemeProvider, + { + theme: { + colors: { + text: '#000', + background: '#fff', + }, + }, + }, + jsx('div', { + sx: { + padding: 2, + color: 'background', + }, + }) + ) + ) + ).toMatchInlineSnapshot( + `"
"` + ) +}) From 64892adfa4228c671762b486f94fca105d24db9a Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Wed, 4 Mar 2020 14:45:45 +1100 Subject: [PATCH 26/48] Remove again, doesnt work as-is --- packages/strict-ui/src/css.ts | 20 -------------------- packages/strict-ui/src/index.ts | 4 ++-- 2 files changed, 2 insertions(+), 22 deletions(-) diff --git a/packages/strict-ui/src/css.ts b/packages/strict-ui/src/css.ts index fc8336c01..91c687fec 100644 --- a/packages/strict-ui/src/css.ts +++ b/packages/strict-ui/src/css.ts @@ -32,26 +32,6 @@ export const positiveOrNegative = (scale: object, value: string | number) => { return Number(n) * -1 } -export const transforms = [ - 'margin', - 'marginTop', - 'marginRight', - 'marginBottom', - 'marginLeft', - 'marginX', - 'marginY', - 'top', - 'bottom', - 'left', - 'right', -].reduce( - (acc, curr) => ({ - ...acc, - [curr]: positiveOrNegative, - }), - {} -) - export const scales = { color: 'colors', backgroundColor: 'colors', diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts index 4f844ebbd..76307b197 100644 --- a/packages/strict-ui/src/index.ts +++ b/packages/strict-ui/src/index.ts @@ -1,10 +1,10 @@ import { jsx as themeuijsx } from 'theme-ui' import { get } from '@theme-ui/css' -import { scales, aliases, transforms } from './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 { Grid, Flex, ThemeProvider, useThemeUI as useStrictUI } from 'theme-ui' +export { Grid, ThemeProvider, useThemeUI as useStrictUI } from 'theme-ui' export const jsx = (type, props, ...children) => { if (props.css) throw new Error('Using the `css` prop is disallowed.') From d7cdf2920e771ac79bd4073daefa94dc9eb7f6ae Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Wed, 4 Mar 2020 16:03:34 +1100 Subject: [PATCH 27/48] 0.0.12 --- packages/strict-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index da3e8a8be..f3e6f4a7c 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,6 +1,6 @@ { "name": "strict-ui", - "version": "0.0.11", + "version": "0.0.12", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", From 99575e108c6445a1fb98ee2fb2a5ddcedf93b16f Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Thu, 5 Mar 2020 16:13:51 +1100 Subject: [PATCH 28/48] No margin on anything --- packages/strict-ui/src/sanitize.css.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/strict-ui/src/sanitize.css.ts b/packages/strict-ui/src/sanitize.css.ts index d88215bd5..f7e7fb2ce 100644 --- a/packages/strict-ui/src/sanitize.css.ts +++ b/packages/strict-ui/src/sanitize.css.ts @@ -207,6 +207,7 @@ injectGlobal` *:before, *:after { box-sizing: border-box; + margin: 0; } img { display: inline-block; From bc398c61b2250676344edb9134b009d4b82fe5bc Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Thu, 5 Mar 2020 16:20:34 +1100 Subject: [PATCH 29/48] 0.0.13 --- packages/strict-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index f3e6f4a7c..d534ef2bc 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,6 +1,6 @@ { "name": "strict-ui", - "version": "0.0.12", + "version": "0.0.13", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", From 85d3858cb1ef356cf5f3eadf3cd1aa74f3afb03a Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Thu, 5 Mar 2020 16:25:03 +1100 Subject: [PATCH 30/48] !important --- packages/strict-ui/src/sanitize.css.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/strict-ui/src/sanitize.css.ts b/packages/strict-ui/src/sanitize.css.ts index f7e7fb2ce..4ef05f30c 100644 --- a/packages/strict-ui/src/sanitize.css.ts +++ b/packages/strict-ui/src/sanitize.css.ts @@ -206,8 +206,8 @@ injectGlobal` *, *:before, *:after { - box-sizing: border-box; - margin: 0; + box-sizing: border-box!important; + margin: 0!important; } img { display: inline-block; From 0ee6921e7e7370ec68778db04ca5c7aaeef1d532 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 10 Mar 2020 09:29:46 +1100 Subject: [PATCH 31/48] 0.0.14 --- packages/strict-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index d534ef2bc..f36df15ef 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,6 +1,6 @@ { "name": "strict-ui", - "version": "0.0.13", + "version": "0.0.14", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", From 90fde4307bf8aa3b917488ef7e4eea9cdde8dce8 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 10 Mar 2020 09:30:09 +1100 Subject: [PATCH 32/48] Re-export for now --- packages/strict-ui/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts index 76307b197..2d9c53780 100644 --- a/packages/strict-ui/src/index.ts +++ b/packages/strict-ui/src/index.ts @@ -4,7 +4,7 @@ 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 { Grid, ThemeProvider, useThemeUI as useStrictUI } from 'theme-ui' +export { Grid, ThemeProvider, Flex, useThemeUI as useStrictUI } from 'theme-ui' export const jsx = (type, props, ...children) => { if (props.css) throw new Error('Using the `css` prop is disallowed.') From 92225a073a6c54cdbdd1f2bb5fbc0f3ece5ac7d9 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 10 Mar 2020 09:30:57 +1100 Subject: [PATCH 33/48] 0.0.15 --- packages/strict-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index f36df15ef..2e2ad94c6 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,6 +1,6 @@ { "name": "strict-ui", - "version": "0.0.14", + "version": "0.0.15", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", From 9d7beb5d678f5b8889bf8865622ead52f8b2224f Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 10 Mar 2020 09:33:37 +1100 Subject: [PATCH 34/48] I forgot why this is a bad idea, nvm --- packages/strict-ui/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts index 2d9c53780..76307b197 100644 --- a/packages/strict-ui/src/index.ts +++ b/packages/strict-ui/src/index.ts @@ -4,7 +4,7 @@ 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 { Grid, ThemeProvider, Flex, useThemeUI as useStrictUI } from 'theme-ui' +export { Grid, ThemeProvider, useThemeUI as useStrictUI } from 'theme-ui' export const jsx = (type, props, ...children) => { if (props.css) throw new Error('Using the `css` prop is disallowed.') From 0dfae8303d8e6f0216f90419ac7ee512fbd4e7fd Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 17 Mar 2020 18:29:06 +1100 Subject: [PATCH 35/48] No more !important --- packages/strict-ui/src/sanitize.css.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/strict-ui/src/sanitize.css.ts b/packages/strict-ui/src/sanitize.css.ts index 4ef05f30c..1b4ff7a95 100644 --- a/packages/strict-ui/src/sanitize.css.ts +++ b/packages/strict-ui/src/sanitize.css.ts @@ -48,7 +48,6 @@ injectGlobal` box-sizing: content-box; } h1 { - margin: 0.7em 0; font-size: 2em; } b, @@ -115,9 +114,6 @@ injectGlobal` svg:not(:root) { overflow: hidden; } - figure { - margin: 1em 40px; - } progress { vertical-align: baseline; } @@ -206,8 +202,8 @@ injectGlobal` *, *:before, *:after { - box-sizing: border-box!important; - margin: 0!important; + box-sizing: border-box; + margin: 0; } img { display: inline-block; From 3bbf426339eb58312641413d4cbc51903e8d99c2 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 17 Mar 2020 18:50:50 +1100 Subject: [PATCH 36/48] Add --- packages/strict-ui/package.json | 4 +- packages/strict-ui/src/Flex.ts | 27 +++++++++++ packages/strict-ui/src/index.ts | 1 + yarn.lock | 82 ++++++++++++++++++++++++++++++++- 4 files changed, 112 insertions(+), 2 deletions(-) create mode 100644 packages/strict-ui/src/Flex.ts diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index 2e2ad94c6..1b26c06e2 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,6 +1,6 @@ { "name": "strict-ui", - "version": "0.0.15", + "version": "0.0.16", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", @@ -17,7 +17,9 @@ }, "dependencies": { "@theme-ui/css": "0.3.x", + "@types/reflexbox": "^4.0.0", "emotion": "^10.0.27", + "reflexbox": "^4.0.6", "theme-ui": "0.3.x" } } diff --git a/packages/strict-ui/src/Flex.ts b/packages/strict-ui/src/Flex.ts new file mode 100644 index 000000000..c02bd22a4 --- /dev/null +++ b/packages/strict-ui/src/Flex.ts @@ -0,0 +1,27 @@ +/* @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.ReactChildren | React.ReactChildren[] + } +) => { + let { children, ...rest } = props + + if (typeof props.gap === 'number' && props.gap !== 0) { + children = React.Children.map(children, (child, index) => + jsx( + 'div', + { + sx: index !== 0 ? { marginLeft: props.gap } : {}, + }, + child + ) + ) + } + + return jsx(Reflex, rest, children) +} diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts index 76307b197..820339b66 100644 --- a/packages/strict-ui/src/index.ts +++ b/packages/strict-ui/src/index.ts @@ -5,6 +5,7 @@ import { scales, aliases } from './css' import './sanitize.css' export { Grid, ThemeProvider, useThemeUI as useStrictUI } from 'theme-ui' +export * from './Flex' export const jsx = (type, props, ...children) => { if (props.css) throw new Error('Using the `css` prop is disallowed.') diff --git a/yarn.lock b/yarn.lock index 77d36d40d..240c1edc3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1524,7 +1524,7 @@ "@emotion/serialize" "^0.11.15" "@emotion/utils" "0.11.3" -"@emotion/styled@^10.0.0", "@emotion/styled@^10.0.10": +"@emotion/styled@*", "@emotion/styled@^10.0.0", "@emotion/styled@^10.0.10": version "10.0.27" resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf" integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q== @@ -3235,6 +3235,13 @@ dependencies: "@styled-system/core" "^5.1.2" +"@styled-system/border@^5.1.5": + version "5.1.5" + resolved "https://registry.yarnpkg.com/@styled-system/border/-/border-5.1.5.tgz#0493d4332d2b59b74bb0d57d08c73eb555761ba6" + integrity sha512-JvddhNrnhGigtzWRCVuAHepniyVi6hBlimxWDVAdcTuk7aRn9BYJUwfHslURtwYFsF5FoEs8Zmr1oZq2M1AP0A== + dependencies: + "@styled-system/core" "^5.1.2" + "@styled-system/color@^5.1.2": version "5.1.2" resolved "https://registry.yarnpkg.com/@styled-system/color/-/color-5.1.2.tgz#b8d6b4af481faabe4abca1a60f8daa4ccc2d9f43" @@ -3249,6 +3256,11 @@ dependencies: object-assign "^4.1.1" +"@styled-system/css@^5.0.0", "@styled-system/css@^5.1.5": + version "5.1.5" + resolved "https://registry.yarnpkg.com/@styled-system/css/-/css-5.1.5.tgz#0460d5f3ff962fa649ea128ef58d9584f403bbbc" + integrity sha512-XkORZdS5kypzcBotAMPBoeckDs9aSZVkvrAlq5K3xP8IMAUek+x2O4NtwoSgkYkWWzVBu6DGdFZLR790QWGG+A== + "@styled-system/css@^5.1.4": version "5.1.4" resolved "https://registry.yarnpkg.com/@styled-system/css/-/css-5.1.4.tgz#fc51d0789a69b3831e00e6f8daf9f1d345eebdc3" @@ -3301,6 +3313,15 @@ dependencies: "@styled-system/core" "^5.1.2" +"@styled-system/should-forward-prop@^5.0.0": + version "5.1.5" + resolved "https://registry.yarnpkg.com/@styled-system/should-forward-prop/-/should-forward-prop-5.1.5.tgz#c392008c6ae14a6eb78bf1932733594f7f7e5c76" + integrity sha512-+rPRomgCGYnUIaFabDoOgpSDc4UUJ1KsmlnzcEp0tu5lFrBQKgZclSo18Z1URhaZm7a6agGtS5Xif7tuC2s52Q== + dependencies: + "@emotion/is-prop-valid" "^0.8.1" + "@emotion/memoize" "^0.7.1" + styled-system "^5.1.5" + "@styled-system/should-forward-prop@^5.1.2": version "5.1.4" resolved "https://registry.yarnpkg.com/@styled-system/should-forward-prop/-/should-forward-prop-5.1.4.tgz#1d32d7f0942692319e1e1798aad95fb75df36967" @@ -3332,6 +3353,14 @@ "@styled-system/core" "^5.1.2" "@styled-system/css" "^5.1.4" +"@styled-system/variant@^5.1.5": + version "5.1.5" + resolved "https://registry.yarnpkg.com/@styled-system/variant/-/variant-5.1.5.tgz#8446d8aad06af3a4c723d717841df2dbe4ddeafd" + integrity sha512-Yn8hXAFoWIro8+Q5J8YJd/mP85Teiut3fsGVR9CAxwgNfIAiqlYxsk5iHU7VHJks/0KjL4ATSjmbtCDC/4l1qw== + dependencies: + "@styled-system/core" "^5.1.2" + "@styled-system/css" "^5.1.5" + "@szmarczak/http-timer@^1.1.2": version "1.1.2" resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421" @@ -3590,6 +3619,15 @@ "@types/prop-types" "*" csstype "^2.2.0" +"@types/reflexbox@^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@types/reflexbox/-/reflexbox-4.0.0.tgz#34c11a71f59ba2ce03830186f3feba02174ee4a5" + integrity sha512-6mAukJO+8Ko3qaHpmW6oRuD0Ibrkkf5eBJAYfk3DNwfbJEDZ8ti3bSdZrPA0pWfffT035V0bAVKG4uMhEK18Xg== + dependencies: + "@emotion/styled" "*" + "@types/react" "*" + "@types/styled-system" "*" + "@types/resolve@0.0.8": version "0.0.8" resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194" @@ -3615,6 +3653,13 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e" integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw== +"@types/styled-system@*": + version "5.1.9" + resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.9.tgz#8baac8f6eca9e0bd5768c175ca5ce1f2d6f61ade" + integrity sha512-QlWv6tmQV8dqk8s+LSLb9QAtmuQEnfv4f8lKKZkMgDqRFVmxJDBwEw0u4zhpxp56u0hdR+TCIk9dGfOw3TkCoQ== + dependencies: + csstype "^2.6.9" + "@types/testing-library__dom@*", "@types/testing-library__dom@^6.0.0": version "6.10.0" resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-6.10.0.tgz#590d76e3875a7c536dc744eb530cbf51b6483404" @@ -8255,6 +8300,11 @@ csstype@^2.2.0, csstype@^2.5.7: resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5" integrity sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ== +csstype@^2.6.9: + version "2.6.9" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098" + integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q== + currently-unhandled@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea" @@ -20083,6 +20133,17 @@ reflect.ownkeys@^0.2.0: resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460" integrity sha1-dJrO7H8/34tj+SegSAnpDFwLNGA= +reflexbox@^4.0.6: + version "4.0.6" + resolved "https://registry.yarnpkg.com/reflexbox/-/reflexbox-4.0.6.tgz#fc756d2cc1ca493baf9b96bb27dd640ad8154cf1" + integrity sha512-UNUL4YoJEXAPjRKHuty1tuOk+LV1nDJ2KYViDcH7lYm5yU3AQ+EKNXxPU3E14bQNK/pE09b1hYl+ZKdA94tWLQ== + dependencies: + "@emotion/core" "^10.0.0" + "@emotion/styled" "^10.0.0" + "@styled-system/css" "^5.0.0" + "@styled-system/should-forward-prop" "^5.0.0" + styled-system "^5.0.0" + regenerate-unicode-properties@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e" @@ -22604,6 +22665,25 @@ styled-jsx@3.2.4: stylis "3.5.4" stylis-rule-sheet "0.0.10" +styled-system@^5.0.0, styled-system@^5.1.5: + version "5.1.5" + resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-5.1.5.tgz#e362d73e1dbb5641a2fd749a6eba1263dc85075e" + integrity sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A== + dependencies: + "@styled-system/background" "^5.1.2" + "@styled-system/border" "^5.1.5" + "@styled-system/color" "^5.1.2" + "@styled-system/core" "^5.1.2" + "@styled-system/flexbox" "^5.1.2" + "@styled-system/grid" "^5.1.2" + "@styled-system/layout" "^5.1.2" + "@styled-system/position" "^5.1.2" + "@styled-system/shadow" "^5.1.2" + "@styled-system/space" "^5.1.2" + "@styled-system/typography" "^5.1.2" + "@styled-system/variant" "^5.1.5" + object-assign "^4.1.1" + styled-system@^5.1.4: version "5.1.4" resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-5.1.4.tgz#953003bbda659092e5630e23da2ab7e855c65879" From ad98fad51ed272727f76d253947995a6159d11e2 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 17 Mar 2020 18:51:47 +1100 Subject: [PATCH 37/48] 0.0.17 --- packages/strict-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index 1b26c06e2..e266c3dd4 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,6 +1,6 @@ { "name": "strict-ui", - "version": "0.0.16", + "version": "0.0.17", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", From e92508e6d57c0e5bd337778f79b86c7344e6a0f8 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 17 Mar 2020 18:55:19 +1100 Subject: [PATCH 38/48] Add support for --- packages/strict-ui/src/Flex.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/strict-ui/src/Flex.ts b/packages/strict-ui/src/Flex.ts index c02bd22a4..adb80c067 100644 --- a/packages/strict-ui/src/Flex.ts +++ b/packages/strict-ui/src/Flex.ts @@ -16,7 +16,14 @@ export const Flex = ( jsx( 'div', { - sx: index !== 0 ? { marginLeft: props.gap } : {}, + sx: + index !== 0 + ? { + [props.flexDirection === 'column' + ? 'marginTop' + : 'marginLeft']: props.gap, + } + : {}, }, child ) From 849a3fa2e229b2f5fcd3dc3d35811eb3f282be1e Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 17 Mar 2020 18:56:05 +1100 Subject: [PATCH 39/48] 0.0.18 --- packages/strict-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index e266c3dd4..2cee84463 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,6 +1,6 @@ { "name": "strict-ui", - "version": "0.0.17", + "version": "0.0.18", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", From 7ee7447e0990067b44acdf296c27ed229abf114c Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Thu, 19 Mar 2020 06:02:09 +0100 Subject: [PATCH 40/48] Fix types for --- packages/strict-ui/src/Flex.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/src/Flex.ts b/packages/strict-ui/src/Flex.ts index adb80c067..ea5a4ce02 100644 --- a/packages/strict-ui/src/Flex.ts +++ b/packages/strict-ui/src/Flex.ts @@ -6,7 +6,7 @@ import { Flex as Reflex, BoxProps } from 'reflexbox' export const Flex = ( props: BoxProps & { gap?: number - children: React.ReactChildren | React.ReactChildren[] + children: React.ReactNode } ) => { let { children, ...rest } = props From 28f4b897af1c04a0414cd4b83847a8c7a76cc8ff Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Mon, 25 May 2020 10:51:45 +0200 Subject: [PATCH 41/48] Protect against null props --- packages/strict-ui/src/index.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts index 820339b66..9d7d1bb5d 100644 --- a/packages/strict-ui/src/index.ts +++ b/packages/strict-ui/src/index.ts @@ -8,9 +8,9 @@ export { Grid, ThemeProvider, useThemeUI as useStrictUI } from 'theme-ui' export * from './Flex' export const jsx = (type, props, ...children) => { - if (props.css) throw new Error('Using the `css` prop is disallowed.') + if (props && props.css) throw new Error('Using the `css` prop is disallowed.') - if (process.env.NODE_ENV !== 'production' && props.sx) { + if (process.env.NODE_ENV !== 'production' && props && props.sx) { const filteredCSSProps = [ // General 'box-sizing', @@ -82,7 +82,7 @@ export const jsx = (type, props, ...children) => { // Disallow non theme-based values for properties that are in the theme if (scales[alias]) { const value = props.sx[prop] - props.sx[prop] = theme => { + props.sx[prop] = (theme) => { const scale = get(theme, scales[alias]) if (!scale) throw new Error( @@ -91,7 +91,7 @@ export const jsx = (type, props, ...children) => { const valuesToCheck = Array.isArray(value) ? value : [value] - valuesToCheck.forEach(toCheck => { + valuesToCheck.forEach((toCheck) => { const scaleValue = get(scale, toCheck) if (!scaleValue) { From fe6f80a0f768a1697d4b69e94435475a4a30b41b Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Mon, 25 May 2020 10:56:54 +0200 Subject: [PATCH 42/48] strict-ui@0.1.0 --- packages/strict-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index 2cee84463..3b4a674d6 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,6 +1,6 @@ { "name": "strict-ui", - "version": "0.0.18", + "version": "0.1.0", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", From db420dcf823b7532854eb3f28214104fd26a44b7 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Mon, 25 May 2020 11:03:33 +0200 Subject: [PATCH 43/48] Use theme-ui 0.4 --- packages/strict-ui/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index 3b4a674d6..d1383a50c 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -16,10 +16,10 @@ "access": "public" }, "dependencies": { - "@theme-ui/css": "0.3.x", + "@theme-ui/css": ">= 0.4.0-alpha.0", "@types/reflexbox": "^4.0.0", "emotion": "^10.0.27", "reflexbox": "^4.0.6", - "theme-ui": "0.3.x" + "theme-ui": ">= 0.4.0-alpha.0" } } From 7b50c965ffd6950ac62333dfd5f647735f0bfc45 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Mon, 25 May 2020 11:04:32 +0200 Subject: [PATCH 44/48] strict-ui@0.1.1 --- packages/strict-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index d1383a50c..3f48eaf84 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,6 +1,6 @@ { "name": "strict-ui", - "version": "0.1.0", + "version": "0.1.1", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", From 66b488d5d93db075848b1c1f1d0b076dcf4e3eb3 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Mon, 25 May 2020 13:08:16 +0200 Subject: [PATCH 45/48] Potentially fix "Grid not exported from theme" typescript error --- packages/strict-ui/package.json | 1 + packages/strict-ui/src/index.ts | 3 +- yarn.lock | 67 --------------------------------- 3 files changed, 3 insertions(+), 68 deletions(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index 3f48eaf84..f7c03f95c 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -16,6 +16,7 @@ "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", diff --git a/packages/strict-ui/src/index.ts b/packages/strict-ui/src/index.ts index 9d7d1bb5d..bcae2b4e5 100644 --- a/packages/strict-ui/src/index.ts +++ b/packages/strict-ui/src/index.ts @@ -4,7 +4,8 @@ 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 { Grid, ThemeProvider, useThemeUI as useStrictUI } from 'theme-ui' +export { ThemeProvider, useThemeUI as useStrictUI } from 'theme-ui' +export { Grid } from '@theme-ui/components' export * from './Flex' export const jsx = (type, props, ...children) => { diff --git a/yarn.lock b/yarn.lock index 4f2ddc53d..78676cd76 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3929,61 +3929,6 @@ "@testing-library/dom" "^6.11.0" "@types/testing-library__react" "^9.1.2" -"@theme-ui/color-modes@^0.3.1": - version "0.3.1" - resolved "https://registry.yarnpkg.com/@theme-ui/color-modes/-/color-modes-0.3.1.tgz#8c2b18fb170e6c998287b7381240a8b9cca8b0d1" - integrity sha512-WuZGgFW7M5wOWSse1PVZCEfM0OZip15/D6U3bB3B9KmWax7qiSnAm1yAMLRQKC+QYhndrjq3xU+WAQm11KnhIw== - dependencies: - "@emotion/core" "^10.0.0" - "@theme-ui/core" "^0.3.1" - "@theme-ui/css" "^0.3.1" - deepmerge "^4.2.2" - -"@theme-ui/components@^0.3.1": - version "0.3.1" - resolved "https://registry.yarnpkg.com/@theme-ui/components/-/components-0.3.1.tgz#fe023e156c1e1c076d5f2258466426e94adc2765" - integrity sha512-uG4dUM61s4tWv6N34uxs5VIh24bJyA/7TrYJ75WDiI+s72zbcNG7aGRpvX/hSZnAhxjdXpuskdEM3eEgOabdEg== - dependencies: - "@emotion/core" "^10.0.0" - "@emotion/styled" "^10.0.0" - "@styled-system/color" "^5.1.2" - "@styled-system/should-forward-prop" "^5.1.2" - "@styled-system/space" "^5.1.2" - "@theme-ui/css" "^0.3.1" - -"@theme-ui/core@^0.3.1": - version "0.3.1" - resolved "https://registry.yarnpkg.com/@theme-ui/core/-/core-0.3.1.tgz#dbe9800b9d6e923e1a7417e6adebce21524f8c02" - integrity sha512-cK6EVSOx0Kyx1Xpi4qb0JTLIxywx0DRh+53Ln1foXMplF2qKaDsFi3vD6duHIlT331E3CNOa9dftHHNM7y4rbA== - dependencies: - "@emotion/core" "^10.0.0" - "@theme-ui/css" "^0.3.1" - deepmerge "^4.2.2" - -"@theme-ui/css@0.3.x", "@theme-ui/css@^0.3.1": - version "0.3.1" - resolved "https://registry.yarnpkg.com/@theme-ui/css/-/css-0.3.1.tgz#b85c7e8fae948dc0de65aa30b853368993e25cb3" - integrity sha512-QB2/fZBpo4inaLHL3OrB8NOBgNfwnj8GtHzXWHb9iQSRjmtNX8zPXBe32jLT7qQP0+y8JxPT4YChZIkm5ZyIdg== - -"@theme-ui/mdx@^0.3.0": - version "0.3.0" - resolved "https://registry.yarnpkg.com/@theme-ui/mdx/-/mdx-0.3.0.tgz#8bb1342204acfaa69914d6b6567c5c49d9a8c1e6" - integrity sha512-/GHBNKqmUptWwkmF+zIASVQtjYs81XMEwtqPCHnHuaaCzhZxcXrtCwvcAgmCXF8hpRttCXVVxw1X3Gt0mhzaTQ== - dependencies: - "@emotion/core" "^10.0.0" - "@emotion/styled" "^10.0.0" - "@mdx-js/react" "^1.0.0" - -"@theme-ui/theme-provider@^0.3.1": - version "0.3.1" - resolved "https://registry.yarnpkg.com/@theme-ui/theme-provider/-/theme-provider-0.3.1.tgz#910bc43454fd61b1047d7bb0dce05e36ffb6b44b" - integrity sha512-Sjj6lD0gPxBi+hcGCkawcGZECeESV/mW2YfmPqjNgmc296x5tulfNc+0/N5CJwLVOmnkn8zR5KNWZ8BjndfeTg== - dependencies: - "@emotion/core" "^10.0.0" - "@theme-ui/color-modes" "^0.3.1" - "@theme-ui/core" "^0.3.1" - "@theme-ui/mdx" "^0.3.0" - "@types/agent-base@^4.2.0": version "4.2.0" resolved "https://registry.yarnpkg.com/@types/agent-base/-/agent-base-4.2.0.tgz#00644e8b395b40e1bf50aaf1d22cabc1200d5051" @@ -23721,18 +23666,6 @@ theme-ui-typography@^0.1.7: object-assign "^4.1.1" typography "^0.16.19" -theme-ui@0.3.x: - version "0.3.1" - resolved "https://registry.yarnpkg.com/theme-ui/-/theme-ui-0.3.1.tgz#b00ee2c03eb3d820536af8b121c64d13b3777cf0" - integrity sha512-My/TSALqp7Dst5Ez7nJA+94Q8zJhc26Z0qGo8kEWyoqHHJ5TU8xdhjLPBltTdQck3T32cSq5USIeSKU3JtxYUQ== - dependencies: - "@theme-ui/color-modes" "^0.3.1" - "@theme-ui/components" "^0.3.1" - "@theme-ui/core" "^0.3.1" - "@theme-ui/css" "^0.3.1" - "@theme-ui/mdx" "^0.3.0" - "@theme-ui/theme-provider" "^0.3.1" - then-fs@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/then-fs/-/then-fs-2.0.0.tgz#72f792dd9d31705a91ae19ebfcf8b3f968c81da2" From 75b6933f43f1ac6ce188fb0299b65ca2500b47e0 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 26 May 2020 11:44:58 +0200 Subject: [PATCH 46/48] Deps... --- packages/css/package.json | 2 +- packages/strict-ui/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/css/package.json b/packages/css/package.json index 65e8f72dd..49bae9951 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -16,6 +16,6 @@ "access": "public" }, "dependencies": { - "csstype": "^2.5.7" + "csstype": "^2.6.10" } } diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index f7c03f95c..4e0a54a18 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,6 +1,6 @@ { "name": "strict-ui", - "version": "0.1.1", + "version": "0.1.2", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", From f3c3ea54a1722fdbd89bda3d6972f213a12fefba Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 26 May 2020 11:46:03 +0200 Subject: [PATCH 47/48] Handle falsy childs in --- packages/strict-ui/src/Flex.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/strict-ui/src/Flex.ts b/packages/strict-ui/src/Flex.ts index ea5a4ce02..adc38f9e0 100644 --- a/packages/strict-ui/src/Flex.ts +++ b/packages/strict-ui/src/Flex.ts @@ -12,8 +12,10 @@ export const Flex = ( let { children, ...rest } = props if (typeof props.gap === 'number' && props.gap !== 0) { - children = React.Children.map(children, (child, index) => - jsx( + children = React.Children.map(children, (child, index) => { + if (!child) return child + + return jsx( 'div', { sx: @@ -27,7 +29,7 @@ export const Flex = ( }, child ) - ) + }) } return jsx(Reflex, rest, children) From 4d74adec6211b35b41314d5d39423e743d7eb73a Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 26 May 2020 11:46:51 +0200 Subject: [PATCH 48/48] v0.1.3 --- packages/strict-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strict-ui/package.json b/packages/strict-ui/package.json index 4e0a54a18..46bf0b2cf 100644 --- a/packages/strict-ui/package.json +++ b/packages/strict-ui/package.json @@ -1,6 +1,6 @@ { "name": "strict-ui", - "version": "0.1.2", + "version": "0.1.3", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js",