From d30b17371c2a8b65df6c971389c86e0448bb3586 Mon Sep 17 00:00:00 2001 From: Alexandre Stahmer <47224540+astahmer@users.noreply.github.com> Date: Thu, 21 Dec 2023 16:08:13 +0100 Subject: [PATCH] fix(patterns): JSX patterns props passing with jsxStyleProps set to minimal/none (#1767) * fix(patterns): with jsxStyleProps set to minimal/none * chore: jsx pattern rest/styleprops output * wip: mergeCss with styleProps.minimal * fix: mergeCss on config.jsxStyleProps minimal * refactor: patterns jsx * fix: vue pattern * refactor: codegen tests jsx import source * chore: refactor --------- Co-authored-by: Segun Adebayo --- .changeset/friendly-peas-burn.md | 6 + .../src/artifacts/preact-jsx/pattern.ts | 45 ++- .../src/artifacts/qwik-jsx/pattern.ts | 47 ++- .../src/artifacts/react-jsx/pattern.ts | 47 ++- .../src/artifacts/solid-jsx/pattern.ts | 48 ++- .../generator/src/artifacts/vue-jsx/jsx.ts | 2 +- .../src/artifacts/vue-jsx/pattern.ts | 50 ++- packages/parser/src/parser.ts | 49 +-- .../studio/styled-system/jsx/aspect-ratio.mjs | 15 +- packages/studio/styled-system/jsx/bleed.mjs | 15 +- packages/studio/styled-system/jsx/box.mjs | 14 +- packages/studio/styled-system/jsx/center.mjs | 15 +- packages/studio/styled-system/jsx/circle.mjs | 15 +- .../studio/styled-system/jsx/container.mjs | 14 +- packages/studio/styled-system/jsx/divider.mjs | 15 +- packages/studio/styled-system/jsx/flex.mjs | 15 +- packages/studio/styled-system/jsx/float.mjs | 15 +- .../studio/styled-system/jsx/grid-item.mjs | 15 +- packages/studio/styled-system/jsx/grid.mjs | 15 +- packages/studio/styled-system/jsx/hstack.mjs | 15 +- .../studio/styled-system/jsx/link-box.mjs | 14 +- .../studio/styled-system/jsx/link-overlay.mjs | 14 +- packages/studio/styled-system/jsx/spacer.mjs | 15 +- packages/studio/styled-system/jsx/square.mjs | 15 +- packages/studio/styled-system/jsx/stack.mjs | 15 +- .../studio/styled-system/jsx/styled-link.mjs | 14 +- .../styled-system/jsx/visually-hidden.mjs | 14 +- packages/studio/styled-system/jsx/vstack.mjs | 15 +- packages/studio/styled-system/jsx/wrap.mjs | 15 +- sandbox/codegen/.gitignore | 7 +- sandbox/codegen/README.md | 33 +- .../frameworks/preact.styled-factory.test.tsx | 27 +- .../frameworks/qwik.styled-factory.test.tsx | 50 ++- .../frameworks/solid.styled-factory.test.tsx | 146 +++++--- .../frameworks/vue.styled-factory.test.tsx | 128 ++++--- .../__tests__/scenarios/jsx-minimal.test.tsx | 345 ++++++++++++++++++ .../__tests__/scenarios/jsx-none.test.tsx | 345 ++++++++++++++++++ .../codegen/__tests__/styled-factory.test.tsx | 34 +- sandbox/codegen/cli.ts | 2 +- sandbox/codegen/panda.jsx-minimal.config.ts | 21 ++ sandbox/codegen/panda.jsx-none.config.ts | 21 ++ sandbox/codegen/vitest.config.ts | 15 +- sandbox/nuxt/components/SetupDemo.vue | 3 + sandbox/nuxt/panda.config.ts | 1 + 44 files changed, 1452 insertions(+), 329 deletions(-) create mode 100644 .changeset/friendly-peas-burn.md create mode 100644 sandbox/codegen/__tests__/scenarios/jsx-minimal.test.tsx create mode 100644 sandbox/codegen/__tests__/scenarios/jsx-none.test.tsx create mode 100644 sandbox/codegen/panda.jsx-minimal.config.ts create mode 100644 sandbox/codegen/panda.jsx-none.config.ts diff --git a/.changeset/friendly-peas-burn.md b/.changeset/friendly-peas-burn.md new file mode 100644 index 000000000..755536802 --- /dev/null +++ b/.changeset/friendly-peas-burn.md @@ -0,0 +1,6 @@ +--- +'@pandacss/generator': patch +--- + +Fix issue where style props wouldn't be properly passed when using `config.jsxStyleProps` set to `minimal` or `none` +with JSX patterns (`Box`, `Stack`, `Flex`, etc.) diff --git a/packages/generator/src/artifacts/preact-jsx/pattern.ts b/packages/generator/src/artifacts/preact-jsx/pattern.ts index 373b8bca4..da036eed6 100644 --- a/packages/generator/src/artifacts/preact-jsx/pattern.ts +++ b/packages/generator/src/artifacts/preact-jsx/pattern.ts @@ -4,7 +4,7 @@ import { match } from 'ts-pattern' import type { Context } from '../../engines' export function generatePreactJsxPattern(ctx: Context, filters?: ArtifactFilters) { - const { typeName, factoryName } = ctx.jsx + const { typeName, factoryName, styleProps: jsxStyleProps } = ctx.jsx const details = ctx.patterns.filterDetails(filters) @@ -17,25 +17,48 @@ export function generatePreactJsxPattern(ctx: Context, filters?: ArtifactFilters js: outdent` import { h } from 'preact' import { forwardRef } from 'preact/compat' - ${ctx.file.import(factoryName, './factory')} + ${ctx.file.import('mergeCss', '../css/css')} + ${ctx.file.import('splitProps', '../helpers')} ${ctx.file.import(styleFnName, `../patterns/${dashName}`)} + ${ctx.file.import(factoryName, './factory')} export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) { - ${match(props.length) + ${match(jsxStyleProps) + .with( + 'none', + () => outdent` + const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)}) + + const styleProps = ${styleFnName}(patternProps) + const Comp = ${factoryName}("${jsxElement}", { base: styleProps }) + + return h(Comp, { ref, ...restProps }) + `, + ) .with( - 0, + 'minimal', () => outdent` - const styleProps = ${styleFnName}() - return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props }) + const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)}) + + const styleProps = ${styleFnName}(patternProps) + const cssProps = { css: mergeCss(styleProps, props.css) } + const mergedProps = { ref, ...restProps, ...cssProps } + + return h(${factoryName}.${jsxElement}, mergedProps) `, ) - .otherwise( + .with( + 'all', () => outdent` - const { ${props.join(', ')}, ...restProps } = props - const styleProps = ${styleFnName}({${props.join(', ')}}) - return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps }) + const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)}) + + const styleProps = ${styleFnName}(patternProps) + const mergedProps = { ref, ...styleProps, ...restProps } + + return h(${factoryName}.${jsxElement}, mergedProps) `, - )} + ) + .exhaustive()} }) `, diff --git a/packages/generator/src/artifacts/qwik-jsx/pattern.ts b/packages/generator/src/artifacts/qwik-jsx/pattern.ts index 08dcc2256..ca4d2dad0 100644 --- a/packages/generator/src/artifacts/qwik-jsx/pattern.ts +++ b/packages/generator/src/artifacts/qwik-jsx/pattern.ts @@ -4,7 +4,7 @@ import { match } from 'ts-pattern' import type { Context } from '../../engines' export function generateQwikJsxPattern(ctx: Context, filters?: ArtifactFilters) { - const { typeName, factoryName } = ctx.jsx + const { typeName, factoryName, styleProps: jsxStyleProps } = ctx.jsx const details = ctx.patterns.filterDetails(filters) @@ -16,25 +16,48 @@ export function generateQwikJsxPattern(ctx: Context, filters?: ArtifactFilters) name: dashName, js: outdent` import { h } from '@builder.io/qwik' - ${ctx.file.import(factoryName, './factory')} + ${ctx.file.import('mergeCss', '../css/css')} + ${ctx.file.import('splitProps', '../helpers')} ${ctx.file.import(styleFnName, `../patterns/${dashName}`)} + ${ctx.file.import(factoryName, './factory')} - export const ${jsxName} = function ${jsxName}(props) { - ${match(props.length) + export const ${jsxName} = /* @__PURE__ */ function ${jsxName}(props) { + ${match(jsxStyleProps) .with( - 0, + 'none', () => outdent` - const styleProps = ${styleFnName}() - return h(${factoryName}.${jsxElement}, { ...styleProps, ...props }) + const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)}) + + const styleProps = ${styleFnName}(patternProps) + const Comp = ${factoryName}("${jsxElement}", { base: styleProps }) + + return h(Comp, restProps) `, ) - .otherwise( + .with( + 'minimal', () => outdent` - const { ${props.join(', ')}, ...restProps } = props - const styleProps = ${styleFnName}({${props.join(', ')}}) - return h(${factoryName}.${jsxElement}, { ...styleProps, ...restProps }) + const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)}) + + const styleProps = ${styleFnName}(patternProps) + const cssProps = { css: mergeCss(styleProps, props.css) } + const mergedProps = { ...restProps, ...cssProps } + + return h(${factoryName}.${jsxElement}, mergedProps) `, - )} + ) + .with( + 'all', + () => outdent` + const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)}) + + const styleProps = ${styleFnName}(patternProps) + const mergedProps = { ...styleProps, ...restProps } + + return h(${factoryName}.${jsxElement}, mergedProps) + `, + ) + .exhaustive()} } `, diff --git a/packages/generator/src/artifacts/react-jsx/pattern.ts b/packages/generator/src/artifacts/react-jsx/pattern.ts index 00cce94a7..d802d527c 100644 --- a/packages/generator/src/artifacts/react-jsx/pattern.ts +++ b/packages/generator/src/artifacts/react-jsx/pattern.ts @@ -4,7 +4,7 @@ import { match } from 'ts-pattern' import type { Context } from '../../engines' export function generateReactJsxPattern(ctx: Context, filters?: ArtifactFilters) { - const { typeName, factoryName } = ctx.jsx + const { typeName, factoryName, styleProps: jsxStyleProps } = ctx.jsx const details = ctx.patterns.filterDetails(filters) @@ -16,26 +16,49 @@ export function generateReactJsxPattern(ctx: Context, filters?: ArtifactFilters) name: dashName, js: outdent` import { createElement, forwardRef } from 'react' - ${ctx.file.import(factoryName, './factory')} + ${ctx.file.import('mergeCss', '../css/css')} + ${ctx.file.import('splitProps', '../helpers')} ${ctx.file.import(styleFnName, `../patterns/${dashName}`)} + ${ctx.file.import(factoryName, './factory')} export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) { - ${match(props.length) + ${match(jsxStyleProps) + .with( + 'none', + () => outdent` + const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)}) + + const styleProps = ${styleFnName}(patternProps) + const Comp = ${factoryName}("${jsxElement}", { base: styleProps }) + + return createElement(Comp, { ref, ...restProps }) + `, + ) .with( - 0, + 'minimal', () => outdent` - const styleProps = ${styleFnName}() - return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props }) + const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)}) + + const styleProps = ${styleFnName}(patternProps) + const cssProps = { css: mergeCss(styleProps, props.css) } + const mergedProps = { ref, ...restProps, ...cssProps } + + return createElement(${factoryName}.${jsxElement}, mergedProps) `, ) - .otherwise( + .with( + 'all', () => outdent` - const { ${props.join(', ')}, ...restProps } = props - const styleProps = ${styleFnName}({${props.join(', ')}}) - return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps }) + const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)}) + + const styleProps = ${styleFnName}(patternProps) + const mergedProps = { ref, ...styleProps, ...restProps } + + return createElement(${factoryName}.${jsxElement}, mergedProps) `, - )} - }) + ) + .exhaustive()} + }) `, dts: outdent` diff --git a/packages/generator/src/artifacts/solid-jsx/pattern.ts b/packages/generator/src/artifacts/solid-jsx/pattern.ts index 4844e3789..5436d3e93 100644 --- a/packages/generator/src/artifacts/solid-jsx/pattern.ts +++ b/packages/generator/src/artifacts/solid-jsx/pattern.ts @@ -4,7 +4,7 @@ import { match } from 'ts-pattern' import type { Context } from '../../engines' export function generateSolidJsxPattern(ctx: Context, filters?: ArtifactFilters) { - const { typeName, factoryName } = ctx.jsx + const { typeName, factoryName, styleProps: jsxStyleProps } = ctx.jsx const details = ctx.patterns.filterDetails(filters) @@ -15,27 +15,51 @@ export function generateSolidJsxPattern(ctx: Context, filters?: ArtifactFilters) return { name: dashName, js: outdent` - import { splitProps, mergeProps } from 'solid-js' + import { createMemo, mergeProps, splitProps } from 'solid-js' import { createComponent } from 'solid-js/web' - ${ctx.file.import(factoryName, './factory')} + ${ctx.file.import('mergeCss', '../css/css')} ${ctx.file.import(styleFnName, `../patterns/${dashName}`)} + ${ctx.file.import(factoryName, './factory')} - export function ${jsxName}(props) { - ${match(props.length) + export const ${jsxName} = /* @__PURE__ */ function ${jsxName}(props) { + ${match(jsxStyleProps) .with( - 0, + 'none', () => outdent` - const styleProps = ${styleFnName}() - return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, props)) + const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)}) + + const styleProps = ${styleFnName}(patternProps) + const Comp = ${factoryName}("${jsxElement}", { base: styleProps }) + + return createComponent(Comp, restProps) `, ) - .otherwise( + .with( + 'minimal', () => outdent` - const [patternProps, restProps] = splitProps(props, [${props.map((v) => JSON.stringify(v)).join(', ')}]); + const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)}) + + const cssProps = createMemo(() => { const styleProps = ${styleFnName}(patternProps) - return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, restProps)) + return { css: mergeCss(styleProps, props.css) } + }) + const mergedProps = mergeProps(restProps, cssProps) + + return createComponent(${factoryName}.${jsxElement}, mergedProps) `, - )} + ) + .with( + 'all', + () => outdent` + const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)}) + + const styleProps = ${styleFnName}(patternProps) + const mergedProps = mergeProps(styleProps, restProps) + + return createComponent(${factoryName}.${jsxElement}, mergedProps) + `, + ) + .exhaustive()} } `, diff --git a/packages/generator/src/artifacts/vue-jsx/jsx.ts b/packages/generator/src/artifacts/vue-jsx/jsx.ts index 2fc018565..0690f9846 100644 --- a/packages/generator/src/artifacts/vue-jsx/jsx.ts +++ b/packages/generator/src/artifacts/vue-jsx/jsx.ts @@ -39,7 +39,7 @@ export function generateVueJsxFactory(ctx: Context) { const combinedProps = computed(() => Object.assign({}, defaultProps, attrs)) const splittedProps = computed(() => { - return splitProps(combinedProps.value, normalizeHTMLProps.keys, shouldForwardProp, __cvaFn__.variantKeys, isCssProperty) + return splitProps(combinedProps.value, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty) }) const recipeClass = computed(() => { diff --git a/packages/generator/src/artifacts/vue-jsx/pattern.ts b/packages/generator/src/artifacts/vue-jsx/pattern.ts index 9848addce..b916b7db8 100644 --- a/packages/generator/src/artifacts/vue-jsx/pattern.ts +++ b/packages/generator/src/artifacts/vue-jsx/pattern.ts @@ -1,34 +1,70 @@ import type { ArtifactFilters } from '@pandacss/types' import { outdent } from 'outdent' +import { match } from 'ts-pattern' import type { Context } from '../../engines' export function generateVueJsxPattern(ctx: Context, filters?: ArtifactFilters) { - const { typeName, factoryName } = ctx.jsx + const { typeName, factoryName, styleProps: jsxStyleProps } = ctx.jsx const details = ctx.patterns.filterDetails(filters) return details.map((pattern) => { const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern const { description, jsxElement = 'div' } = pattern.config - const propList = props.map((v) => JSON.stringify(v)).join(', ') return { name: dashName, js: outdent` import { defineComponent, h, computed } from 'vue' - ${ctx.file.import(factoryName, './factory')} + ${ctx.file.import('mergeCss', '../css/css')} ${ctx.file.import(styleFnName, `../patterns/${dashName}`)} + ${ctx.file.import(factoryName, './factory')} - export const ${jsxName} = defineComponent({ + export const ${jsxName} = /* @__PURE__ */ defineComponent({ name: '${jsxName}', inheritAttrs: false, - props: [${propList}], + props: ${JSON.stringify(props)}, setup(props, { attrs, slots }) { + ${match(jsxStyleProps) + .with( + 'none', + () => outdent` + const Comp = computed(() => { + const styleProps = ${styleFnName}(props) + return ${factoryName}("${jsxElement}", { base: styleProps }) + }) + + return () => { + return h(Comp.value, attrs, slots) + } + `, + ) + .with( + 'minimal', + () => outdent` + const cssProps = computed(() => { + const styleProps = ${styleFnName}(props) + return { css: mergeCss(styleProps, attrs.css) } + }) + + return () => { + const mergedProps = { ...attrs, ...cssProps.value } + return h(${factoryName}.${jsxElement}, mergedProps, slots) + } + `, + ) + .with( + 'all', + () => outdent` const styleProps = computed(() => ${styleFnName}(props)) + return () => { - const computedProps = { ...styleProps.value, ...attrs } - return h(${factoryName}.${jsxElement}, computedProps, slots) + const mergedProps = { ...styleProps.value, ...attrs } + return h(${factoryName}.${jsxElement}, mergedProps, slots) } + `, + ) + .exhaustive()} } }) `, diff --git a/packages/parser/src/parser.ts b/packages/parser/src/parser.ts index 21dc82ce3..677be76d9 100644 --- a/packages/parser/src/parser.ts +++ b/packages/parser/src/parser.ts @@ -19,7 +19,6 @@ const isNodePattern = (node: ParserNodeOptions): node is ParserPatternNode => no const cvaProps = ['compoundVariants', 'defaultVariants', 'variants', 'base'] const isCva = (map: BoxNodeMap['value']) => cvaProps.some((prop) => map.has(prop)) -const noop = (..._args: any[]) => void 0 as any export interface ParserOptions { importMap: Record<'css' | 'recipe' | 'pattern' | 'jsx', string[]> @@ -144,11 +143,11 @@ export function createParser(options: ParserOptions) { return name === 'css' || isValidPattern(name) || isValidRecipe(name) } - const patternPropertiesByName = new Map>() - const initialpatterns = { string: new Set(), regex: [] as RegExp[] } + const patternPropertiesByJsxName = new Map>() + const initialPatterns = { string: new Set(), regex: [] as RegExp[] } const patternJsxLists = isJsxEnabled ? (jsx?.nodes ?? []).filter(isNodePattern).reduce((acc, pattern) => { - patternPropertiesByName.set(pattern.jsxName, new Set(pattern.props ?? [])) + patternPropertiesByJsxName.set(pattern.jsxName, new Set(pattern.props ?? [])) pattern.jsx?.forEach((jsx) => { if (typeof jsx === 'string') { @@ -159,8 +158,8 @@ export function createParser(options: ParserOptions) { }) return acc - }, initialpatterns) - : initialpatterns + }, initialPatterns) + : initialPatterns const recipes = new Set() const patterns = new Set() @@ -219,13 +218,14 @@ export function createParser(options: ParserOptions) { (tagName: string) => recipeJsxLists.string.has(tagName) || recipeJsxLists.regex.some((regex) => regex.test(tagName)), ) - : noop + : undefined + const isJsxTagPattern = isJsxEnabled ? memo( (tagName: string) => patternJsxLists.string.has(tagName) || patternJsxLists.regex.some((regex) => regex.test(tagName)), ) - : noop + : undefined const matchTag = isJsxEnabled ? memo((tagName: string) => { @@ -236,21 +236,21 @@ export function createParser(options: ParserOptions) { components.has(tagName) || isUpperCase(tagName) || isFactory(tagName) || - isJsxTagRecipe(tagName) || - isJsxTagPattern(tagName) + isJsxTagRecipe?.(tagName) || + isJsxTagPattern?.(tagName) ) }) - : noop + : undefined const isRecipeOrPatternProp = memo((tagName: string, propName: string) => { - if (isJsxEnabled && isJsxTagRecipe(tagName)) { + if (isJsxEnabled && isJsxTagRecipe?.(tagName)) { const recipeList = getRecipesByJsxName(tagName) return recipeList.some((recipe) => recipePropertiesByJsxName.get(recipe.jsxName)?.has(propName)) } - if (isJsxEnabled && isJsxTagPattern(tagName)) { + if (isJsxEnabled && isJsxTagPattern?.(tagName)) { const patternList = getPatternsByJsxName(tagName) - return patternList.some((pattern) => patternPropertiesByName.get(pattern.baseName)?.has(propName)) + return patternList.some((pattern) => patternPropertiesByJsxName.get(pattern.jsxName)?.has(propName)) } return false @@ -268,11 +268,14 @@ export function createParser(options: ParserOptions) { ) }), ) - .with('minimal', () => (tagName: string, propName: string) => { - return propName === 'css' || isRecipeOrPatternProp(tagName, propName) - }) - .otherwise(() => (tagName: string, propName: string) => isRecipeOrPatternProp(tagName, propName)) - : noop + .with('minimal', () => + memo((tagName: string, propName: string) => { + return propName === 'css' || isRecipeOrPatternProp(tagName, propName) + }), + ) + .with('none', () => memo((tagName: string, propName: string) => isRecipeOrPatternProp(tagName, propName))) + .exhaustive() + : undefined const matchFn = memo((fnName: string) => { if (recipes.has(fnName) || patterns.has(fnName)) return true @@ -287,8 +290,8 @@ export function createParser(options: ParserOptions) { ast: sourceFile, components: isJsxEnabled ? { - matchTag: (prop) => matchTag(prop.tagName), - matchProp: (prop) => matchTagProp(prop.tagName, prop.propName), + matchTag: (prop) => !!matchTag?.(prop.tagName), + matchProp: (prop) => !!matchTagProp?.(prop.tagName, prop.propName), } : undefined, functions: { @@ -483,10 +486,10 @@ export function createParser(options: ParserOptions) { .when(isFactory, (jsxName) => { collector.setJsx({ name: jsxName, box: query.box, type: 'jsx-factory', data }) }) - .when(isJsxTagPattern, (jsxName) => { + .when(isJsxTagPattern!, (jsxName) => { collector.setPattern(jsxName, { type: 'jsx-pattern', name: jsxName, box: query.box, data }) }) - .when(isJsxTagRecipe, (jsxName) => { + .when(isJsxTagRecipe!, (jsxName) => { const recipeList = getRecipesByJsxName(jsxName) recipeList.map((recipe) => { collector.setRecipe(recipe.baseName, { type: 'jsx-recipe', name: jsxName, box: query.box, data }) diff --git a/packages/studio/styled-system/jsx/aspect-ratio.mjs b/packages/studio/styled-system/jsx/aspect-ratio.mjs index 60ca8b6e3..d544a8a2a 100644 --- a/packages/studio/styled-system/jsx/aspect-ratio.mjs +++ b/packages/studio/styled-system/jsx/aspect-ratio.mjs @@ -1,9 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getAspectRatioStyle } from '../patterns/aspect-ratio.mjs'; +import { panda } from './factory.mjs'; export const AspectRatio = /* @__PURE__ */ forwardRef(function AspectRatio(props, ref) { - const { ratio, ...restProps } = props -const styleProps = getAspectRatioStyle({ratio}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, ["ratio"]) + +const styleProps = getAspectRatioStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/bleed.mjs b/packages/studio/styled-system/jsx/bleed.mjs index e4349ac4d..00bf8c6d9 100644 --- a/packages/studio/styled-system/jsx/bleed.mjs +++ b/packages/studio/styled-system/jsx/bleed.mjs @@ -1,9 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getBleedStyle } from '../patterns/bleed.mjs'; +import { panda } from './factory.mjs'; export const Bleed = /* @__PURE__ */ forwardRef(function Bleed(props, ref) { - const { inline, block, ...restProps } = props -const styleProps = getBleedStyle({inline, block}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, ["inline","block"]) + +const styleProps = getBleedStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/box.mjs b/packages/studio/styled-system/jsx/box.mjs index 3bebb2d69..e972e8116 100644 --- a/packages/studio/styled-system/jsx/box.mjs +++ b/packages/studio/styled-system/jsx/box.mjs @@ -1,8 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getBoxStyle } from '../patterns/box.mjs'; +import { panda } from './factory.mjs'; export const Box = /* @__PURE__ */ forwardRef(function Box(props, ref) { - const styleProps = getBoxStyle() -return createElement(panda.div, { ref, ...styleProps, ...props }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, []) + +const styleProps = getBoxStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/center.mjs b/packages/studio/styled-system/jsx/center.mjs index b266d4929..2250f642a 100644 --- a/packages/studio/styled-system/jsx/center.mjs +++ b/packages/studio/styled-system/jsx/center.mjs @@ -1,9 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getCenterStyle } from '../patterns/center.mjs'; +import { panda } from './factory.mjs'; export const Center = /* @__PURE__ */ forwardRef(function Center(props, ref) { - const { inline, ...restProps } = props -const styleProps = getCenterStyle({inline}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, ["inline"]) + +const styleProps = getCenterStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/circle.mjs b/packages/studio/styled-system/jsx/circle.mjs index 6d3138c5c..17317f0d1 100644 --- a/packages/studio/styled-system/jsx/circle.mjs +++ b/packages/studio/styled-system/jsx/circle.mjs @@ -1,9 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getCircleStyle } from '../patterns/circle.mjs'; +import { panda } from './factory.mjs'; export const Circle = /* @__PURE__ */ forwardRef(function Circle(props, ref) { - const { size, ...restProps } = props -const styleProps = getCircleStyle({size}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, ["size"]) + +const styleProps = getCircleStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/container.mjs b/packages/studio/styled-system/jsx/container.mjs index 91dc9648a..1eab43710 100644 --- a/packages/studio/styled-system/jsx/container.mjs +++ b/packages/studio/styled-system/jsx/container.mjs @@ -1,8 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getContainerStyle } from '../patterns/container.mjs'; +import { panda } from './factory.mjs'; export const Container = /* @__PURE__ */ forwardRef(function Container(props, ref) { - const styleProps = getContainerStyle() -return createElement(panda.div, { ref, ...styleProps, ...props }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, []) + +const styleProps = getContainerStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/divider.mjs b/packages/studio/styled-system/jsx/divider.mjs index 43532d009..4e7228e5a 100644 --- a/packages/studio/styled-system/jsx/divider.mjs +++ b/packages/studio/styled-system/jsx/divider.mjs @@ -1,9 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getDividerStyle } from '../patterns/divider.mjs'; +import { panda } from './factory.mjs'; export const Divider = /* @__PURE__ */ forwardRef(function Divider(props, ref) { - const { orientation, thickness, color, ...restProps } = props -const styleProps = getDividerStyle({orientation, thickness, color}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, ["orientation","thickness","color"]) + +const styleProps = getDividerStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/flex.mjs b/packages/studio/styled-system/jsx/flex.mjs index a0c4580ff..f48ca78ba 100644 --- a/packages/studio/styled-system/jsx/flex.mjs +++ b/packages/studio/styled-system/jsx/flex.mjs @@ -1,9 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getFlexStyle } from '../patterns/flex.mjs'; +import { panda } from './factory.mjs'; export const Flex = /* @__PURE__ */ forwardRef(function Flex(props, ref) { - const { align, justify, direction, wrap, basis, grow, shrink, ...restProps } = props -const styleProps = getFlexStyle({align, justify, direction, wrap, basis, grow, shrink}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, ["align","justify","direction","wrap","basis","grow","shrink"]) + +const styleProps = getFlexStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/float.mjs b/packages/studio/styled-system/jsx/float.mjs index b9e429c42..8a1081f54 100644 --- a/packages/studio/styled-system/jsx/float.mjs +++ b/packages/studio/styled-system/jsx/float.mjs @@ -1,9 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getFloatStyle } from '../patterns/float.mjs'; +import { panda } from './factory.mjs'; export const Float = /* @__PURE__ */ forwardRef(function Float(props, ref) { - const { offsetX, offsetY, offset, placement, ...restProps } = props -const styleProps = getFloatStyle({offsetX, offsetY, offset, placement}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, ["offsetX","offsetY","offset","placement"]) + +const styleProps = getFloatStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/grid-item.mjs b/packages/studio/styled-system/jsx/grid-item.mjs index 47159c4e5..8ba8aed4a 100644 --- a/packages/studio/styled-system/jsx/grid-item.mjs +++ b/packages/studio/styled-system/jsx/grid-item.mjs @@ -1,9 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getGridItemStyle } from '../patterns/grid-item.mjs'; +import { panda } from './factory.mjs'; export const GridItem = /* @__PURE__ */ forwardRef(function GridItem(props, ref) { - const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...restProps } = props -const styleProps = getGridItemStyle({colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, ["colSpan","rowSpan","colStart","rowStart","colEnd","rowEnd"]) + +const styleProps = getGridItemStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/grid.mjs b/packages/studio/styled-system/jsx/grid.mjs index c45e782c5..7edf8511a 100644 --- a/packages/studio/styled-system/jsx/grid.mjs +++ b/packages/studio/styled-system/jsx/grid.mjs @@ -1,9 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getGridStyle } from '../patterns/grid.mjs'; +import { panda } from './factory.mjs'; export const Grid = /* @__PURE__ */ forwardRef(function Grid(props, ref) { - const { gap, columnGap, rowGap, columns, minChildWidth, ...restProps } = props -const styleProps = getGridStyle({gap, columnGap, rowGap, columns, minChildWidth}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, ["gap","columnGap","rowGap","columns","minChildWidth"]) + +const styleProps = getGridStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/hstack.mjs b/packages/studio/styled-system/jsx/hstack.mjs index d2bcd74f1..b3af0db42 100644 --- a/packages/studio/styled-system/jsx/hstack.mjs +++ b/packages/studio/styled-system/jsx/hstack.mjs @@ -1,9 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getHstackStyle } from '../patterns/hstack.mjs'; +import { panda } from './factory.mjs'; export const HStack = /* @__PURE__ */ forwardRef(function HStack(props, ref) { - const { justify, gap, ...restProps } = props -const styleProps = getHstackStyle({justify, gap}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, ["justify","gap"]) + +const styleProps = getHstackStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/link-box.mjs b/packages/studio/styled-system/jsx/link-box.mjs index 44f9e2a09..efe72d6dd 100644 --- a/packages/studio/styled-system/jsx/link-box.mjs +++ b/packages/studio/styled-system/jsx/link-box.mjs @@ -1,8 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getLinkBoxStyle } from '../patterns/link-box.mjs'; +import { panda } from './factory.mjs'; export const LinkBox = /* @__PURE__ */ forwardRef(function LinkBox(props, ref) { - const styleProps = getLinkBoxStyle() -return createElement(panda.div, { ref, ...styleProps, ...props }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, []) + +const styleProps = getLinkBoxStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/link-overlay.mjs b/packages/studio/styled-system/jsx/link-overlay.mjs index 90d5265c7..b5c54beb9 100644 --- a/packages/studio/styled-system/jsx/link-overlay.mjs +++ b/packages/studio/styled-system/jsx/link-overlay.mjs @@ -1,8 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getLinkOverlayStyle } from '../patterns/link-overlay.mjs'; +import { panda } from './factory.mjs'; export const LinkOverlay = /* @__PURE__ */ forwardRef(function LinkOverlay(props, ref) { - const styleProps = getLinkOverlayStyle() -return createElement(panda.a, { ref, ...styleProps, ...props }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, []) + +const styleProps = getLinkOverlayStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.a, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/spacer.mjs b/packages/studio/styled-system/jsx/spacer.mjs index a823dbb22..09bfb0b3d 100644 --- a/packages/studio/styled-system/jsx/spacer.mjs +++ b/packages/studio/styled-system/jsx/spacer.mjs @@ -1,9 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getSpacerStyle } from '../patterns/spacer.mjs'; +import { panda } from './factory.mjs'; export const Spacer = /* @__PURE__ */ forwardRef(function Spacer(props, ref) { - const { size, ...restProps } = props -const styleProps = getSpacerStyle({size}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, ["size"]) + +const styleProps = getSpacerStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/square.mjs b/packages/studio/styled-system/jsx/square.mjs index 799ea7d7a..44109483e 100644 --- a/packages/studio/styled-system/jsx/square.mjs +++ b/packages/studio/styled-system/jsx/square.mjs @@ -1,9 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getSquareStyle } from '../patterns/square.mjs'; +import { panda } from './factory.mjs'; export const Square = /* @__PURE__ */ forwardRef(function Square(props, ref) { - const { size, ...restProps } = props -const styleProps = getSquareStyle({size}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, ["size"]) + +const styleProps = getSquareStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/stack.mjs b/packages/studio/styled-system/jsx/stack.mjs index 729e6d48b..05d411d3c 100644 --- a/packages/studio/styled-system/jsx/stack.mjs +++ b/packages/studio/styled-system/jsx/stack.mjs @@ -1,9 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getStackStyle } from '../patterns/stack.mjs'; +import { panda } from './factory.mjs'; export const Stack = /* @__PURE__ */ forwardRef(function Stack(props, ref) { - const { align, justify, direction, gap, ...restProps } = props -const styleProps = getStackStyle({align, justify, direction, gap}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, ["align","justify","direction","gap"]) + +const styleProps = getStackStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/styled-link.mjs b/packages/studio/styled-system/jsx/styled-link.mjs index 0dbbdb7e8..0389c790d 100644 --- a/packages/studio/styled-system/jsx/styled-link.mjs +++ b/packages/studio/styled-system/jsx/styled-link.mjs @@ -1,8 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getStyledLinkStyle } from '../patterns/styled-link.mjs'; +import { panda } from './factory.mjs'; export const StyledLink = /* @__PURE__ */ forwardRef(function StyledLink(props, ref) { - const styleProps = getStyledLinkStyle() -return createElement(panda.div, { ref, ...styleProps, ...props }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, []) + +const styleProps = getStyledLinkStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/visually-hidden.mjs b/packages/studio/styled-system/jsx/visually-hidden.mjs index 6b5758f11..d73fc724e 100644 --- a/packages/studio/styled-system/jsx/visually-hidden.mjs +++ b/packages/studio/styled-system/jsx/visually-hidden.mjs @@ -1,8 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getVisuallyHiddenStyle } from '../patterns/visually-hidden.mjs'; +import { panda } from './factory.mjs'; export const VisuallyHidden = /* @__PURE__ */ forwardRef(function VisuallyHidden(props, ref) { - const styleProps = getVisuallyHiddenStyle() -return createElement(panda.div, { ref, ...styleProps, ...props }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, []) + +const styleProps = getVisuallyHiddenStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/vstack.mjs b/packages/studio/styled-system/jsx/vstack.mjs index 4537816c8..4ac779d69 100644 --- a/packages/studio/styled-system/jsx/vstack.mjs +++ b/packages/studio/styled-system/jsx/vstack.mjs @@ -1,9 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getVstackStyle } from '../patterns/vstack.mjs'; +import { panda } from './factory.mjs'; export const VStack = /* @__PURE__ */ forwardRef(function VStack(props, ref) { - const { justify, gap, ...restProps } = props -const styleProps = getVstackStyle({justify, gap}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, ["justify","gap"]) + +const styleProps = getVstackStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/wrap.mjs b/packages/studio/styled-system/jsx/wrap.mjs index 118be1f74..3dc7854b9 100644 --- a/packages/studio/styled-system/jsx/wrap.mjs +++ b/packages/studio/styled-system/jsx/wrap.mjs @@ -1,9 +1,14 @@ import { createElement, forwardRef } from 'react' -import { panda } from './factory.mjs'; +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; import { getWrapStyle } from '../patterns/wrap.mjs'; +import { panda } from './factory.mjs'; export const Wrap = /* @__PURE__ */ forwardRef(function Wrap(props, ref) { - const { gap, rowGap, columnGap, align, justify, ...restProps } = props -const styleProps = getWrapStyle({gap, rowGap, columnGap, align, justify}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file + const [patternProps, restProps] = splitProps(props, ["gap","rowGap","columnGap","align","justify"]) + +const styleProps = getWrapStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/sandbox/codegen/.gitignore b/sandbox/codegen/.gitignore index da4781c7c..77439e8e5 100644 --- a/sandbox/codegen/.gitignore +++ b/sandbox/codegen/.gitignore @@ -24,9 +24,4 @@ dist-ssr *.sw? styled-system -styled-system-preact -styled-system-vue -styled-system-qwik -styled-system-solid -styled-system-vue -styled-system-strict +styled-system-* diff --git a/sandbox/codegen/README.md b/sandbox/codegen/README.md index 1ebe379f5..1037e0e18 100644 --- a/sandbox/codegen/README.md +++ b/sandbox/codegen/README.md @@ -1,27 +1,16 @@ -# React + TypeScript + Vite +# Codegen sandbox -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +## Usage -Currently, two official plugins are available: +- `bun cli.ts -h` will show the helper +- `bun cli.ts codegen` will generate every scenarios `outdir` +- `bun cli.ts test` will test every scenarios -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +## Adding a scenario -## Expanding the ESLint configuration +- Create a `panda.{scenario}.config.ts` with your specific options +- Add it in the `scenarioList` inside `cli.ts` +- Add it in the `options` inside `vitest.config.ts` with the `test.include` to match specific tests files +- You're done ! You can run `bun cli.ts codegen {scenario}` and `bun cli.ts test {scenario}` -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: - -- Configure the top-level `parserOptions` property like this: - -```js - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - project: ['./tsconfig.json', './tsconfig.node.json'], - tsconfigRootDir: __dirname, - }, -``` - -- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` -- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list +> Pro tip: You can use `-u` or `--update` with `bun cli.ts test` to update every snapshots diff --git a/sandbox/codegen/__tests__/frameworks/preact.styled-factory.test.tsx b/sandbox/codegen/__tests__/frameworks/preact.styled-factory.test.tsx index e7c850520..1df5b8610 100644 --- a/sandbox/codegen/__tests__/frameworks/preact.styled-factory.test.tsx +++ b/sandbox/codegen/__tests__/frameworks/preact.styled-factory.test.tsx @@ -1,5 +1,6 @@ +/** @jsxImportSource preact */ import { describe, expect, test } from 'vitest' -import { styled } from '../../styled-system-preact/jsx' +import { Box, Stack, styled } from '../../styled-system-preact/jsx' // @ts-expect-error https://github.com/vitest-dev/vitest/issues/747#issuecomment-1140225294 import tlp = require('@testing-library/preact') const render = tlp.render @@ -137,7 +138,9 @@ describe('styled factory - cva', () => { , ) - expect(container.firstElementChild?.outerHTML).toMatchInlineSnapshot('"
Click me
"') + expect(container.firstElementChild?.outerHTML).toMatchInlineSnapshot( + '"
Click me
"', + ) }) }) @@ -231,4 +234,24 @@ describe('styled factory - button recipe', () => { '""', ) }) + + test('box pattern', () => { + const { container } = render(Click me) + + expect(container.firstElementChild?.outerHTML).toMatchInlineSnapshot( + '"
Click me
"', + ) + }) + + test('stack pattern', () => { + const { container } = render( + + Click me + , + ) + + expect(container.firstElementChild?.outerHTML).toMatchInlineSnapshot( + '"
Click me
"', + ) + }) }) diff --git a/sandbox/codegen/__tests__/frameworks/qwik.styled-factory.test.tsx b/sandbox/codegen/__tests__/frameworks/qwik.styled-factory.test.tsx index 9e3564e73..110c05ba7 100644 --- a/sandbox/codegen/__tests__/frameworks/qwik.styled-factory.test.tsx +++ b/sandbox/codegen/__tests__/frameworks/qwik.styled-factory.test.tsx @@ -1,8 +1,8 @@ +/** @jsxImportSource @builder.io/qwik */ import { createDOM } from '@builder.io/qwik/testing' import { describe, expect, test } from 'vitest' -import { styled } from '../../styled-system-qwik/jsx' +import { Box, Stack, styled } from '../../styled-system-qwik/jsx' import { buttonWithCompoundVariants } from '../../styled-system-qwik/recipes' -import React from 'react' describe('styled factory - cva', async () => { const Button = styled('button', { @@ -64,7 +64,7 @@ describe('styled factory - cva', async () => { test('custom className', async () => { const { render, screen } = await createDOM() await render( - , ) @@ -78,7 +78,7 @@ describe('styled factory - cva', async () => { test('style prop', async () => { const { render, screen } = await createDOM() await render( - , ) @@ -93,7 +93,7 @@ describe('styled factory - cva', async () => { const { render, screen } = await createDOM() await render( - , ) @@ -107,7 +107,7 @@ describe('styled factory - cva', async () => { test('css prop', async () => { const { render, screen } = await createDOM() await render( - , ) @@ -121,7 +121,7 @@ describe('styled factory - cva', async () => { test('css prop with variant', async () => { const { render, screen } = await createDOM() await render( - , ) @@ -134,7 +134,7 @@ describe('styled factory - cva', async () => { test('all together', async () => { const { render, screen } = await createDOM() await render( - , ) @@ -178,7 +178,7 @@ describe('styled factory - button recipe', async () => { test('custom className', async () => { const { render, screen } = await createDOM() await render( - , ) @@ -191,7 +191,7 @@ describe('styled factory - button recipe', async () => { test('style prop', async () => { const { render, screen } = await createDOM() await render( - , ) @@ -202,7 +202,7 @@ describe('styled factory - button recipe', async () => { test('style prop with variant', async () => { const { render, screen } = await createDOM() await render( - , ) @@ -216,7 +216,7 @@ describe('styled factory - button recipe', async () => { test('css prop', async () => { const { render, screen } = await createDOM() await render( - , ) @@ -229,7 +229,7 @@ describe('styled factory - button recipe', async () => { test('css prop with variant', async () => { const { render, screen } = await createDOM() await render( - , ) @@ -243,7 +243,7 @@ describe('styled factory - button recipe', async () => { test('all together', async () => { const { render, screen } = await createDOM() await render( - , ) @@ -253,4 +253,26 @@ describe('styled factory - button recipe', async () => { '""', ) }) + + test('box pattern', async () => { + const { render, screen } = await createDOM() + await render(Click me) + + const container = screen.querySelector('div')! + expect(container.outerHTML).toMatchInlineSnapshot('"
Click me
"') + }) + + test('stack pattern', async () => { + const { render, screen } = await createDOM() + await render( + + Click me + , + ) + + const container = screen.querySelector('div')! + expect(container.outerHTML).toMatchInlineSnapshot( + '"
Click me
"', + ) + }) }) diff --git a/sandbox/codegen/__tests__/frameworks/solid.styled-factory.test.tsx b/sandbox/codegen/__tests__/frameworks/solid.styled-factory.test.tsx index ed73dcf4e..32c776102 100644 --- a/sandbox/codegen/__tests__/frameworks/solid.styled-factory.test.tsx +++ b/sandbox/codegen/__tests__/frameworks/solid.styled-factory.test.tsx @@ -1,8 +1,8 @@ +/** @jsxImportSource solid-js */ import { afterEach, describe, expect, test } from 'vitest' -import { styled } from '../../styled-system-solid/jsx' +import { Box, Stack, styled } from '../../styled-system-solid/jsx' import { cleanup, render } from '@solidjs/testing-library' import { buttonWithCompoundVariants } from '../../styled-system-solid/recipes' -import React from 'react' import '@testing-library/jest-dom' describe('styled factory - cva', () => { @@ -45,7 +45,7 @@ describe('styled factory - cva', () => { afterEach(cleanup) test('base styles', () => { - const { container } = render() + const { container } = render(() => ) expect(container.firstChild).toMatchInlineSnapshot(` ) + const { container } = render(() => ) expect(container.firstChild).toMatchInlineSnapshot(` , - ) + + )) expect(container.firstChild).toMatchInlineSnapshot(` , - ) + + )) expect(container.firstChild).toMatchInlineSnapshot(` , - ) + + )) expect(container.firstChild).toMatchInlineSnapshot(` , - ) + + )) expect(container.firstChild).toMatchInlineSnapshot(` , - ) + + )) expect(container.firstChild).toMatchInlineSnapshot(` , - ) + + )) expect(container.firstChild).toMatchInlineSnapshot(` ) + const { container } = render(() => ) expect(container.firstChild).toMatchInlineSnapshot(` ) + const { container } = render(() => ) expect(container.firstChild).toMatchInlineSnapshot(` , - ) + + )) expect(container.firstChild).toMatchInlineSnapshot(` , - ) + + )) expect(container.firstChild).toMatchInlineSnapshot(` , - ) + + )) expect(container.firstChild).toMatchInlineSnapshot(` , - ) + + )) expect(container.firstChild).toMatchInlineSnapshot(` , - ) + + )) expect(container.firstChild).toMatchInlineSnapshot(` , - ) + + )) expect(container.firstChild).toMatchInlineSnapshot(` `) }) + + test('box pattern', () => { + const { container } = render(() => Click me) + + expect(container.firstChild).toMatchInlineSnapshot( + ` +
+ Click me +
+ `, + ) + }) + + test('stack pattern', () => { + const { container } = render(() => ( + + Click me + + )) + + expect(container.firstChild).toMatchInlineSnapshot( + ` +
+ Click me +
+ `, + ) + }) }) diff --git a/sandbox/codegen/__tests__/frameworks/vue.styled-factory.test.tsx b/sandbox/codegen/__tests__/frameworks/vue.styled-factory.test.tsx index fdc147540..06513784c 100644 --- a/sandbox/codegen/__tests__/frameworks/vue.styled-factory.test.tsx +++ b/sandbox/codegen/__tests__/frameworks/vue.styled-factory.test.tsx @@ -1,9 +1,9 @@ +/** @jsxImportSource vue */ import { describe, expect, test } from 'vitest' -import { styled } from '../../styled-system-vue/jsx' +import { Box, Stack, styled } from '../../styled-system-vue/jsx' import '@testing-library/jest-dom/vitest' import { render } from '@testing-library/vue' import { buttonWithCompoundVariants } from '../../styled-system-vue/recipes' -import React from 'react' describe('styled factory - cva', () => { const Button = styled('button', { @@ -44,8 +44,8 @@ describe('styled factory - cva', () => { test('base styles', () => { const { container } = render() - - expect(container.firstChild).toMatchInlineSnapshot(` + const { firstChild } = container as HTMLElement + expect(firstChild).toMatchInlineSnapshot(` ) - - expect(container.firstChild).toMatchInlineSnapshot(` + const { firstChild } = container as HTMLElement + expect(firstChild).toMatchInlineSnapshot(` , ) - - expect(container.firstChild).toMatchInlineSnapshot(` + const { firstChild } = container as HTMLElement + expect(firstChild).toMatchInlineSnapshot(` , ) - - expect(container.firstChild).toMatchInlineSnapshot(` + const { firstChild } = container as HTMLElement + expect(firstChild).toMatchInlineSnapshot(` , ) - - expect(container.firstChild).toMatchInlineSnapshot(` + const { firstChild } = container as HTMLElement + expect(firstChild).toMatchInlineSnapshot(` , ) - - expect(container.firstChild).toMatchInlineSnapshot(` + const { firstChild } = container as HTMLElement + expect(firstChild).toMatchInlineSnapshot(` , ) - - expect(container.firstChild).toMatchInlineSnapshot(` + const { firstChild } = container as HTMLElement + expect(firstChild).toMatchInlineSnapshot(` , ) - - expect(container.firstChild).toMatchInlineSnapshot(` + const { firstChild } = container as HTMLElement + expect(firstChild).toMatchInlineSnapshot(` ) - - expect(container.firstChild).toMatchInlineSnapshot(` + const { firstChild } = container as HTMLElement + expect(firstChild).toMatchInlineSnapshot(` ) - - expect(container.firstChild).toMatchInlineSnapshot(` + const { firstChild } = container as HTMLElement + expect(firstChild).toMatchInlineSnapshot(` , ) - - expect(container.firstChild).toMatchInlineSnapshot(` + const { firstChild } = container as HTMLElement + expect(firstChild).toMatchInlineSnapshot(` , ) - - expect(container.firstChild).toMatchInlineSnapshot(` + const { firstChild } = container as HTMLElement + expect(firstChild).toMatchInlineSnapshot(` , ) - - expect(container.firstChild).toMatchInlineSnapshot(` + const { firstChild } = container as HTMLElement + expect(firstChild).toMatchInlineSnapshot(` , ) - - expect(container.firstChild).toMatchInlineSnapshot(` + const { firstChild } = container as HTMLElement + expect(firstChild).toMatchInlineSnapshot(` , ) - - expect(container.firstChild).toMatchInlineSnapshot(` + const { firstChild } = container as HTMLElement + expect(firstChild).toMatchInlineSnapshot(` , ) - - expect(container.firstChild).toMatchInlineSnapshot(` + const { firstChild } = container as HTMLElement + expect(firstChild).toMatchInlineSnapshot(` `) }) + + test('box pattern', () => { + const { container } = render(Click me) + const { firstChild } = container as HTMLElement + expect(firstChild).toMatchInlineSnapshot( + ` +
+ Click me +
+ `, + ) + }) + + test('stack pattern', () => { + const { container } = render( + + Click me + , + ) + const { firstChild } = container as HTMLElement + expect(firstChild).toMatchInlineSnapshot( + ` +
+ Click me +
+ `, + ) + }) }) diff --git a/sandbox/codegen/__tests__/scenarios/jsx-minimal.test.tsx b/sandbox/codegen/__tests__/scenarios/jsx-minimal.test.tsx new file mode 100644 index 000000000..e21fa5c68 --- /dev/null +++ b/sandbox/codegen/__tests__/scenarios/jsx-minimal.test.tsx @@ -0,0 +1,345 @@ +import { describe, expect, test } from 'vitest' +import { Box, Stack, styled } from '../../styled-system-jsx-minimal/jsx' +import { render } from '@testing-library/react' +import { buttonWithCompoundVariants } from '../../styled-system-jsx-minimal/recipes' +import React from 'react' + +describe('styled factory - cva', () => { + const Button = styled('button', { + base: { + color: 'red.500', + bg: 'blue.500', + _hover: { + color: 'red.600', + bg: 'blue.600', + }, + }, + variants: { + size: { + sm: { + fontSize: 'sm', + px: 'sm', + py: 'xs', + }, + md: { + fontSize: 'md', + px: 'md', + py: 'sm', + }, + lg: { + fontSize: 'lg', + px: 'lg', + py: 'md', + }, + }, + }, + compoundVariants: [ + { + size: 'lg', + css: { px: '123px', zIndex: 1 }, + }, + ], + }) + + test('base styles', () => { + const { container } = render() + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('variant styles', () => { + const { container } = render() + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('custom className', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('style prop', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('style prop with variant', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('css prop', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('css prop with variant', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('all together', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) +}) + +describe('styled factory - button recipe', () => { + const Button = styled('button', buttonWithCompoundVariants) + + test('base styles', () => { + const { container } = render() + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('variant styles', () => { + const { container } = render() + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('custom className', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('style prop', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('style prop with variant', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('css prop', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('css prop with variant', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('all together', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('html props', () => { + const { container } = render( + + Click me + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` +
+ Click me +
+ `) + }) + + test('box pattern', () => { + const { container } = render(Click me) + + expect(container.firstChild).toMatchInlineSnapshot( + ` +
+ Click me +
+ `, + ) + }) + + test('stack pattern', () => { + const { container } = render( + + Click me + , + ) + + expect(container.firstChild).toMatchInlineSnapshot( + ` +
+ Click me +
+ `, + ) + }) +}) diff --git a/sandbox/codegen/__tests__/scenarios/jsx-none.test.tsx b/sandbox/codegen/__tests__/scenarios/jsx-none.test.tsx new file mode 100644 index 000000000..e21fa5c68 --- /dev/null +++ b/sandbox/codegen/__tests__/scenarios/jsx-none.test.tsx @@ -0,0 +1,345 @@ +import { describe, expect, test } from 'vitest' +import { Box, Stack, styled } from '../../styled-system-jsx-minimal/jsx' +import { render } from '@testing-library/react' +import { buttonWithCompoundVariants } from '../../styled-system-jsx-minimal/recipes' +import React from 'react' + +describe('styled factory - cva', () => { + const Button = styled('button', { + base: { + color: 'red.500', + bg: 'blue.500', + _hover: { + color: 'red.600', + bg: 'blue.600', + }, + }, + variants: { + size: { + sm: { + fontSize: 'sm', + px: 'sm', + py: 'xs', + }, + md: { + fontSize: 'md', + px: 'md', + py: 'sm', + }, + lg: { + fontSize: 'lg', + px: 'lg', + py: 'md', + }, + }, + }, + compoundVariants: [ + { + size: 'lg', + css: { px: '123px', zIndex: 1 }, + }, + ], + }) + + test('base styles', () => { + const { container } = render() + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('variant styles', () => { + const { container } = render() + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('custom className', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('style prop', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('style prop with variant', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('css prop', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('css prop with variant', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('all together', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) +}) + +describe('styled factory - button recipe', () => { + const Button = styled('button', buttonWithCompoundVariants) + + test('base styles', () => { + const { container } = render() + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('variant styles', () => { + const { container } = render() + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('custom className', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('style prop', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('style prop with variant', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('css prop', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('css prop with variant', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('all together', () => { + const { container } = render( + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` + + `) + }) + + test('html props', () => { + const { container } = render( + + Click me + , + ) + + expect(container.firstChild).toMatchInlineSnapshot(` +
+ Click me +
+ `) + }) + + test('box pattern', () => { + const { container } = render(Click me) + + expect(container.firstChild).toMatchInlineSnapshot( + ` +
+ Click me +
+ `, + ) + }) + + test('stack pattern', () => { + const { container } = render( + + Click me + , + ) + + expect(container.firstChild).toMatchInlineSnapshot( + ` +
+ Click me +
+ `, + ) + }) +}) diff --git a/sandbox/codegen/__tests__/styled-factory.test.tsx b/sandbox/codegen/__tests__/styled-factory.test.tsx index 007b0737e..f6e23e226 100644 --- a/sandbox/codegen/__tests__/styled-factory.test.tsx +++ b/sandbox/codegen/__tests__/styled-factory.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, test } from 'vitest' -import { styled } from '../styled-system/jsx' +import { Box, Stack, styled } from '../styled-system/jsx' import { render } from '@testing-library/react' import { buttonWithCompoundVariants } from '../styled-system/recipes' import React from 'react' @@ -301,4 +301,36 @@ describe('styled factory - button recipe', () => { `) }) + + test('box pattern', () => { + const { container } = render(Click me) + + expect(container.firstChild).toMatchInlineSnapshot( + ` +
+ Click me +
+ `, + ) + }) + + test('stack pattern', () => { + const { container } = render( + + Click me + , + ) + + expect(container.firstChild).toMatchInlineSnapshot( + ` +
+ Click me +
+ `, + ) + }) }) diff --git a/sandbox/codegen/cli.ts b/sandbox/codegen/cli.ts index 807e5ca68..a62dc2833 100644 --- a/sandbox/codegen/cli.ts +++ b/sandbox/codegen/cli.ts @@ -4,7 +4,7 @@ import cac from 'cac' import { spawn } from 'child_process' const cli = cac('sct') -const scenarioList = ['preact', 'qwik', 'react', 'solid', 'vue', 'strict'] +const scenarioList = ['preact', 'qwik', 'react', 'solid', 'vue', 'strict', 'jsx-minimal', 'jsx-none'] const isValidScenario = (scenario) => { if (!scenarioList.includes(scenario)) { diff --git a/sandbox/codegen/panda.jsx-minimal.config.ts b/sandbox/codegen/panda.jsx-minimal.config.ts new file mode 100644 index 000000000..ef6b4cb17 --- /dev/null +++ b/sandbox/codegen/panda.jsx-minimal.config.ts @@ -0,0 +1,21 @@ +import { defineConfig } from '@pandacss/dev' +import codegenPreset from './preset' + +export default defineConfig({ + presets: ['@pandacss/dev/presets', codegenPreset], + // Whether to use css reset + preflight: true, + + // Where to look for your css declarations + include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'], + + // Files to exclude + exclude: [], + + // The output directory for your css system + outdir: 'styled-system-jsx-minimal', + + // The JSX framework to use + jsxFramework: 'react', + jsxStyleProps: 'minimal', +}) diff --git a/sandbox/codegen/panda.jsx-none.config.ts b/sandbox/codegen/panda.jsx-none.config.ts new file mode 100644 index 000000000..1efe70b94 --- /dev/null +++ b/sandbox/codegen/panda.jsx-none.config.ts @@ -0,0 +1,21 @@ +import { defineConfig } from '@pandacss/dev' +import codegenPreset from './preset' + +export default defineConfig({ + presets: ['@pandacss/dev/presets', codegenPreset], + // Whether to use css reset + preflight: true, + + // Where to look for your css declarations + include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'], + + // Files to exclude + exclude: [], + + // The output directory for your css system + outdir: 'styled-system-jsx-none', + + // The JSX framework to use + jsxFramework: 'react', + jsxStyleProps: 'none', +}) diff --git a/sandbox/codegen/vitest.config.ts b/sandbox/codegen/vitest.config.ts index c56ccd115..1c0f6d8d1 100644 --- a/sandbox/codegen/vitest.config.ts +++ b/sandbox/codegen/vitest.config.ts @@ -4,6 +4,7 @@ import Vue from '@vitejs/plugin-vue' import preact from '@preact/preset-vite' import vueJsx from '@vitejs/plugin-vue-jsx' import { UserConfig } from 'vite' +import { UserConfig as TestUserConfig } from 'vitest' import { createRequire } from 'module' @@ -16,7 +17,7 @@ const generateCjsAlias = (cjsPackages: Array) => { })) } -const options = { +const options: TestUserConfig = { react: { test: { include: ['**/__tests__/*.{test,spec}.{j,t}s?(x)'], @@ -28,6 +29,18 @@ const options = { include: ['**/__tests__/scenarios/strict.{test,spec}.{j,t}s?(x)'], }, }, + 'jsx-minimal': { + test: { + environment: 'happy-dom', + include: ['**/__tests__/scenarios/jsx-minimal.{test,spec}.{j,t}s?(x)'], + }, + }, + 'jsx-none': { + test: { + environment: 'happy-dom', + include: ['**/__tests__/scenarios/jsx-none.{test,spec}.{j,t}s?(x)'], + }, + }, // preact: { plugins: [preact()], diff --git a/sandbox/nuxt/components/SetupDemo.vue b/sandbox/nuxt/components/SetupDemo.vue index b77f09602..83ab0b908 100644 --- a/sandbox/nuxt/components/SetupDemo.vue +++ b/sandbox/nuxt/components/SetupDemo.vue @@ -1,13 +1,16 @@