Detect conflicting multi-rule classes (#498)
parent
627d463f8f
commit
4be5d9d082
|
@ -25,43 +25,41 @@ export async function getCssConflictDiagnostics(
|
||||||
classNames.forEach((className, index) => {
|
classNames.forEach((className, index) => {
|
||||||
if (state.jit) {
|
if (state.jit) {
|
||||||
let { rules } = jit.generateRules(state, [className.className])
|
let { rules } = jit.generateRules(state, [className.className])
|
||||||
if (rules.length !== 1) {
|
if (rules.length === 0) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
let rule = rules[0]
|
|
||||||
let context: string[]
|
let info: Array<{ context: string[]; properties: string[] }> = rules.map((rule) => {
|
||||||
let properties = []
|
let properties: string[] = []
|
||||||
rule.walkDecls(({ prop }) => {
|
rule.walkDecls(({ prop }) => {
|
||||||
properties.push(prop)
|
properties.push(prop)
|
||||||
})
|
})
|
||||||
|
let context = jit.getRuleContext(state, rule, className.className)
|
||||||
|
return { context, properties }
|
||||||
|
})
|
||||||
|
|
||||||
let otherClassNames = classNames.filter((_className, i) => i !== index)
|
let otherClassNames = classNames.filter((_className, i) => i !== index)
|
||||||
|
|
||||||
let conflictingClassNames = otherClassNames.filter((otherClassName) => {
|
let conflictingClassNames = otherClassNames.filter((otherClassName) => {
|
||||||
let { rules } = jit.generateRules(state, [otherClassName.className])
|
let { rules: otherRules } = jit.generateRules(state, [otherClassName.className])
|
||||||
if (rules.length !== 1) {
|
if (otherRules.length !== rules.length) {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
let otherRule = rules[0]
|
for (let i = 0; i < otherRules.length; i++) {
|
||||||
|
let rule = otherRules[i]
|
||||||
let otherProperties = []
|
let properties: string[] = []
|
||||||
otherRule.walkDecls(({ prop }) => {
|
rule.walkDecls(({ prop }) => {
|
||||||
otherProperties.push(prop)
|
properties.push(prop)
|
||||||
})
|
})
|
||||||
|
if (!equal(info[i].properties, properties)) {
|
||||||
if (!equal(properties, otherProperties)) {
|
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
let context = jit.getRuleContext(state, rule, otherClassName.className)
|
||||||
if (!context) {
|
if (!equal(info[i].context, context)) {
|
||||||
context = jit.getRuleContext(state, rule, className.className)
|
|
||||||
}
|
|
||||||
let otherContext = jit.getRuleContext(state, otherRule, otherClassName.className)
|
|
||||||
|
|
||||||
if (!equal(context, otherContext)) {
|
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return true
|
return true
|
||||||
})
|
})
|
||||||
|
@ -77,9 +75,7 @@ export async function getCssConflictDiagnostics(
|
||||||
severity === 'error'
|
severity === 'error'
|
||||||
? 1 /* DiagnosticSeverity.Error */
|
? 1 /* DiagnosticSeverity.Error */
|
||||||
: 2 /* DiagnosticSeverity.Warning */,
|
: 2 /* DiagnosticSeverity.Warning */,
|
||||||
message: `'${className.className}' applies the same CSS ${
|
message: `'${className.className}' applies the same CSS properties as ${joinWithAnd(
|
||||||
properties.length === 1 ? 'property' : 'properties'
|
|
||||||
} as ${joinWithAnd(
|
|
||||||
conflictingClassNames.map(
|
conflictingClassNames.map(
|
||||||
(conflictingClassName) => `'${conflictingClassName.className}'`
|
(conflictingClassName) => `'${conflictingClassName.className}'`
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue