diff --git a/.yarn/cache/@emotion-is-prop-valid-npm-1.2.2-53f93f2b2d-61f6b128ea.zip b/.yarn/cache/@emotion-is-prop-valid-npm-1.2.2-53f93f2b2d-61f6b128ea.zip new file mode 100644 index 00000000..f742187f Binary files /dev/null and b/.yarn/cache/@emotion-is-prop-valid-npm-1.2.2-53f93f2b2d-61f6b128ea.zip differ diff --git a/.yarn/cache/@types-hoist-non-react-statics-npm-3.3.1-c0081332b2-2c0778570d.zip b/.yarn/cache/@types-hoist-non-react-statics-npm-3.3.1-c0081332b2-2c0778570d.zip deleted file mode 100644 index 6803d574..00000000 Binary files a/.yarn/cache/@types-hoist-non-react-statics-npm-3.3.1-c0081332b2-2c0778570d.zip and /dev/null differ diff --git a/.yarn/cache/@types-react-npm-18.3.1-5744cb1fe5-9224ef319a.zip b/.yarn/cache/@types-react-npm-18.3.1-5744cb1fe5-9224ef319a.zip new file mode 100644 index 00000000..b74aa1ca Binary files /dev/null and b/.yarn/cache/@types-react-npm-18.3.1-5744cb1fe5-9224ef319a.zip differ diff --git a/.yarn/cache/@types-styled-components-npm-5.1.26-aabda06611-84f53b3101.zip b/.yarn/cache/@types-styled-components-npm-5.1.26-aabda06611-84f53b3101.zip deleted file mode 100644 index 8b3291cb..00000000 Binary files a/.yarn/cache/@types-styled-components-npm-5.1.26-aabda06611-84f53b3101.zip and /dev/null differ diff --git a/.yarn/cache/@types-stylis-npm-4.2.5-402b8fb751-24f91719db.zip b/.yarn/cache/@types-stylis-npm-4.2.5-402b8fb751-24f91719db.zip new file mode 100644 index 00000000..9eda6dab Binary files /dev/null and b/.yarn/cache/@types-stylis-npm-4.2.5-402b8fb751-24f91719db.zip differ diff --git a/.yarn/cache/@xstyled-styled-components-npm-3.8.1-6694194d5a-e045c3000b.zip b/.yarn/cache/@xstyled-styled-components-npm-3.8.1-6694194d5a-e045c3000b.zip new file mode 100644 index 00000000..b254c7a1 Binary files /dev/null and b/.yarn/cache/@xstyled-styled-components-npm-3.8.1-6694194d5a-e045c3000b.zip differ diff --git a/.yarn/cache/csstype-npm-3.1.3-e9a1c85013-8db785cc92.zip b/.yarn/cache/csstype-npm-3.1.3-e9a1c85013-8db785cc92.zip new file mode 100644 index 00000000..9853f0cf Binary files /dev/null and b/.yarn/cache/csstype-npm-3.1.3-e9a1c85013-8db785cc92.zip differ diff --git a/.yarn/cache/nanoid-npm-3.3.7-98824ba130-d36c427e53.zip b/.yarn/cache/nanoid-npm-3.3.7-98824ba130-d36c427e53.zip new file mode 100644 index 00000000..7b2fd6e1 Binary files /dev/null and b/.yarn/cache/nanoid-npm-3.3.7-98824ba130-d36c427e53.zip differ diff --git a/.yarn/cache/postcss-npm-8.4.38-495621b279-649f9e60a7.zip b/.yarn/cache/postcss-npm-8.4.38-495621b279-649f9e60a7.zip new file mode 100644 index 00000000..dad4781d Binary files /dev/null and b/.yarn/cache/postcss-npm-8.4.38-495621b279-649f9e60a7.zip differ diff --git a/.yarn/cache/source-map-js-npm-1.2.0-6e63f357e5-791a43306d.zip b/.yarn/cache/source-map-js-npm-1.2.0-6e63f357e5-791a43306d.zip new file mode 100644 index 00000000..22143e39 Binary files /dev/null and b/.yarn/cache/source-map-js-npm-1.2.0-6e63f357e5-791a43306d.zip differ diff --git a/.yarn/cache/styled-components-npm-6.1.11-a8d604297a-18fb43fe49.zip b/.yarn/cache/styled-components-npm-6.1.11-a8d604297a-18fb43fe49.zip new file mode 100644 index 00000000..8ce77cb4 Binary files /dev/null and b/.yarn/cache/styled-components-npm-6.1.11-a8d604297a-18fb43fe49.zip differ diff --git a/.yarn/cache/stylis-npm-4.3.2-c353cab3be-0faa8a97ff.zip b/.yarn/cache/stylis-npm-4.3.2-c353cab3be-0faa8a97ff.zip new file mode 100644 index 00000000..df5188eb Binary files /dev/null and b/.yarn/cache/stylis-npm-4.3.2-c353cab3be-0faa8a97ff.zip differ diff --git a/.yarn/cache/tslib-npm-2.6.2-4fc8c068d9-329ea56123.zip b/.yarn/cache/tslib-npm-2.6.2-4fc8c068d9-329ea56123.zip new file mode 100644 index 00000000..3424b444 Binary files /dev/null and b/.yarn/cache/tslib-npm-2.6.2-4fc8c068d9-329ea56123.zip differ diff --git a/benchmarks/package.json b/benchmarks/package.json index 105068c4..2df802da 100644 --- a/benchmarks/package.json +++ b/benchmarks/package.json @@ -26,10 +26,10 @@ "@emotion/core": "^11.0.0", "@emotion/react": "^11.10.4", "@emotion/styled": "^11.10.4", - "@xstyled/emotion": "^3.8.1", - "@xstyled/styled-components": "^3.8.1", + "@xstyled/emotion": "workspace:*", + "@xstyled/styled-components": "workspace:*", "emotion-theming": "^11.0.0", - "styled-components": "^5.3.6", + "styled-components": "^6.1.9", "styled-system": "^5.1.5" } } diff --git a/lerna.json b/lerna.json index 1a093857..0e18a7a7 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "lerna": "3.3.0", "packages": ["packages/*"], - "version": "3.8.1", + "version": "independent", "useWorkspaces": true } diff --git a/package.json b/package.json index c17d4d9f..3e4fd43e 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,6 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@types/react": "^18.0.21", - "@types/styled-components": "^5.1.26", "@typescript-eslint/eslint-plugin": "^5.39.0", "@typescript-eslint/parser": "^5.39.0", "babel-jest": "^29.1.2", @@ -33,6 +32,7 @@ "bundlewatch": "^0.3.3", "codecov": "^3.8.2", "conventional-github-releaser": "^3.1.5", + "csstype": "^3.1.3", "esbuild": "^0.15.10", "eslint": "^8.24.0", "eslint-plugin-react": "^7.31.8", @@ -49,7 +49,7 @@ "rollup": "^2.79.1", "rollup-plugin-dts": "^4.2.2", "rollup-plugin-esbuild": "^4.10.1", - "styled-components": "^5.3.6", + "styled-components": "^6.1.11", "typescript": "^4.8.4" }, "resolutions": { @@ -80,8 +80,5 @@ } ] }, - "overrides": { - "babel-plugin-styled-components": "2.0.2" - }, "packageManager": "yarn@3.6.1" } diff --git a/packages/styled-components/CHANGELOG.md b/packages/styled-components/CHANGELOG.md index 4112a33b..2dcae709 100644 --- a/packages/styled-components/CHANGELOG.md +++ b/packages/styled-components/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [4.0.0](https://github.com/gregberge/xstyled/compare/v3.8.1...v4.0.0) (2024-05-09) + +The minimum version of styled-components is now v6.1.11. See the [migration guide](https://styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6) for more information. + ## [3.8.1](https://github.com/gregberge/xstyled/compare/v3.8.0...v3.8.1) (2024-05-08) **Note:** Version bump only for package @xstyled/styled-components diff --git a/packages/styled-components/package.json b/packages/styled-components/package.json index 196c2af4..0f32e090 100644 --- a/packages/styled-components/package.json +++ b/packages/styled-components/package.json @@ -1,7 +1,7 @@ { "name": "@xstyled/styled-components", "description": "A utility-first CSS-in-JS framework built for React (styled-components bindings).", - "version": "3.8.1", + "version": "4.0.0", "keywords": [ "styled-components", "css", @@ -38,9 +38,10 @@ "url": "https://github.com/sponsors/gregberge" }, "peerDependencies": { - "styled-components": "^4.0.0 || ^5.0.0" + "styled-components": "^6.1.11" }, "dependencies": { + "@emotion/is-prop-valid": "^1.2.2", "@xstyled/core": "^3.8.1", "@xstyled/system": "^3.8.1", "@xstyled/util": "^3.7.0" diff --git a/packages/styled-components/src/breakpoints.ts b/packages/styled-components/src/breakpoints.ts index 742d64ec..844d2215 100644 --- a/packages/styled-components/src/breakpoints.ts +++ b/packages/styled-components/src/breakpoints.ts @@ -5,7 +5,7 @@ import { useThemeDown, } from '@xstyled/core' import { Screens } from '@xstyled/system' -import { useTheme } from './theme' +import { useTheme } from 'styled-components' export { useViewportWidth } from '@xstyled/core' diff --git a/packages/styled-components/src/create.ts b/packages/styled-components/src/create.ts index 8afa9644..9a255ed7 100644 --- a/packages/styled-components/src/create.ts +++ b/packages/styled-components/src/create.ts @@ -1,11 +1,11 @@ import { StyleGenerator } from '@xstyled/system' -import { createCssFunction, XCSSFunction } from './createCssFunction' -import { createX, X } from './createX' -import { createStyled, XStyled } from './createStyled' import { - createCreateGlobalStyle, XCreateGlobalStyle, + createCreateGlobalStyle, } from './createCreateGlobalStyle' +import { XCSSFunction, createCssFunction } from './createCssFunction' +import { XStyled, createStyled } from './createStyled' +import { X, createX } from './createX' export interface XStyledSet { css: XCSSFunction @@ -18,9 +18,9 @@ export const createCss = ( generator: TGen, ): XStyledSet => { return { - css: createCssFunction(generator), - x: createX(generator), - styled: createStyled(generator), - createGlobalStyle: createCreateGlobalStyle(generator), + css: createCssFunction(generator), + x: createX(generator), + styled: createStyled(generator), + createGlobalStyle: createCreateGlobalStyle(generator), } } diff --git a/packages/styled-components/src/createCreateGlobalStyle.ts b/packages/styled-components/src/createCreateGlobalStyle.ts index 9bb7b53d..c113edcc 100644 --- a/packages/styled-components/src/createCreateGlobalStyle.ts +++ b/packages/styled-components/src/createCreateGlobalStyle.ts @@ -7,12 +7,10 @@ export type XCreateGlobalStyle = typeof scCreateGlobalStyle export const createCreateGlobalStyle = ( generator: TGen, ): XCreateGlobalStyle => { - const css = createCssFunction(generator) - return (( - ...args: Parameters - ): ReturnType => - scCreateGlobalStyle([ - // @ts-ignore - css(...args), - ])) as XCreateGlobalStyle + const css = createCssFunction(generator) + return ( + ...args: Parameters> + ) => + // @ts-expect-error + scCreateGlobalStyle([css(...args)]) } diff --git a/packages/styled-components/src/createCssFunction.ts b/packages/styled-components/src/createCssFunction.ts index 9ddb8c38..afc2b341 100644 --- a/packages/styled-components/src/createCssFunction.ts +++ b/packages/styled-components/src/createCssFunction.ts @@ -1,22 +1,19 @@ /* eslint-disable no-continue, no-loop-func, no-cond-assign */ -import { - css as scCss, - FlattenSimpleInterpolation, - ThemedCssFunction, -} from 'styled-components' -import { StyleGenerator, Theme } from '@xstyled/system' -import { flattenStrings } from '@xstyled/util' import { createTransform } from '@xstyled/core' +import { StyleGenerator } from '@xstyled/system' +import { flattenStrings } from '@xstyled/util' +import { css as scCss } from 'styled-components' -export type XCSSFunction = ThemedCssFunction +export type XCSSFunction = typeof scCss export const createCssFunction = ( generator: TGen, ): XCSSFunction => { const transform = createTransform(generator) - return ((...args: Parameters) => { - const scCssArgs = scCss(...args) + + return (...args: Parameters) => { + const scCssArgs = scCss(...args) const flattenedArgs = flattenStrings(scCssArgs as any[]) - return flattenedArgs.map(transform) as FlattenSimpleInterpolation - }) as XCSSFunction + return flattenedArgs.map(transform) as ReturnType> + } } diff --git a/packages/styled-components/src/createGlobalStyle.test.tsx b/packages/styled-components/src/createGlobalStyle.test.tsx index d886f625..c0b9ffe5 100644 --- a/packages/styled-components/src/createGlobalStyle.test.tsx +++ b/packages/styled-components/src/createGlobalStyle.test.tsx @@ -16,7 +16,7 @@ describe('#createGlobalStyle', () => { const GlobalStyle = createGlobalStyle` .margin { margin: 2; - } + } ` const { container } = render( <> diff --git a/packages/styled-components/src/createStyled.ts b/packages/styled-components/src/createStyled.ts index 7faad9b5..6e1fd16e 100644 --- a/packages/styled-components/src/createStyled.ts +++ b/packages/styled-components/src/createStyled.ts @@ -1,56 +1,52 @@ /* eslint-disable no-continue, no-loop-func, no-cond-assign */ -import type { ElementType } from 'react' +import isPropValid from '@emotion/is-prop-valid' import { BoxElements } from '@xstyled/core' +import { StyleGenerator, StyleGeneratorProps } from '@xstyled/system' import { string } from '@xstyled/util' -import { StyleGenerator, StyleGeneratorProps, Theme } from '@xstyled/system' import { - StyledConfig, - ThemedBaseStyledInterface, - ThemedStyledFunction, + FastOmit, + LibraryStyled, + ShouldForwardProp, + Styled, + StyledInstance, + StyledOptions, + WebTarget, } from 'styled-components' +import { XCSSFunction, createCssFunction } from './createCssFunction' import { scStyled } from './scStyled' -import { createCssFunction, XCSSFunction } from './createCssFunction' -const getCreateStyle = ( - baseCreateStyle: ThemedStyledFunction, +const getCreateStyle = ( + baseCreateStyle: StyledInstance<'web', any, any>, css: XCSSFunction, - generator?: StyleGenerator, -) => { + generator?: TGen, +): ReturnType>> => { const createStyle = (...args: Parameters) => - // @ts-ignore baseCreateStyle`${css(...args)}${generator}` createStyle.attrs = (attrs: Parameters[0]) => - getCreateStyle(baseCreateStyle.attrs(attrs), css, generator) - createStyle.withConfig = (config: StyledConfig) => - getCreateStyle(baseCreateStyle.withConfig(config), css, generator) + getCreateStyle(baseCreateStyle.attrs(attrs), css, generator) + createStyle.withConfig = (config: StyledOptions<'web', any>) => + getCreateStyle(baseCreateStyle.withConfig(config), css, generator) + // @ts-expect-error return createStyle } type BoxStyledTags = { - [Key in keyof BoxElements]: ThemedStyledFunction< + [Key in keyof BoxElements]: StyledInstance< + 'web', BoxElements[Key], - Theme, - TProps + FastOmit & TProps > } export interface XStyled - extends ThemedBaseStyledInterface, + extends Styled, BoxStyledTags> {} const createShouldForwardProp = ( generator: StyleGenerator, -): (( - prop: string | number | symbol, - defaultValidatorFn: (prop: string | number | symbol) => boolean, - elementToBeCreated?: ElementType, -) => boolean) => { +): ShouldForwardProp<'web'> => { const propSet = new Set(generator.meta.props) - return ( - prop: string | number | symbol, - defaultValidatorFn: (prop: string | number | symbol) => boolean, - elementToBeCreated?: ElementType, - ) => { + return (prop: string, elementToBeCreated?: WebTarget) => { if (string(prop) && propSet.has(prop)) { return false } @@ -61,7 +57,7 @@ const createShouldForwardProp = ( // This means that HTML elements could get unwanted props, but ultimately // this is a bug in the caller, because why are they passing unwanted // props? - return defaultValidatorFn(prop) + return isPropValid(prop) } return true } @@ -71,14 +67,14 @@ export const createBaseStyled = ( css: XCSSFunction, generator?: TGen, ): XStyled => { - const config = generator + const config: StyledOptions<'web', any> = generator ? { shouldForwardProp: createShouldForwardProp(generator), } : {} - return ((component: Parameters[0]) => { + return ((component: Target) => { const baseStyled = scStyled(component) - return getCreateStyle( + return getCreateStyle( config ? baseStyled.withConfig(config) : baseStyled, css, generator, @@ -86,18 +82,21 @@ export const createBaseStyled = ( }) as XStyled } +type JSXElementKeys = BoxElements[keyof BoxElements] + export const createStyled = ( generator: TGen, ): XStyled => { - const css = createCssFunction(generator) - const styled = createBaseStyled(css) - const xstyled = createBaseStyled(css, generator) + const css = createCssFunction(generator) + const styled = createBaseStyled(css) + const xstyled = createBaseStyled(css, generator) styled.box = xstyled('div') - Object.keys(scStyled).forEach((key) => { - // @ts-ignore + ;(Object.keys(scStyled) as JSXElementKeys[]).forEach((key) => { + // @ts-expect-error styled[key] = styled(key) - // @ts-ignore + // @ts-expect-error styled[`${key}Box`] = xstyled(key) }) + return styled } diff --git a/packages/styled-components/src/createX.ts b/packages/styled-components/src/createX.ts index 5c0c298f..103df928 100644 --- a/packages/styled-components/src/createX.ts +++ b/packages/styled-components/src/createX.ts @@ -1,33 +1,33 @@ /* eslint-disable no-continue, no-loop-func, no-cond-assign */ -import { StyledComponent, DefaultTheme } from 'styled-components' -import { scStyled } from './scStyled' import { StyleGenerator, StyleGeneratorProps } from '@xstyled/system' -import { createBaseStyled } from './createStyled' +import { + FastOmit, + SupportedHTMLElements, + IStyledComponent, +} from 'styled-components' import { createCssFunction } from './createCssFunction' - -type JSXElementKeys = keyof JSX.IntrinsicElements - -type SafeIntrinsicElement = ( - props: Omit, -) => React.ReactElement +import { createBaseStyled } from './createStyled' +import { scStyled } from './scStyled' export type X = { - [Key in JSXElementKeys]: StyledComponent< - SafeIntrinsicElement, - DefaultTheme, - StyleGeneratorProps, - 'color' + [Key in SupportedHTMLElements]: IStyledComponent< + 'web', + FastOmit> & + StyleGeneratorProps > } export const createX = ( generator: TGen, ): X => { - const xstyled = createBaseStyled(createCssFunction(generator), generator) + const xstyled = createBaseStyled( + createCssFunction(generator), + generator, + ) const x = {} as X Object.keys(scStyled).forEach((tag) => { - // @ts-ignore - x[tag] = xstyled(tag)`` + // @ts-expect-error + x[tag] = xstyled(tag)({}) }) return x } diff --git a/packages/styled-components/src/scStyled.ts b/packages/styled-components/src/scStyled.ts index d969f3cc..9aad87df 100644 --- a/packages/styled-components/src/scStyled.ts +++ b/packages/styled-components/src/scStyled.ts @@ -1,6 +1,6 @@ -import styled from 'styled-components' +import styled, { Styled } from 'styled-components' // Provide interop since `styled-components` does not work out of the box with ESM export const scStyled = - // @ts-ignore - typeof styled === 'function' ? styled : styled.default + // @ts-expect-error + (typeof styled === 'function' ? styled : styled.default) as Styled diff --git a/packages/styled-components/src/styled.test.tsx b/packages/styled-components/src/styled.test.tsx index af4eedc9..8f739a68 100644 --- a/packages/styled-components/src/styled.test.tsx +++ b/packages/styled-components/src/styled.test.tsx @@ -38,11 +38,9 @@ describe('#styled', () => { }) it('works with render props', () => { - const Foo = ({ - children, - }: { + const Foo: React.FC<{ children: ({ content }: { content: string }) => React.ReactNode - }) =>
{children({ content: 'Hello World' })}
+ }> = ({ children }) =>
{children({ content: 'Hello World' })}
const StyledFoo = styled(Foo)`` diff --git a/packages/styled-components/src/theme.ts b/packages/styled-components/src/theme.ts index 3ed8f62a..fed2f1a8 100644 --- a/packages/styled-components/src/theme.ts +++ b/packages/styled-components/src/theme.ts @@ -1,11 +1,8 @@ -import { useContext, ContextType } from 'react' -import { ThemeContext } from 'styled-components' import { createUseGetter } from '@xstyled/core' import { th } from '@xstyled/system' +import { useTheme } from 'styled-components' -export const useTheme = (): ContextType => { - return useContext(ThemeContext) -} +export { useTheme } export const useTh = createUseGetter(th, useTheme) diff --git a/packages/styled-components/src/x.test.tsx b/packages/styled-components/src/x.test.tsx index f8bce9a1..4ab43fbd 100644 --- a/packages/styled-components/src/x.test.tsx +++ b/packages/styled-components/src/x.test.tsx @@ -17,7 +17,7 @@ describe('#x', () => { const { container } = render() expect(container.firstChild).toHaveStyle(` margin: 2px; - padding: 1px; + padding: 1px; `) }) @@ -26,7 +26,7 @@ describe('#x', () => { expect(container.firstChild!.nodeName).toBe('A') expect(container.firstChild).toHaveStyle(` margin: 2px; - padding: 1px; + padding: 1px; `) }) @@ -39,7 +39,7 @@ describe('#x', () => { expect(container.firstChild!.nodeName).toBe('A') expect(container.firstChild).toHaveStyle(` margin: 2px; - padding: 1px; + padding: 1px; `) }) @@ -54,7 +54,7 @@ describe('#x', () => { expect(container.firstChild!.nodeName).toBe('A') expect(container.firstChild).toHaveStyle(` margin: 8px; - padding: 4px; + padding: 4px; `) }) diff --git a/packages/system/package.json b/packages/system/package.json index d36a8043..69b6caff 100644 --- a/packages/system/package.json +++ b/packages/system/package.json @@ -41,5 +41,8 @@ "dependencies": { "@xstyled/util": "^3.7.0", "csstype": "^3.1.1" + }, + "devDependencies": { + "@emotion/is-prop-valid": "^1.2.2" } } diff --git a/packages/system/tests/styled-components/styles.test.tsx b/packages/system/tests/styled-components/styles.test.tsx index 4db257a3..63b54e30 100644 --- a/packages/system/tests/styled-components/styles.test.tsx +++ b/packages/system/tests/styled-components/styles.test.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import 'jest-styled-components' import '@testing-library/jest-dom/extend-expect' +import isPropValid from '@emotion/is-prop-valid' import { render, cleanup } from '@testing-library/react' import styled from 'styled-components' import * as styles from '../../src' @@ -588,10 +589,10 @@ describe('styles', () => { }, styleRule: 'box-shadow', expectations: [ - ['red', 'var(--x-ring-shadow,0 0 #0000),var(--x-shadow)'], + ['red', 'var(--x-ring-shadow, 0 0 #0000),var(--x-shadow)'], [ '12px 12px 2px 1px rgba(0, 0, 255, .2)', - 'var(--x-ring-shadow,0 0 #0000),var(--x-shadow)', + 'var(--x-ring-shadow, 0 0 #0000),var(--x-shadow)', ], ], }, @@ -622,7 +623,7 @@ describe('styles', () => { }, ], ])('#%s', (name, config) => { - const Dummy = styled.div` + const Dummy = styled.div.withConfig({ shouldForwardProp: isPropValid })` ${styles[(config as any).utility || name]}; ` diff --git a/yarn.lock b/yarn.lock index c8bb58c8..dd73da9e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1913,6 +1913,15 @@ __metadata: languageName: node linkType: hard +"@emotion/is-prop-valid@npm:1.2.2, @emotion/is-prop-valid@npm:^1.2.2": + version: 1.2.2 + resolution: "@emotion/is-prop-valid@npm:1.2.2" + dependencies: + "@emotion/memoize": ^0.8.1 + checksum: 61f6b128ea62b9f76b47955057d5d86fcbe2a6989d2cd1e583daac592901a950475a37d049b9f7a7c6aa8758a33b408735db759fdedfd1f629df0f85ab60ea25 + languageName: node + linkType: hard + "@emotion/is-prop-valid@npm:^1.1.0, @emotion/is-prop-valid@npm:^1.2.1": version: 1.2.1 resolution: "@emotion/is-prop-valid@npm:1.2.1" @@ -2018,6 +2027,13 @@ __metadata: languageName: node linkType: hard +"@emotion/unitless@npm:0.8.1, @emotion/unitless@npm:^0.8.1": + version: 0.8.1 + resolution: "@emotion/unitless@npm:0.8.1" + checksum: 385e21d184d27853bb350999471f00e1429fa4e83182f46cd2c164985999d9b46d558dc8b9cc89975cb337831ce50c31ac2f33b15502e85c299892e67e7b4a88 + languageName: node + linkType: hard + "@emotion/unitless@npm:^0.7.4": version: 0.7.5 resolution: "@emotion/unitless@npm:0.7.5" @@ -2025,13 +2041,6 @@ __metadata: languageName: node linkType: hard -"@emotion/unitless@npm:^0.8.1": - version: 0.8.1 - resolution: "@emotion/unitless@npm:0.8.1" - checksum: 385e21d184d27853bb350999471f00e1429fa4e83182f46cd2c164985999d9b46d558dc8b9cc89975cb337831ce50c31ac2f33b15502e85c299892e67e7b4a88 - languageName: node - linkType: hard - "@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1": version: 1.0.1 resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1" @@ -5453,16 +5462,6 @@ __metadata: languageName: node linkType: hard -"@types/hoist-non-react-statics@npm:*": - version: 3.3.1 - resolution: "@types/hoist-non-react-statics@npm:3.3.1" - dependencies: - "@types/react": "*" - hoist-non-react-statics: ^3.3.0 - checksum: 2c0778570d9a01d05afabc781b32163f28409bb98f7245c38d5eaf082416fdb73034003f5825eb5e21313044e8d2d9e1f3fe2831e345d3d1b1d20bcd12270719 - languageName: node - linkType: hard - "@types/html-minifier-terser@npm:^6.0.0": version: 6.1.0 resolution: "@types/html-minifier-terser@npm:6.1.0" @@ -5727,7 +5726,7 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^18.0.21": +"@types/react@npm:*, @types/react@npm:>=16": version: 18.2.15 resolution: "@types/react@npm:18.2.15" dependencies: @@ -5738,6 +5737,16 @@ __metadata: languageName: node linkType: hard +"@types/react@npm:^18.0.21": + version: 18.3.1 + resolution: "@types/react@npm:18.3.1" + dependencies: + "@types/prop-types": "*" + csstype: ^3.0.2 + checksum: 9224ef319a0c2b7f66e7e7f06012aa5eb638a6c76c9742843eab1a5d243f2bed5ff829ddbb41efd60d33a266420528adfcb84cb93f238b00e905f98c3a355768 + languageName: node + linkType: hard + "@types/responselike@npm:^1.0.0": version: 1.0.0 resolution: "@types/responselike@npm:1.0.0" @@ -5842,14 +5851,10 @@ __metadata: languageName: node linkType: hard -"@types/styled-components@npm:^5.1.26": - version: 5.1.26 - resolution: "@types/styled-components@npm:5.1.26" - dependencies: - "@types/hoist-non-react-statics": "*" - "@types/react": "*" - csstype: ^3.0.2 - checksum: 84f53b3101739b20d1731554fb7735bc2f3f5d050a8b392e9845403c8c8bbd729737d033978649f9195a97b557875b010d46e35a4538564a2d0dbcce661dbf76 +"@types/stylis@npm:4.2.5": + version: 4.2.5 + resolution: "@types/stylis@npm:4.2.5" + checksum: 24f91719db5569979e9e2f197e050ef82e1fd72474e8dc45bca38d48ee56481eae0f0d4a7ac172540d7774b45a2a78d901a4c6d07bba77a33dbccff464ea3edf languageName: node linkType: hard @@ -6351,15 +6356,15 @@ __metadata: "@emotion/core": ^11.0.0 "@emotion/react": ^11.10.4 "@emotion/styled": ^11.10.4 - "@xstyled/emotion": ^3.8.1 - "@xstyled/styled-components": ^3.8.1 + "@xstyled/emotion": "workspace:*" + "@xstyled/styled-components": "workspace:*" babel-loader: ^8.2.5 benchmark: ^2.1.4 emotion-theming: ^11.0.0 html-webpack-plugin: ^5.5.0 react: ^18.2.0 react-dom: ^18.2.0 - styled-components: ^5.3.6 + styled-components: ^6.1.9 styled-system: ^5.1.5 webpack: ^5.74.0 webpack-cli: ^4.10.0 @@ -6376,7 +6381,7 @@ __metadata: languageName: unknown linkType: soft -"@xstyled/emotion@^3.8.1, @xstyled/emotion@workspace:packages/emotion": +"@xstyled/emotion@workspace:*, @xstyled/emotion@workspace:packages/emotion": version: 0.0.0-use.local resolution: "@xstyled/emotion@workspace:packages/emotion" dependencies: @@ -6397,15 +6402,29 @@ __metadata: languageName: unknown linkType: soft -"@xstyled/styled-components@^3.6.0, @xstyled/styled-components@^3.8.1, @xstyled/styled-components@workspace:packages/styled-components": +"@xstyled/styled-components@npm:^3.6.0": + version: 3.8.1 + resolution: "@xstyled/styled-components@npm:3.8.1" + dependencies: + "@xstyled/core": ^3.8.1 + "@xstyled/system": ^3.8.1 + "@xstyled/util": ^3.7.0 + peerDependencies: + styled-components: ^4.0.0 || ^5.0.0 + checksum: e045c3000bfbe95e17004e4cfb7949f95fc9c6782e5b2df2a602477772015d57496a1ce1faf2b1cc3335ad761257ddf46248a4a505078afa9428fcbf2a1da7ac + languageName: node + linkType: hard + +"@xstyled/styled-components@workspace:*, @xstyled/styled-components@workspace:packages/styled-components": version: 0.0.0-use.local resolution: "@xstyled/styled-components@workspace:packages/styled-components" dependencies: + "@emotion/is-prop-valid": ^1.2.2 "@xstyled/core": ^3.8.1 "@xstyled/system": ^3.8.1 "@xstyled/util": ^3.7.0 peerDependencies: - styled-components: ^4.0.0 || ^5.0.0 + styled-components: ^6.1.11 languageName: unknown linkType: soft @@ -6413,6 +6432,7 @@ __metadata: version: 0.0.0-use.local resolution: "@xstyled/system@workspace:packages/system" dependencies: + "@emotion/is-prop-valid": ^1.2.2 "@xstyled/util": ^3.7.0 csstype: ^3.1.1 languageName: unknown @@ -9420,7 +9440,7 @@ __metadata: languageName: node linkType: hard -"css-to-react-native@npm:^3.0.0": +"css-to-react-native@npm:3.2.0, css-to-react-native@npm:^3.0.0": version: 3.2.0 resolution: "css-to-react-native@npm:3.2.0" dependencies: @@ -9564,6 +9584,13 @@ __metadata: languageName: node linkType: hard +"csstype@npm:3.1.3, csstype@npm:^3.1.3": + version: 3.1.3 + resolution: "csstype@npm:3.1.3" + checksum: 8db785cc92d259102725b3c694ec0c823f5619a84741b5c7991b8ad135dfaa66093038a1cc63e03361a6cd28d122be48f2106ae72334e067dd619a51f49eddf7 + languageName: node + linkType: hard + "csstype@npm:^3.0.2, csstype@npm:^3.1.1": version: 3.1.2 resolution: "csstype@npm:3.1.2" @@ -13714,7 +13741,7 @@ __metadata: languageName: node linkType: hard -"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1": +"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.1": version: 3.3.2 resolution: "hoist-non-react-statics@npm:3.3.2" dependencies: @@ -17969,6 +17996,15 @@ __metadata: languageName: node linkType: hard +"nanoid@npm:^3.3.7": + version: 3.3.7 + resolution: "nanoid@npm:3.3.7" + bin: + nanoid: bin/nanoid.cjs + checksum: d36c427e530713e4ac6567d488b489a36582ef89da1d6d4e3b87eded11eb10d7042a877958c6f104929809b2ab0bafa17652b076cdf84324aa75b30b722204f2 + languageName: node + linkType: hard + "napi-build-utils@npm:^1.0.1": version: 1.0.2 resolution: "napi-build-utils@npm:1.0.2" @@ -19830,6 +19866,17 @@ __metadata: languageName: node linkType: hard +"postcss@npm:8.4.38": + version: 8.4.38 + resolution: "postcss@npm:8.4.38" + dependencies: + nanoid: ^3.3.7 + picocolors: ^1.0.0 + source-map-js: ^1.2.0 + checksum: 649f9e60a763ca4b5a7bbec446a069edf07f057f6d780a5a0070576b841538d1ecf7dd888f2fbfd1f76200e26c969e405aeeae66332e6927dbdc8bdcb90b9451 + languageName: node + linkType: hard + "postcss@npm:^8.2.15, postcss@npm:^8.2.9, postcss@npm:^8.3.11": version: 8.4.27 resolution: "postcss@npm:8.4.27" @@ -21220,7 +21267,6 @@ __metadata: "@testing-library/jest-dom": ^5.16.5 "@testing-library/react": ^13.4.0 "@types/react": ^18.0.21 - "@types/styled-components": ^5.1.26 "@typescript-eslint/eslint-plugin": ^5.39.0 "@typescript-eslint/parser": ^5.39.0 babel-jest: ^29.1.2 @@ -21228,6 +21274,7 @@ __metadata: bundlewatch: ^0.3.3 codecov: ^3.8.2 conventional-github-releaser: ^3.1.5 + csstype: ^3.1.3 esbuild: ^0.15.10 eslint: ^8.24.0 eslint-plugin-react: ^7.31.8 @@ -21244,7 +21291,7 @@ __metadata: rollup: ^2.79.1 rollup-plugin-dts: ^4.2.2 rollup-plugin-esbuild: ^4.10.1 - styled-components: ^5.3.6 + styled-components: ^6.1.11 typescript: ^4.8.4 languageName: unknown linkType: soft @@ -21618,7 +21665,7 @@ __metadata: languageName: node linkType: hard -"shallowequal@npm:^1.1.0": +"shallowequal@npm:1.1.0, shallowequal@npm:^1.1.0": version: 1.1.0 resolution: "shallowequal@npm:1.1.0" checksum: f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00 @@ -21956,6 +22003,13 @@ __metadata: languageName: node linkType: hard +"source-map-js@npm:^1.2.0": + version: 1.2.0 + resolution: "source-map-js@npm:1.2.0" + checksum: 791a43306d9223792e84293b00458bf102a8946e7188f3db0e4e22d8d530b5f80a4ce468eb5ec0bf585443ad55ebbd630bf379c98db0b1f317fd902500217f97 + languageName: node + linkType: hard + "source-map-support@npm:0.5.13": version: 0.5.13 resolution: "source-map-support@npm:0.5.13" @@ -22570,7 +22624,7 @@ __metadata: languageName: node linkType: hard -"styled-components@npm:^5.2.3, styled-components@npm:^5.3.6": +"styled-components@npm:^5.2.3": version: 5.3.11 resolution: "styled-components@npm:5.3.11" dependencies: @@ -22592,6 +22646,26 @@ __metadata: languageName: node linkType: hard +"styled-components@npm:^6.1.11, styled-components@npm:^6.1.9": + version: 6.1.11 + resolution: "styled-components@npm:6.1.11" + dependencies: + "@emotion/is-prop-valid": 1.2.2 + "@emotion/unitless": 0.8.1 + "@types/stylis": 4.2.5 + css-to-react-native: 3.2.0 + csstype: 3.1.3 + postcss: 8.4.38 + shallowequal: 1.1.0 + stylis: 4.3.2 + tslib: 2.6.2 + peerDependencies: + react: ">= 16.8.0" + react-dom: ">= 16.8.0" + checksum: 18fb43fe49b61c7b5d3b6c6bd6fd315c7f83310916b52e7b788286064f6586d3211d40528d9413b4f812c6ff806ae25976f7e400f9b125a8f7ea653b39f155c8 + languageName: node + linkType: hard + "styled-system@npm:^5.1.5": version: 5.1.5 resolution: "styled-system@npm:5.1.5" @@ -22632,6 +22706,13 @@ __metadata: languageName: node linkType: hard +"stylis@npm:4.3.2": + version: 4.3.2 + resolution: "stylis@npm:4.3.2" + checksum: 0faa8a97ff38369f47354376cd9f0def9bf12846da54c28c5987f64aaf67dcb6f00dce88a8632013bfb823b2c4d1d62a44f4ac20363a3505a7ab4e21b70179fc + languageName: node + linkType: hard + "sudo-prompt@npm:^8.2.0": version: 8.2.5 resolution: "sudo-prompt@npm:8.2.5" @@ -23110,6 +23191,13 @@ __metadata: languageName: node linkType: hard +"tslib@npm:2.6.2": + version: 2.6.2 + resolution: "tslib@npm:2.6.2" + checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad + languageName: node + linkType: hard + "tslib@npm:^1.10.0, tslib@npm:^1.8.1, tslib@npm:^1.9.0": version: 1.14.1 resolution: "tslib@npm:1.14.1"