Skip to content

Commit

Permalink
Improve: Autofill solid to outline and border, resolved #302
Browse files Browse the repository at this point in the history
  • Loading branch information
@1aron
1aron committed Nov 7, 2023
1 parent 56639fa commit 2c889a0
Show file tree
Hide file tree
Showing 9 changed files with 130 additions and 93 deletions.
10 changes: 5 additions & 5 deletions packages/css/src/config/functions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,9 @@ const functions = {
suffix = ''
}
if (bypassHandlingSeparator) {
currentValueComponents.push({ type: 'separator', value: separator })
currentValueComponents.push({ type: 'separator', value: separator, text: separator })
} else {
currentValueComponents.push({ type: 'separator', value: separator, prefix, suffix })
currentValueComponents.push({ type: 'separator', value: separator, text: prefix + separator + suffix })
}
}
bypassHandlingUnit = false
Expand All @@ -58,13 +58,13 @@ const functions = {
currentValueComponents.push({ type: 'string', value: symbolResult[1] })
}
const functionName = symbolResult ? current.slice(1) : current
const newValueComponent: Rule['valueComponents'][0] = { type: 'function', name: functionName, symbol: char, childrens: [] }
const newValueComponent: Rule['valueComponents'][0] = { type: 'function', name: functionName, symbol: char, children: [] }
currentValueComponents.push(newValueComponent)
current = ''
i++
const isVarFunction = newValueComponent.name === '$' || newValueComponent.name === 'var'
anaylze(
newValueComponent.childrens,
newValueComponent.children,
functionName !== ''
&& functionName !== 'calc'
&& (
Expand Down Expand Up @@ -114,7 +114,7 @@ const functions = {
}
anaylze(valueComponents, false, false)

return 'calc(' + this.transformValueComponents(valueComponents, functions.calc.unit ?? this.options.unit, bypassVariableNames) + ')'
return 'calc(' + this.resolveValue(valueComponents, functions.calc.unit ?? this.definition.unit, bypassVariableNames) + ')'
}
} as FunctionDefinition,
translate: { unit: 'rem' },
Expand Down
12 changes: 6 additions & 6 deletions packages/css/src/config/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,6 @@ export {

export type VariableValue = number | string | Array<number | string>
export type VariableDefinition = { [key in '' | `@${string}`]?: VariableValue } & { [key: string]: VariableValue | VariableDefinition }
export type FunctionDefinition = {
unit?: string
colored?: boolean
transform?(this: Rule, value: string): string | ValueComponent[]
}
export type FunctionDefinitions = { [key: string]: FunctionDefinition }
export type AnimationDefinition = { [key in 'from' | 'to']?: CSSDeclarations } & { [key: string]: CSSDeclarations }
export type AnimationDefinitions = { [key: string]: AnimationDefinition }
export type SelectorDefinitions = { [key: string]: string | string[] | SelectorDefinitions }
Expand All @@ -51,6 +45,12 @@ export type StyleDefinitions = { [key: string]: string | StyleDefinitions }
export type RuleDefinitions = { [key in keyof typeof rules | string]?: RuleDefinition }
export type VariableDefinitions = { [key in keyof typeof rules]?: VariableDefinition } & { [key: string]: VariableDefinition | VariableValue }
export type SemanticDefinitions = { [key in keyof typeof semantics]?: CSSDeclarations } & { [key: string]: CSSDeclarations }
export interface FunctionDefinition {
unit?: string
colored?: boolean
transform?(this: Rule, value: string): string | ValueComponent[]
}
export type FunctionDefinitions = { [key: string]: FunctionDefinition }

export interface Config {
extends?: (Config | { config: Config })[]
Expand Down
37 changes: 27 additions & 10 deletions packages/css/src/config/rules.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,22 @@ import type { Rule, RuleDefinition } from '../rule'
import { CSSDeclarations } from '../types/css-declarations'
import { Layer } from '../layer'

export const BORDER_STYLES = ['hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']
export const BORDER_STYLES = ['none', 'auto', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']

export const autofillSolidToValueComponent: RuleDefinition['transformValueComponents'] = function (valueComponents) {
if (valueComponents.length < 2) return valueComponents
const styleValueComponent = valueComponents.find((valueComponent) => {
return valueComponent.type === 'string' && BORDER_STYLES.includes(valueComponent.value) ||
valueComponent.type === 'variable' && BORDER_STYLES.includes(valueComponent.variable.value)
})
if (!styleValueComponent) {
valueComponents.push(
{ type: 'separator', value: ' ' },
{ type: 'string', value: 'solid' }
)
}
return valueComponents
}

const rules = {
group: {
Expand Down Expand Up @@ -1168,7 +1183,8 @@ const rules = {
match: /^b:/,
unit: 'rem',
colored: true,
layer: Layer.CoreNativeShorthand
layer: Layer.CoreNativeShorthand,
transformValueComponents: autofillSolidToValueComponent,
} as RuleDefinition,
'background-attachment': {
match: ['(?:bg|background)', ['fixed', 'local', 'scroll']],
Expand Down Expand Up @@ -1305,7 +1321,7 @@ const rules = {
'grid-column': {
match: /^grid-col(?:umn)?(?:-span)?:/,
layer: Layer.CoreNativeShorthand,
transform(value) {
transformValue(value) {
return this.prefix.slice(-5, -1) === 'span' && value !== 'auto'
? 'span' + ' ' + value + '/' + 'span' + ' ' + value
: value
Expand Down Expand Up @@ -1334,7 +1350,7 @@ const rules = {
'grid-row': {
match: /^grid-row-span:/,
layer: Layer.CoreNativeShorthand,
transform(value) {
transformValue(value) {
return this.prefix.slice(-5, -1) === 'span' && value !== 'auto'
? 'span' + ' ' + value + '/' + 'span' + ' ' + value
: value
Expand Down Expand Up @@ -1488,7 +1504,7 @@ const rules = {
variableGroups: ['spacing']
} as RuleDefinition,
'outline-style': {
match: ['outline', ['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']],
match: ['outline', BORDER_STYLES],
layer: Layer.CoreNative
} as RuleDefinition,
'outline-width': {
Expand All @@ -1502,11 +1518,12 @@ const rules = {
layer: Layer.CoreNativeShorthand,
colored: true,
variableGroups: [
'outlineWidth',
'outlineStyle',
'outlineOffset',
'outlineColor'
]
'outline-width',
'outline-style',
'outline-offset',
'outline-color'
],
transformValueComponents: autofillSolidToValueComponent
} as RuleDefinition,
'accent-color': {
match: /^accent:/,
Expand Down
25 changes: 11 additions & 14 deletions packages/css/src/core.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,13 @@ type VariableValue =
{ type: 'string', value: string }
| { type: 'number', value: number }
| { type: 'color', value: string, space: 'rgb' | 'hsl' }
export type Variable = Omit<VariableValue, 'value' | 'space'> & {
value?: any,
space?: any,
usage?: number,
natives?: NativeRule[],
themes?: { [theme: string]: VariableValue }
}

export interface MasterCSS {
readonly style: HTMLStyleElement
Expand All @@ -19,17 +26,7 @@ export interface MasterCSS {
styles: Record<string, string[]>
stylesBy: Record<string, string[]>
selectors: Record<string, [RegExp, string[]][]>
variables: Record<
string,
Omit<VariableValue, 'value' | 'space'>
& {
value?: any,
space?: any,
usage?: number,
natives?: NativeRule[],
themes?: { [theme: string]: VariableValue }
}
>
variables: Record<string, Variable>
mediaQueries: Record<string, string | number>
hasVariablesRule: boolean
hasKeyframesRule: boolean
Expand Down Expand Up @@ -549,7 +546,7 @@ export class MasterCSS {
// animations
this.handleRuleWithAnimationNames(rule, true)

rule.options.insert?.call(rule)
rule.definition.insert?.call(rule)
}
}
} else {
Expand Down Expand Up @@ -965,7 +962,7 @@ export class MasterCSS {
}
}

rule.options.delete?.call(rule, name)
rule.definition.delete?.call(rule, name)
}

if (Object.prototype.hasOwnProperty.call(this.styles, className)) {
Expand Down Expand Up @@ -1331,7 +1328,7 @@ export class MasterCSS {
// animations
this.handleRuleWithAnimationNames(rule)

rule.options.insert?.call(rule)
rule.definition.insert?.call(rule)
}
}

Expand Down
8 changes: 4 additions & 4 deletions packages/css/src/functions/reorder-for-readable-classes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@ export default function reorderForReadableClasses(classes: string[], config?: Co
// 只保留樣式語法相關的 rules, 排除 keyframes 與 variables 在外
.filter(eachRule => eachRule.layer)
.sort((a, b) => {
if (a.options.layer === Layer.Semantic && b.options.layer !== Layer.Semantic) {
if (a.definition.layer === Layer.Semantic && b.definition.layer !== Layer.Semantic) {
// 如果 a 是 Layer.Semantic 而 b 不是，则 a 应该排在 b 前面
return -1
} else if (a.options.layer !== Layer.Semantic && b.options.layer === Layer.Semantic) {
} else if (a.definition.layer !== Layer.Semantic && b.definition.layer === Layer.Semantic) {
// 如果 b 是 Layer.Semantic 而 a 不是，则 b 应该排在 a 前面
return 1
} else if (a.options.id !== b.options.id) {
} else if (a.definition.id !== b.definition.id) {
return a.className.localeCompare(b.className)
} else {
// 檢查 vendorSuffixSelectors 是否存在
Expand Down Expand Up @@ -61,7 +61,7 @@ export default function reorderForReadableClasses(classes: string[], config?: Co

// 如果 a 和 b 的 id 相同，則按照以下規則排序
if (
a.options.id === b.options.id &&
a.definition.id === b.definition.id &&
a.stateToken === b.stateToken
) {
return a.className.localeCompare(b.className)
Expand Down
Loading

0 comments on commit 2c889a0

Please sign in to comment.