From d3d6b5c4385ac5481e08e540cd79c37c1553caef Mon Sep 17 00:00:00 2001 From: anubra266 Date: Fri, 16 Sep 2022 16:27:49 +0100 Subject: [PATCH] revert: #6335 --- .changeset/fresh-elephants-cover.md | 5 + .../styled-system/benchmarks/benchmark.js | 109 ------------------ .../components/styled-system/package.json | 6 +- packages/components/styled-system/src/css.ts | 106 ++++++----------- .../src/utils/expand-responsive.ts | 62 ++++++++++ .../styled-system/tests/css.test.ts | 7 +- pnpm-lock.yaml | 29 ----- 7 files changed, 109 insertions(+), 215 deletions(-) create mode 100644 .changeset/fresh-elephants-cover.md delete mode 100644 packages/components/styled-system/benchmarks/benchmark.js create mode 100644 packages/components/styled-system/src/utils/expand-responsive.ts diff --git a/.changeset/fresh-elephants-cover.md b/.changeset/fresh-elephants-cover.md new file mode 100644 index 00000000000..273e3a8a9d2 --- /dev/null +++ b/.changeset/fresh-elephants-cover.md @@ -0,0 +1,5 @@ +--- +"@chakra-ui/styled-system": patch +--- + +Revert #6335 diff --git a/packages/components/styled-system/benchmarks/benchmark.js b/packages/components/styled-system/benchmarks/benchmark.js deleted file mode 100644 index 5071b93b756..00000000000 --- a/packages/components/styled-system/benchmarks/benchmark.js +++ /dev/null @@ -1,109 +0,0 @@ -// @ts-check - -const { isMainThread } = require("worker_threads") -const { css, toCSSVar } = require("../dist/index.cjs.js") - -const theme = toCSSVar({ - breakpoints: { - sm: "40em", - md: "52em", - lg: "64em", - xl: "80em", - }, - colors: { - red: { - 500: "#ff0000", - }, - primary: "tomato", - secondary: "cyan", - }, - fontSizes: [12, 14, 16, 24, 36], - space: [0, 4, 8, 16, 32, 64, 128, 256, 512], - fonts: { - monospace: "Menlo, monospace", - }, - lineHeights: { - body: 1.5, - }, - fontWeights: { - bold: 600, - }, - sizes: { - small: 4, - medium: 8, - large: 16, - sidebar: 320, - }, - buttons: { - primary: { - p: 3, - fontWeight: "bold", - color: "white", - bg: "primary", - borderRadius: 2, - }, - }, - text: { - caps: { - fontSize: [1, 2], - letterSpacing: "0.1em", - textTransform: "uppercase", - }, - title: { - fontSize: [3, 4], - letterSpacing: ["-0.01em", "-0.02em"], - }, - }, - borderWidths: { - thin: 1, - }, - borderStyles: { - thick: "solid", - }, - radii: { - small: 5, - }, - textTransform: { - header: "uppercase", - }, - transition: { - duration: { - slow: "1s", - }, - easing: { - smooth: "ease-in-out", - }, - property: { - common: "opacity, transform, background-color, color", - }, - }, -}) - -async function main() { - const { cronometro } = await import("cronometro") - - return cronometro( - { - systemProps() { - css({ - color: "primary", - h1: { - py: [3, 4], - }, - })(theme) - }, - }, - {}, - (err, _results) => { - if (err) { - throw err - } - }, - ) -} - -if (isMainThread) { - main() -} else { - module.exports = main -} diff --git a/packages/components/styled-system/package.json b/packages/components/styled-system/package.json index 5f9576b50a4..bef07182a75 100644 --- a/packages/components/styled-system/package.json +++ b/packages/components/styled-system/package.json @@ -45,8 +45,7 @@ "@chakra-ui/shared-utils": "workspace:*", "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", - "@types/lodash.mergewith": "4.6.6", - "cronometro": "^1.1.0" + "@types/lodash.mergewith": "4.6.6" }, "sideEffects": false, "scripts": { @@ -54,7 +53,6 @@ "dev": "pnpm build -- --watch", "clean": "rimraf dist .turbo", "typecheck": "tsc --noEmit", - "build:fast": "tsup src/index.ts", - "benchmark": "node benchmarks/benchmark.js" + "build:fast": "tsup src/index.ts" } } diff --git a/packages/components/styled-system/src/css.ts b/packages/components/styled-system/src/css.ts index e907d229ff5..df7d52af575 100644 --- a/packages/components/styled-system/src/css.ts +++ b/packages/components/styled-system/src/css.ts @@ -1,9 +1,11 @@ import { isObject, runIfFn } from "@chakra-ui/shared-utils" import * as CSS from "csstype" +import mergeWith from "lodash.mergewith" import { pseudoSelectors } from "./pseudos" import { systemProps as systemPropConfigs } from "./system" import { StyleObjectOrFn } from "./system.types" -import { Config } from "./utils/prop-config" +import { expandResponsive } from "./utils/expand-responsive" +import { Config, PropConfig } from "./utils/prop-config" import { splitByComma } from "./utils/split-by-comma" import { CssTheme } from "./utils/types" @@ -35,58 +37,20 @@ interface GetCSSOptions { export function getCss(options: GetCSSOptions) { const { configs = {}, pseudos = {}, theme } = options - /** - * Before any style can be processed, the user needs to call `toCSSVar` - * which analyzes the theme's breakpoint and appends a `__breakpoints` property - * to the theme with more details of the breakpoints. - * - * To learn more, go here: packages/utils/src/breakpoint.ts #analyzeBreakpoints - */ - if (!theme.__breakpoints) return () => ({}) - const { isResponsive, toArrayValue, media: medias } = theme.__breakpoints - const css = (stylesOrFn: Record, nested = false) => { - const styles = runIfFn(stylesOrFn, theme) + const _styles = runIfFn(stylesOrFn, theme) + const styles = expandResponsive(_styles)(theme) let computedStyles: Record = {} for (let key in styles) { + const valueOrFn = styles[key] + /** * allows the user to pass functional values * boxShadow: theme => `0 2px 2px ${theme.colors.red}` */ - let value = runIfFn(styles[key], theme) - if (value == null) continue - - if (Array.isArray(value) || (isObject(value) && isResponsive(value))) { - let values = Array.isArray(value) ? value : toArrayValue(value) - values = values.slice(0, medias.length) - - for (let index = 0; index < values.length; index++) { - const media = medias[index] - const val = values[index] - - if (media) { - if (val == null) { - computedStyles[media] ??= {} - } else { - computedStyles[media] = Object.assign( - {}, - computedStyles[media], - css({ [key]: val }, true), - ) - } - } else { - computedStyles = Object.assign( - {}, - computedStyles, - css({ ...styles, [key]: val }, false), - ) - } - } - - continue - } + let value = runIfFn(valueOrFn, theme) /** * converts pseudo shorthands to valid selector @@ -107,25 +71,21 @@ export function getCss(options: GetCSSOptions) { value = resolveTokenValue(theme, value) } + let config = configs[key] + + if (config === true) { + config = { property: key } as PropConfig + } if (isObject(value)) { - computedStyles[key] = Object.assign( + computedStyles[key] = computedStyles[key] ?? {} + computedStyles[key] = mergeWith( {}, computedStyles[key], css(value, true), ) - continue - } - - let config = configs[key] - if (config === true) { - config = { property: key } - } - if (!nested && config?.static) { - const staticStyles = runIfFn(config.static, theme) - computedStyles = Object.assign({}, computedStyles, staticStyles) } - let rawValue = config?.transform?.(value, theme, styles) ?? value + let rawValue = config?.transform?.(value, theme, _styles) ?? value /** * Used for `layerStyle`, `textStyle` and `apply`. After getting the @@ -136,11 +96,6 @@ export function getCss(options: GetCSSOptions) { */ rawValue = config?.processResult ? css(rawValue, true) : rawValue - if (isObject(rawValue)) { - computedStyles = Object.assign({}, computedStyles, rawValue) - continue - } - /** * allows us to define css properties for RTL and LTR. * @@ -149,22 +104,33 @@ export function getCss(options: GetCSSOptions) { * } */ const configProperty = runIfFn(config?.property, theme) - if (configProperty) { - if (Array.isArray(configProperty)) { - for (const property of configProperty) { - computedStyles[property] = rawValue - } - continue + + if (!nested && config?.static) { + const staticStyles = runIfFn(config.static, theme) + computedStyles = mergeWith({}, computedStyles, staticStyles) + } + + if (configProperty && Array.isArray(configProperty)) { + for (const property of configProperty) { + computedStyles[property] = rawValue } + continue + } + if (configProperty) { if (configProperty === "&" && isObject(rawValue)) { - computedStyles = Object.assign({}, computedStyles, rawValue) + computedStyles = mergeWith({}, computedStyles, rawValue) } else { - computedStyles[configProperty] = rawValue + computedStyles[configProperty as string] = rawValue } continue } + if (isObject(rawValue)) { + computedStyles = mergeWith({}, computedStyles, rawValue) + continue + } + computedStyles[key] = rawValue } @@ -174,7 +140,7 @@ export function getCss(options: GetCSSOptions) { return css } -export const css = (styles: StyleObjectOrFn) => (theme: CssTheme) => { +export const css = (styles: StyleObjectOrFn) => (theme: any) => { const cssFn = getCss({ theme, pseudos: pseudoSelectors, diff --git a/packages/components/styled-system/src/utils/expand-responsive.ts b/packages/components/styled-system/src/utils/expand-responsive.ts new file mode 100644 index 00000000000..5c3a51630fe --- /dev/null +++ b/packages/components/styled-system/src/utils/expand-responsive.ts @@ -0,0 +1,62 @@ +import { isObject, runIfFn } from "@chakra-ui/shared-utils" + +/** + * Expands an array or object syntax responsive style. + * + * @example + * expandResponsive({ mx: [1, 2] }) + * // or + * expandResponsive({ mx: { base: 1, sm: 2 } }) + * + * // => { mx: 1, "@media(min-width:)": { mx: 2 } } + */ +export const expandResponsive = + (styles: Record) => (theme: Record) => { + /** + * Before any style can be processed, the user needs to call `toCSSVar` + * which analyzes the theme's breakpoint and appends a `__breakpoints` property + * to the theme with more details of the breakpoints. + * + * To learn more, go here: packages/utils/src/responsive.ts #analyzeBreakpoints + */ + if (!theme.__breakpoints) return styles + const { isResponsive, toArrayValue, media: medias } = theme.__breakpoints + + const computedStyles: Record = {} + + for (const key in styles) { + let value = runIfFn(styles[key], theme) + + if (value == null) continue + + // converts the object responsive syntax to array syntax + value = + isObject(value) && isResponsive(value) ? toArrayValue(value) : value + + if (!Array.isArray(value)) { + computedStyles[key] = value + continue + } + + const queries = value.slice(0, medias.length).length + + for (let index = 0; index < queries; index += 1) { + const media = medias?.[index] + + if (!media) { + computedStyles[key] = value[index] + continue + } + + computedStyles[media] = computedStyles[media] || {} + + if (value[index] == null) { + continue + } + + computedStyles[media][key] = value[index] + } + } + + return computedStyles + } diff --git a/packages/components/styled-system/tests/css.test.ts b/packages/components/styled-system/tests/css.test.ts index f961fd1cfbe..29f142ff5a9 100644 --- a/packages/components/styled-system/tests/css.test.ts +++ b/packages/components/styled-system/tests/css.test.ts @@ -513,14 +513,15 @@ test("returns correct media query 2nd order", () => { expect(keys).toMatchInlineSnapshot(` Array [ "flexDirection", + "justifyContent", + "@media screen and (min-width: 40em)", + "@media screen and (min-width: 52em)", "color", "height", "paddingInlineStart", "paddingInlineEnd", "paddingTop", - "paddingBottom", - "@media screen and (min-width: 40em)", - "@media screen and (min-width: 52em)", + "paddingBottom" ] `) }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index af41d37d6b2..27a607194da 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1294,7 +1294,6 @@ importers: '@emotion/react': ^11.9.0 '@emotion/styled': ^11.8.1 '@types/lodash.mergewith': 4.6.6 - cronometro: ^1.1.0 csstype: ^3.0.11 lodash.mergewith: 4.6.2 dependencies: @@ -1308,7 +1307,6 @@ importers: '@emotion/react': 11.9.3_96543585b339e7caed3567fc56fe9e68 '@emotion/styled': 11.9.3_c6afed0fa10a1ad1311271315df93091 '@types/lodash.mergewith': 4.6.6 - cronometro: 1.1.0 packages/components/switch: specifiers: @@ -1969,10 +1967,6 @@ packages: - encoding - supports-color - /@assemblyscript/loader/0.19.23: - resolution: {integrity: sha512-ulkCYfFbYj01ie1MDOyxv2F6SpRN1TOj7fQxbP07D6HmeR+gr2JLSmINKjga2emB+b1L2KGrFKBTc+e00p54nw==} - dev: true - /@babel/cli/7.18.9_@babel+core@7.18.9: resolution: {integrity: sha512-e7TOtHVrAXBJGNgoROVxqx0mathd01oJGXIDekRfxdrISnRqfM795APwkDtse9GdyPYivjg3iXiko3sF3W7f5Q==} engines: {node: '>=6.9.0'} @@ -9871,11 +9865,6 @@ packages: engines: {node: '>=0.4.0'} hasBin: true - /acquerello/1.0.7: - resolution: {integrity: sha512-wlqZdFxaiD/1mw2shpOR9Xd7kAVKZ4y820vAsoR9aphtuEkt9FevHsNiPnAIqOhbc1JWlbv/behwBJPjQV5elQ==} - engines: {node: '>=14.15.0'} - dev: true - /address/1.1.2: resolution: {integrity: sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==} engines: {node: '>= 0.12.0'} @@ -12119,15 +12108,6 @@ packages: /create-require/1.1.1: resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==} - /cronometro/1.1.0: - resolution: {integrity: sha512-y4ag7UnIR7heYpESMG5jghHIBkCaHa/ieat4jYbuv2tL9u069TW7GCsZwUp2ugXUoMpE6A6XikRb50IKzUqz+g==} - engines: {node: '>=14.15.0'} - dependencies: - acquerello: 1.0.7 - hdr-histogram-js: 3.0.0 - table: 6.8.0 - dev: true - /cross-fetch/3.1.4: resolution: {integrity: sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==} dependencies: @@ -16466,15 +16446,6 @@ packages: property-information: 5.6.0 space-separated-tokens: 1.1.5 - /hdr-histogram-js/3.0.0: - resolution: {integrity: sha512-/EpvQI2/Z98mNFYEnlqJ8Ogful8OpArLG/6Tf2bPnkutBVLIeMVNHjk1ZDfshF2BUweipzbk+dB1hgSB7SIakw==} - engines: {node: '>=14'} - dependencies: - '@assemblyscript/loader': 0.19.23 - base64-js: 1.5.1 - pako: 1.0.11 - dev: true - /he/1.2.0: resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==} hasBin: true