|
| 1 | +import type { Result as PostcssResult, Rule } from 'postcss' |
| 2 | +import type { IStyleHandlerOptions, UniAppXUnsupportedMode } from '../types' |
| 3 | +import selectorParser from 'postcss-selector-parser' |
| 4 | + |
| 5 | +const ALLOWED_DISPLAY_VALUES = new Set(['flex', 'none']) |
| 6 | +const FALLBACK_CLASS_RE = /\.((?:\\.|[\w-])+)/g |
| 7 | +const IMPORTANT_SUFFIX_RE = /\s*!important$/i |
| 8 | + |
| 9 | +function isUniAppXUvueTarget( |
| 10 | + options?: Pick<IStyleHandlerOptions, 'uniAppX' | 'uniAppXCssTarget'>, |
| 11 | +) { |
| 12 | + return Boolean(options?.uniAppX) && options?.uniAppXCssTarget === 'uvue' |
| 13 | +} |
| 14 | + |
| 15 | +function normalizeUnsupportedMode(mode?: UniAppXUnsupportedMode): UniAppXUnsupportedMode { |
| 16 | + return mode ?? 'warn' |
| 17 | +} |
| 18 | + |
| 19 | +function normalizeValue(value: string) { |
| 20 | + return value.trim().toLowerCase().replace(IMPORTANT_SUFFIX_RE, '') |
| 21 | +} |
| 22 | + |
| 23 | +function getSourceFile(rule: Rule, result: PostcssResult) { |
| 24 | + return rule.source?.input.from ?? result.opts.from ?? 'unknown source' |
| 25 | +} |
| 26 | + |
| 27 | +function collectUtilityClassNames(rule: Rule) { |
| 28 | + const classNames = new Set<string>() |
| 29 | + |
| 30 | + for (const selector of rule.selectors ?? []) { |
| 31 | + try { |
| 32 | + const ast = selectorParser().astSync(selector) |
| 33 | + ast.walkClasses((node) => { |
| 34 | + if (node.value) { |
| 35 | + classNames.add(node.value) |
| 36 | + } |
| 37 | + }) |
| 38 | + } |
| 39 | + catch { |
| 40 | + for (const match of selector.matchAll(FALLBACK_CLASS_RE)) { |
| 41 | + if (match[1]) { |
| 42 | + classNames.add(match[1].replaceAll('\\', '')) |
| 43 | + } |
| 44 | + } |
| 45 | + } |
| 46 | + } |
| 47 | + |
| 48 | + return [...classNames] |
| 49 | +} |
| 50 | + |
| 51 | +function hasOnlyClassSelectors(rule: Rule) { |
| 52 | + const selectors = rule.selectors ?? [] |
| 53 | + if (selectors.length === 0) { |
| 54 | + return false |
| 55 | + } |
| 56 | + |
| 57 | + return selectors.every((selector) => { |
| 58 | + try { |
| 59 | + const ast = selectorParser().astSync(selector) |
| 60 | + return ast.nodes.every(node => node.nodes.length > 0 && node.nodes.every(child => child.type === 'class')) |
| 61 | + } |
| 62 | + catch { |
| 63 | + return false |
| 64 | + } |
| 65 | + }) |
| 66 | +} |
| 67 | + |
| 68 | +function getUnsupportedDeclarationReason(prop: string, value: string) { |
| 69 | + const normalizedProp = prop.trim().toLowerCase() |
| 70 | + const normalizedValue = normalizeValue(value) |
| 71 | + |
| 72 | + if (normalizedProp === 'display' && !ALLOWED_DISPLAY_VALUES.has(normalizedValue)) { |
| 73 | + return `${normalizedProp}: ${value}` |
| 74 | + } |
| 75 | + |
| 76 | + if (normalizedProp === 'min-height' && normalizedValue === '100vh') { |
| 77 | + return `${normalizedProp}: ${value}` |
| 78 | + } |
| 79 | + |
| 80 | + if ( |
| 81 | + normalizedProp === 'grid-template-columns' |
| 82 | + || normalizedProp === 'grid-template-rows' |
| 83 | + || normalizedProp === 'grid-auto-columns' |
| 84 | + || normalizedProp === 'grid-auto-rows' |
| 85 | + || normalizedProp === 'grid-auto-flow' |
| 86 | + ) { |
| 87 | + return `${normalizedProp}: ${value}` |
| 88 | + } |
| 89 | + |
| 90 | + if (normalizedProp === 'gap' || normalizedProp === 'row-gap' || normalizedProp === 'column-gap') { |
| 91 | + return `${normalizedProp}: ${value}` |
| 92 | + } |
| 93 | +} |
| 94 | + |
| 95 | +function reportUnsupportedRule( |
| 96 | + rule: Rule, |
| 97 | + result: PostcssResult, |
| 98 | + mode: UniAppXUnsupportedMode, |
| 99 | + warningCache: Set<string>, |
| 100 | + reason: string, |
| 101 | +) { |
| 102 | + if (mode === 'silent') { |
| 103 | + return |
| 104 | + } |
| 105 | + |
| 106 | + const classNames = collectUtilityClassNames(rule) |
| 107 | + const classLabel = classNames.length > 0 ? classNames.join(', ') : rule.selector |
| 108 | + const source = getSourceFile(rule, result) |
| 109 | + const message = `uni-app x uvue unsupported utility: ${classLabel} (${reason}) in ${source}` |
| 110 | + |
| 111 | + if (mode === 'error') { |
| 112 | + throw rule.error(message) |
| 113 | + } |
| 114 | + |
| 115 | + if (warningCache.has(message)) { |
| 116 | + return |
| 117 | + } |
| 118 | + |
| 119 | + warningCache.add(message) |
| 120 | + rule.warn(result, message) |
| 121 | +} |
| 122 | + |
| 123 | +export function applyUniAppXUvueCompatibility( |
| 124 | + result: PostcssResult, |
| 125 | + options?: Pick<IStyleHandlerOptions, 'uniAppX' | 'uniAppXCssTarget' | 'uniAppXUnsupported'>, |
| 126 | +) { |
| 127 | + if (!isUniAppXUvueTarget(options)) { |
| 128 | + return result |
| 129 | + } |
| 130 | + |
| 131 | + const mode = normalizeUnsupportedMode(options?.uniAppXUnsupported) |
| 132 | + const warningCache = new Set<string>() |
| 133 | + |
| 134 | + result.root.walkRules((rule) => { |
| 135 | + if (!hasOnlyClassSelectors(rule)) { |
| 136 | + reportUnsupportedRule(rule, result, mode, warningCache, 'selector must be class-only') |
| 137 | + rule.remove() |
| 138 | + return |
| 139 | + } |
| 140 | + |
| 141 | + rule.walkDecls((decl) => { |
| 142 | + const reason = getUnsupportedDeclarationReason(decl.prop, decl.value) |
| 143 | + if (!reason) { |
| 144 | + return |
| 145 | + } |
| 146 | + |
| 147 | + reportUnsupportedRule(rule, result, mode, warningCache, reason) |
| 148 | + decl.remove() |
| 149 | + }) |
| 150 | + |
| 151 | + if ((rule.nodes?.length ?? 0) === 0) { |
| 152 | + rule.remove() |
| 153 | + } |
| 154 | + }) |
| 155 | + |
| 156 | + result.root.walkAtRules((atRule) => { |
| 157 | + if ((atRule.nodes?.length ?? 0) === 0) { |
| 158 | + atRule.remove() |
| 159 | + } |
| 160 | + }) |
| 161 | + |
| 162 | + const nextResult = result.root.toResult(result.opts) |
| 163 | + nextResult.messages.push(...result.messages) |
| 164 | + return nextResult |
| 165 | +} |
0 commit comments