Skip to content

Commit a8a666a

Browse files
segunadebayosegunadebayo
authored
refactor: code and types (#65)
1 parent 0aabcc1 commit a8a666a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+3643
-1400
lines changed

‎idea.excalidraw

Lines changed: 2627 additions & 570 deletions
Large diffs are not rendered by default.

‎packages/core/src/atomic-rule.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@ import {
77
withoutImportant,
88
withoutSpace,
99
} from '@pandacss/shared'
10+
import type { Dict } from '@pandacss/types'
1011
import type { Root } from 'postcss'
1112
import postcss from 'postcss'
1213
import { toCss } from './to-css'
13-
import type { Dict, StylesheetContext } from './types'
14+
import type { StylesheetContext } from './types'
1415

1516
export type ProcessOptions = {
1617
scope?: string[]

‎packages/core/src/conditions.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { logger } from '@pandacss/logger'
2-
import type { BaseConditionType, Dict, RawCondition } from '@pandacss/types'
2+
import type { ConditionType, Dict, RawCondition } from '@pandacss/types'
33
import { Breakpoints } from './breakpoints'
44
import { ConditionalRule } from './conditional-rule'
55
import { parseCondition } from './parse-condition'
66

7-
const order: BaseConditionType[] = ['self-nesting', 'combinator-nesting', 'parent-nesting', 'at-rule']
7+
const order: ConditionType[] = ['self-nesting', 'combinator-nesting', 'parent-nesting', 'at-rule']
88

99
type Options = {
1010
conditions: Dict<string>

‎packages/core/src/keyframes.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import type { CssKeyframes, Dict } from '@pandacss/types'
12
import postcss from 'postcss'
23
import { toCss } from './to-css'
3-
import type { Dict } from './types'
44

55
function toString(name: string, definition: Dict) {
66
return postcss.atRule({
@@ -10,7 +10,7 @@ function toString(name: string, definition: Dict) {
1010
})
1111
}
1212

13-
export function toKeyframeCss(values: Dict) {
13+
export function toKeyframeCss(values: CssKeyframes) {
1414
const root = postcss.root()
1515

1616
for (const [name, definition] of Object.entries(values)) {

‎packages/core/src/plugins/prettify.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,5 @@ export default function prettify(): TransformCallback {
1919
}
2020
}
2121
}
22+
23+
prettify.postcssPlugin = 'panda-prettify'

‎packages/core/src/to-css.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import type { Dict } from '@pandacss/types'
12
import postcss from 'postcss'
23
import postcssNested from 'postcss-nested'
3-
import type { Dict } from './types'
44
import { postCssJs } from './vendor'
55

66
export function toCss(styles: Dict, { important }: { important?: boolean } = {}) {

‎packages/core/src/types.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { TransformHelpers } from '@pandacss/types'
1+
import type { Dict, TransformHelpers } from '@pandacss/types'
22
import type { Root } from 'postcss'
33
import type { Conditions } from './conditions'
44
import type { Utility } from './utility'
@@ -20,5 +20,3 @@ export type StylesheetContext = {
2020
transform: (prop: string, value: string) => TransformResult
2121
hash?: boolean
2222
}
23-
24-
export type Dict<T = any> = Record<string, T>

‎packages/core/src/utility.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export class Utility {
4747
/**
4848
* The map of property names to their transform functions
4949
*/
50-
private transforms: Map<string, PropertyTransform<any>> = new Map()
50+
private transforms: Map<string, PropertyTransform> = new Map()
5151

5252
/**
5353
* The map of property names to their config
@@ -179,6 +179,7 @@ export class Utility {
179179

180180
private assignProperties() {
181181
for (const [property, propertyConfig] of Object.entries(this.config)) {
182+
if (!propertyConfig) continue
182183
this.assignProperty(property, propertyConfig)
183184
}
184185
}
@@ -208,6 +209,7 @@ export class Utility {
208209

209210
private assignPropertyTypes() {
210211
for (const [property, propertyConfig] of Object.entries(this.config)) {
212+
if (!propertyConfig) continue
211213
this.assignPropertyType(property, propertyConfig)
212214
}
213215
}

‎packages/core/src/vendor/camelcase-css.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
declare module 'camelcase-css' {
2+
export default function camelcase(value: string): string
3+
}

‎packages/core/src/vendor/postcss-types.d.ts

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎packages/fixture/src/keyframes.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import type { Keyframes } from '@pandacss/types'
1+
import type { CssKeyframes } from '@pandacss/types'
22

3-
export const keyframes: Keyframes = {
3+
export const keyframes: CssKeyframes = {
44
spin: {
55
to: {
66
transform: 'rotate(360deg)',

‎packages/logger/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"kleur": "^4.1.5"
2323
},
2424
"devDependencies": {
25-
"matcher": "5.0.0"
25+
"matcher": "5.0.0",
26+
"boxen": "^7.0.0"
2627
}
2728
}

‎packages/logger/src/index.ts

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { isMatch } from 'matcher'
1+
import boxen from 'boxen'
22
import colors from 'kleur'
3+
import { isMatch } from 'matcher'
34
import util from 'util'
45

56
const omitKeys = ['level', 'type', 'time', 'pid']
@@ -180,6 +181,16 @@ class Logger {
180181
debug: (msg: string, ...args: any[]) => base('debug', msg, ...args),
181182
}
182183
}
184+
185+
box(content: string, title?: string) {
186+
return boxen(content, {
187+
padding: { left: 3, right: 3, top: 1, bottom: 1 },
188+
borderColor: 'magenta',
189+
borderStyle: 'round',
190+
title,
191+
titleAlignment: 'center',
192+
})
193+
}
183194
}
184195

185196
export const logger = new Logger()

‎packages/node/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@
4646
"ts-morph": "17.0.1"
4747
},
4848
"devDependencies": {
49-
"boxen": "^7.0.0",
5049
"@pandacss/fixture": "workspace:*",
5150
"@types/fs-extra": "9.0.13",
5251
"@types/is-glob": "^4.0.2",

‎packages/node/src/cli-box.ts

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎packages/node/src/generators/css-fn.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ export function generateCssFn(ctx: PandaContext) {
99

1010
return {
1111
dts: outdent`
12-
import { CssObject } from '../types'
13-
export declare function css(styles: CssObject): string
12+
import { SystemStyleObject } from '../types'
13+
export declare function css(styles: SystemStyleObject): string
1414
`,
1515
js: outdent`
1616
import { createCss, withoutSpace } from "../helpers"

‎packages/node/src/generators/css-map.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ export function generateCssMap() {
1616
}
1717
`,
1818
dts: outdent`
19-
import { CssObject } from "../types"
19+
import { SystemStyleObject } from "../types"
2020
21-
export declare function cssMap<T extends string>(obj: Record<T, CssObject>): (...args: Array<T>) => string;
21+
export declare function cssMap<T extends string>(obj: Record<T, SystemStyleObject>): (...args: Array<T>) => string;
2222
`,
2323
}
2424
}

‎packages/node/src/generators/global-css.ts

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,9 @@ export function generateGlobalCss() {
88
}
99
`,
1010
dts: outdent`
11-
import { Properties } from '../types/csstype'
12-
13-
export type GlobalCss = Record<string, Properties>
14-
15-
export declare function globalCss(styles: GlobalCss): void;
11+
import { GlobalStyleObject } from '../types'
12+
13+
export declare function globalCss(styles: GlobalStyleObject): void
1614
`,
1715
}
1816
}

‎packages/node/src/generators/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ function setupTypes(ctx: PandaContext): Output {
7373
dir: ctx.paths.types,
7474
files: [
7575
{ file: 'csstype.d.ts', code: code.cssType },
76-
{ file: 'panda-csstype.d.ts', code: code.pandaCssType },
76+
{ file: 'system-types.d.ts', code: code.pandaCssType },
7777
{ file: 'index.d.ts', code: code.publicType },
7878
{ file: 'token.d.ts', code: generateTokenDts(ctx.tokens) },
7979
{ file: 'prop-type.d.ts', code: generatePropTypes(ctx.utility) },

‎packages/node/src/generators/jsx/preact-jsx.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ export function generatePreactJsxFactory(ctx: PandaContext) {
99
return {
1010
dts: outdent`
1111
import type { ComponentProps, JSX } from 'preact'
12-
import type { CssProperties, CssObject } from '../types'
12+
import type { JSXStyleProperties } from '../types'
1313
1414
type Element = keyof JSX.IntrinsicElements
1515
1616
type Merge<P, T> = Omit<P, 'color'> & T;
1717
18-
export type HTML${upperName}Props<T extends Element> = Merge<ComponentProps<T>, CssProperties> & { css?: CssObject }
18+
export type HTML${upperName}Props<T extends Element> = Merge<ComponentProps<T>, JSXStyleProperties>
1919
2020
type JSXFactory = {
2121
[K in Element]: (props: HTML${upperName}Props<K>) => JSX.Element

‎packages/node/src/generators/jsx/preact-pattern.ts

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,15 @@ function generate(name: string, pattern: PatternConfig, jsxFactory: string) {
2525
dts: outdent`
2626
import { ComponentProps, JSX, ComponentChildren } from 'preact';
2727
import { ${upperName}Options } from '../patterns/${dashCase(name)}'
28-
import { CssObject } from '../types'
28+
import { JSXStyleProperties, Assign } from '../types'
2929
3030
type ElementType = keyof JSX.IntrinsicElements
31+
3132
type PropsWithChildren<T> = T & { children?: ComponentChildren }
32-
33-
type Merge<T, U> = Omit<T, keyof U> & U
3433
type PropsOf<C extends ElementType> = ComponentProps<C>
35-
type StyleProps = CssObject & { css?: CssObject }
3634
37-
type Polymorphic<C extends ElementType = 'div', P = {}> = StyleProps &
38-
Merge<PropsWithChildren<PropsOf<C>>, P & { as?: C; color?: string }>
35+
type Polymorphic<C extends ElementType = 'div', P = {}> = JSXStyleProperties &
36+
Assign<Omit<PropsOf<C>, 'color'>, P & { as?: C }>
3937
4038
type ${jsxName}Props<C extends ElementType> = Polymorphic<C, ${upperName}Options>
4139

‎packages/node/src/generators/jsx/react-jsx.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,11 @@ export function generateReactJsxFactory(ctx: PandaContext) {
99
return {
1010
dts: outdent`
1111
import type { ComponentProps } from "react"
12-
import type { CssProperties, CssObject } from "../types"
12+
import type { JSXStyleProperties } from "../types"
1313
1414
type Element = keyof JSX.IntrinsicElements
1515
16-
type Merge<P, T> = Omit<P, "color"> & T;
17-
18-
export type HTML${upperName}Props<T extends Element> = Merge<ComponentProps<T>, CssProperties> & { css?: CssObject }
16+
export type HTML${upperName}Props<T extends Element> = Omit<ComponentProps<T>, "color"> & JSXStyleProperties
1917
2018
type JSXFactory = {
2119
[K in Element]: (props: HTML${upperName}Props<K>) => JSX.Element

‎packages/node/src/generators/jsx/react-pattern.ts

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,14 @@ function generate(name: string, pattern: PatternConfig, jsxFactory: string) {
2525
dts: outdent`
2626
import { ComponentProps, ElementType, PropsWithChildren } from 'react'
2727
import { ${upperName}Options } from '../patterns/${dashCase(name)}'
28-
import { CssObject } from '../types'
28+
import { JSXStyleProperties, Assign } from '../types'
2929
30-
type Merge<T, U> = Omit<T, keyof U> & U
3130
type PropsOf<C extends ElementType> = ComponentProps<C>
32-
type StyleProps = CssObject & { css?: CssObject }
3331
34-
type Polymorphic<C extends ElementType = 'div', P = {}> = StyleProps &
35-
Merge<PropsWithChildren<PropsOf<C>>, P & { as?: C; color?: string }>
32+
type Polymorphic<C extends ElementType = 'div', P = {}> = JSXStyleProperties &
33+
Assign<Omit<PropsOf<C>, 'color'>, P & { as?: C }>
3634
37-
type ${jsxName}Props<C extends ElementType> = Polymorphic<C, ${upperName}Options>
35+
export type ${jsxName}Props<C extends ElementType> = Polymorphic<C, ${upperName}Options>
3836
3937
export declare function ${jsxName}<V extends ElementType>(props: ${jsxName}Props<V>): JSX.Element
4038
`,

‎packages/node/src/generators/jsx/solid-jsx.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,11 @@ export function generateSolidJsxFactory(ctx: PandaContext) {
88
return {
99
dts: outdent`
1010
import type { JSX } from 'solid-js'
11-
import type { CssProperties, CssObject } from '../types'
11+
import type { JSXStyleProperties, Assign} from '../types'
1212
1313
type Element = keyof JSX.IntrinsicElements
14-
15-
type Merge<P, T> = Omit<P, 'color'> & T;
1614
17-
export type HTML${upperName}Props<T extends Element> = Merge<JSX.IntrinsicElements[T], CssProperties> & { css?: CssObject }
15+
export type HTML${upperName}Props<T extends Element> = Assign<JSX.IntrinsicElements[T], JSXStyleProperties>
1816
1917
type JSXFactory = {
2018
[K in Element]: (props: HTML${upperName}Props<K>) => JSX.Element

‎packages/node/src/generators/jsx/solid-pattern.ts

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,15 @@ function generate(name: string, pattern: PatternConfig, jsxFactory: string) {
2525
dts: outdent`
2626
import { ComponentProps, JSX } from 'solid-js'
2727
import { ${upperName}Options } from '../patterns/${dashCase(name)}'
28-
import { CssObject } from '../types'
28+
import { Assign, JSXStyleProperties } from '../types'
2929
3030
type ElementType = keyof JSX.IntrinsicElements
3131
type PropsOf<C extends ElementType> = ComponentProps<C>
32-
type StyleProps = CssObject & { css?: CssObject }
33-
type Merge<T, U> = Omit<T, keyof U> & U
3432
35-
type Polymorphic<C extends ElementType = 'div', P = {}> = StyleProps &
36-
Merge<PropsOf<C>, P & { as?: C; color?: string }>
33+
type Polymorphic<C extends ElementType = 'div', P = {}> = JSXStyleProperties &
34+
Assign<Omit<PropsOf<C>, 'color'>, P & { as?: C }>
3735
38-
type ${jsxName}Props<C extends ElementType> = Polymorphic<C, ${upperName}Options>
36+
export type ${jsxName}Props<C extends ElementType> = Polymorphic<C, ${upperName}Options>
3937
4038
export declare function ${jsxName}<V extends ElementType>(props: ${jsxName}Props<V>): JSX.Element
4139
`,

‎packages/node/src/generators/pattern.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ function generate(name: string, pattern: PatternConfig) {
1111
return {
1212
name: dashCase(name),
1313
dts: outdent`
14-
import { CssObject, ConditionalValue } from "../types"
14+
import { SystemStyleObject, ConditionalValue } from "../types"
1515
import { Properties } from "../types/csstype"
1616
import { Tokens } from "../types/token"
1717
@@ -21,7 +21,7 @@ function generate(name: string, pattern: PatternConfig) {
2121
const value = properties![key]
2222
return match(value)
2323
.with({ type: 'property' }, (value) => {
24-
return `${key}?: CssObject["${value.value}"]`
24+
return `${key}?: SystemStyleObject["${value.value}"]`
2525
})
2626
.with({ type: 'token' }, (value) => {
2727
if (value.property) {
@@ -43,7 +43,7 @@ function generate(name: string, pattern: PatternConfig) {
4343
strict
4444
? outdent`export declare function ${name}(options: ${capitalize(name)}Options): string`
4545
: outdent`
46-
type Merge<T> = Omit<CssObject, keyof T> & T
46+
type Merge<T> = Omit<SystemStyleObject, keyof T> & T
4747
export declare function ${name}(options: Merge<${capitalize(name)}Options>): string
4848
`
4949
}

‎packages/node/src/generators/reset.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,12 @@ const reset = css`
5757
5858
::-webkit-search-decoration {
5959
-webkit-appearance: none;
60+
appearance: none;
6061
}
6162
6263
::-webkit-file-upload-button {
6364
-webkit-appearance: button;
65+
appearance: none;
6466
font: inherit;
6567
}
6668

0 commit comments

Comments
 (0)