diff --git a/packages/uni-nvue-styler/build.json b/packages/uni-nvue-styler/build.json index 263af45c58278a7f97871a8ecf064ab55717b0af..3f0efae57f93ece00d362c810c20313a11a2fa6f 100644 --- a/packages/uni-nvue-styler/build.json +++ b/packages/uni-nvue-styler/build.json @@ -2,12 +2,22 @@ { "input": { "src/esm.ts": ["dist/uni-nvue-styler.es.js"] - } + }, + "external": ["@vue/shared"] }, { "input": { "src/index.ts": ["dist/uni-nvue-styler.cjs.js"] }, + "external": ["postcss", "parse-css-font"], + "alias": { + "entries": [ + { + "find": "shared", + "replacement": "@vue/shared" + } + ] + }, "compilerOptions": { "declaration": true } diff --git a/packages/uni-nvue-styler/package.json b/packages/uni-nvue-styler/package.json index 6a258e9a77cf93e2bacd77bcde0d83bca92519dc..4ce2b1ff8a1c8b2fc85c6c37ba66e59ba62d98e7 100644 --- a/packages/uni-nvue-styler/package.json +++ b/packages/uni-nvue-styler/package.json @@ -3,7 +3,6 @@ "version": "0.0.1-nvue3.3030820220125001", "description": "uni-nvue-styler", "main": "./dist/uni-nvue-styler.cjs.js", - "module": "./dist/uni-nvue-styler.es.js", "types": "./dist/uni-nvue-styler.d.ts", "files": [ "dist" diff --git a/packages/uni-nvue-styler/src/esm.ts b/packages/uni-nvue-styler/src/esm.ts index c487347fde79e612905aef4cd663154056d23c12..ec8f106b4df755875af61790d3ea8c60ffd1a31b 100644 --- a/packages/uni-nvue-styler/src/esm.ts +++ b/packages/uni-nvue-styler/src/esm.ts @@ -1,2 +1 @@ export { expand } from './expand' -export { normalize } from './normalize' diff --git a/packages/uni-nvue-styler/src/expand/background.ts b/packages/uni-nvue-styler/src/expand/background.ts index ba8db0e7c070b30495e5d3b1abf968383257a533..2578031ee9dcfbefb64b0b29ab8cf9d0e17eb3ce 100644 --- a/packages/uni-nvue-styler/src/expand/background.ts +++ b/packages/uni-nvue-styler/src/expand/background.ts @@ -1,11 +1,14 @@ import { createDecl, TransformDecl } from '../utils' +const backgroundColor = __NODE_JS__ ? 'background-color' : 'backgroundColor' +const backgroundImage = __NODE_JS__ ? 'background-image' : 'backgroundImage' + export const transformBackground: TransformDecl = (decl) => { const { value, important, raws, source } = decl if (/^#?\S+$/.test(value) || /^rgba?(.+)$/.test(value)) { - return [createDecl('background-color', value, important, raws, source)] + return [createDecl(backgroundColor, value, important, raws, source)] } else if (/^linear-gradient(.+)$/.test(value)) { - return [createDecl('background-image', value, important, raws, source)] + return [createDecl(backgroundImage, value, important, raws, source)] } return [decl] } diff --git a/packages/uni-nvue-styler/src/expand/border.ts b/packages/uni-nvue-styler/src/expand/border.ts index 7dec0af32485d6589b513d644f9bee207d32c21f..b791bd629dbb91f1be1f55aa9f08a4b93600e4d6 100644 --- a/packages/uni-nvue-styler/src/expand/border.ts +++ b/packages/uni-nvue-styler/src/expand/border.ts @@ -1,5 +1,9 @@ import { createDecl, TransformDecl } from '../utils' +const borderWidth = __NODE_JS__ ? '-width' : 'Width' +const borderStyle = __NODE_JS__ ? '-style' : 'Style' +const borderColor = __NODE_JS__ ? '-color' : 'Color' + export const transformBorder: TransformDecl = (decl) => { const { prop, value, important, raws, source } = decl const splitResult = value.replace(/\s*,\s*/g, ',').split(/\s+/) @@ -14,21 +18,21 @@ export const transformBorder: TransformDecl = (decl) => { } return [ createDecl( - prop + '-width', + prop + borderWidth, (result[0] || '0').trim(), important, raws, source ), createDecl( - prop + '-style', + prop + borderStyle, (result[1] || 'solid').trim(), important, raws, source ), createDecl( - prop + '-color', + prop + borderColor, (result[2] || '#000000').trim(), important, raws, diff --git a/packages/uni-nvue-styler/src/expand/borderColor.ts b/packages/uni-nvue-styler/src/expand/borderColor.ts index 64bcaf375b9bb16b134f56076c3bfc585310ae93..4f670c75a5301ebdcdd01131fe0a08f21eeebffc 100644 --- a/packages/uni-nvue-styler/src/expand/borderColor.ts +++ b/packages/uni-nvue-styler/src/expand/borderColor.ts @@ -1,8 +1,17 @@ +import { capitalize } from '@vue/shared' import { createDecl, TransformDecl } from '../utils' +const borderTop = __NODE_JS__ ? 'border-top-' : 'borderTop' +const borderRight = __NODE_JS__ ? 'border-right-' : 'borderRight' +const borderBottom = __NODE_JS__ ? 'border-bottom-' : 'borderBottom' +const borderLeft = __NODE_JS__ ? 'border-left-' : 'borderLeft' + export const transformBorderColor: TransformDecl = (decl) => { const { prop, value, important, raws, source } = decl - const property = prop.split('-')[1] + let property = prop.split('-')[1] + if (!__NODE_JS__) { + property = capitalize(property) + } const splitResult = value.replace(/\s*,\s*/g, ',').split(/\s+/) switch (splitResult.length) { case 1: @@ -16,33 +25,15 @@ export const transformBorderColor: TransformDecl = (decl) => { } return [ + createDecl(borderTop + property, splitResult[0], important, raws, source), + createDecl(borderRight + property, splitResult[1], important, raws, source), createDecl( - 'border-top-' + property, - splitResult[0], - important, - raws, - source - ), - createDecl( - 'border-right-' + property, - splitResult[1], - important, - raws, - source - ), - createDecl( - 'border-bottom-' + property, + borderBottom + property, splitResult[2], important, raws, source ), - createDecl( - 'border-left-' + property, - splitResult[3], - important, - raws, - source - ), + createDecl(borderLeft + property, splitResult[3], important, raws, source), ] } diff --git a/packages/uni-nvue-styler/src/expand/borderRadius.ts b/packages/uni-nvue-styler/src/expand/borderRadius.ts index 159733be9d7276c4c9113b3381b07ae320e01f6f..9be78b91120b864c2409970fb064b7b7155875a1 100644 --- a/packages/uni-nvue-styler/src/expand/borderRadius.ts +++ b/packages/uni-nvue-styler/src/expand/borderRadius.ts @@ -1,5 +1,17 @@ import { createDecl, TransformDecl } from '../utils' +const borderTopLeftRadius = __NODE_JS__ + ? 'border-top-left-radius' + : 'borderTopLeftRadius' +const borderTopRightRadius = __NODE_JS__ + ? 'border-top-right-radius' + : 'borderTopRightRadius' +const borderBottomRightRadius = __NODE_JS__ + ? 'border-bottom-right-radius' + : 'borderBottomRightRadius' +const borderBottomLeftRadius = __NODE_JS__ + ? 'border-bottom-left-radius' + : 'borderBottomLeftRadius' export const transformBorderRadius: TransformDecl = (decl) => { const { value, important, raws, source } = decl const splitResult = value.split(/\s+/) @@ -17,33 +29,15 @@ export const transformBorderRadius: TransformDecl = (decl) => { break } return [ + createDecl(borderTopLeftRadius, splitResult[0], important, raws, source), + createDecl(borderTopRightRadius, splitResult[1], important, raws, source), createDecl( - 'border-top-left-radius', - splitResult[0], - important, - raws, - source - ), - createDecl( - 'border-top-right-radius', - splitResult[1], - important, - raws, - source - ), - createDecl( - 'border-bottom-right-radius', + borderBottomRightRadius, splitResult[2], important, raws, source ), - createDecl( - 'border-bottom-left-radius', - splitResult[3], - important, - raws, - source - ), + createDecl(borderBottomLeftRadius, splitResult[3], important, raws, source), ] } diff --git a/packages/uni-nvue-styler/src/expand/flexFlow.ts b/packages/uni-nvue-styler/src/expand/flexFlow.ts index b0477b655951075502c31f33118ecd72a07f361f..ef2192cae28ab9f1bcc9b78a18f9b8b8a6eb1da9 100644 --- a/packages/uni-nvue-styler/src/expand/flexFlow.ts +++ b/packages/uni-nvue-styler/src/expand/flexFlow.ts @@ -1,5 +1,7 @@ import { createDecl, TransformDecl } from '../utils' +const flexDirection = __NODE_JS__ ? 'flex-direction' : 'flexDirection' +const flexWrap = __NODE_JS__ ? 'flex-wrap' : 'flexWrap' export const transformFlexFlow: TransformDecl = (decl) => { const { value, important, raws, source } = decl const splitResult = value.split(/\s+/) @@ -14,13 +16,7 @@ export const transformFlexFlow: TransformDecl = (decl) => { return [decl] } return [ - createDecl( - 'flex-direction', - result[0] || 'column', - important, - raws, - source - ), - createDecl('flex-wrap', result[1] || 'nowrap', important, raws, source), + createDecl(flexDirection, result[0] || 'column', important, raws, source), + createDecl(flexWrap, result[1] || 'nowrap', important, raws, source), ] } diff --git a/packages/uni-nvue-styler/src/expand/index.ts b/packages/uni-nvue-styler/src/expand/index.ts index 1968e09f832ce03d441105d7e1c7dacdcdcd6019..e7a4c5feeba700cc964daf0b8ef60ebe97ac5a7e 100644 --- a/packages/uni-nvue-styler/src/expand/index.ts +++ b/packages/uni-nvue-styler/src/expand/index.ts @@ -1,3 +1,4 @@ +import { extend } from '@vue/shared' import type { Plugin } from 'postcss' import { TransformDecl } from '../utils' import { transformBackground } from './background' @@ -17,20 +18,35 @@ const DeclTransforms: Record = { margin: transformMargin, padding: transformPadding, border: transformBorder, - 'border-top': transformBorder, - 'border-right': transformBorder, - 'border-bottom': transformBorder, - 'border-left': transformBorder, - 'border-style': transformBorderStyle, - 'border-width': transformBorderWidth, - 'border-color': transformBorderColor, - 'border-radius': transformBorderRadius, - 'flex-flow': transformFlexFlow, + background: transformBackground, } if (__NODE_JS__) { - DeclTransforms.font = transformFont + extend(DeclTransforms, { + 'border-top': transformBorder, + 'border-right': transformBorder, + 'border-bottom': transformBorder, + 'border-left': transformBorder, + 'border-style': transformBorderStyle, + 'border-width': transformBorderWidth, + 'border-color': transformBorderColor, + 'border-radius': transformBorderRadius, + 'flex-flow': transformFlexFlow, + font: transformFont, + }) +} else { + extend(DeclTransforms, { + borderTop: transformBorder, + borderRight: transformBorder, + borderBottom: transformBorder, + borderLeft: transformBorder, + borderStyle: transformBorderStyle, + borderWidth: transformBorderWidth, + borderColor: transformBorderColor, + borderRadius: transformBorderRadius, + flexFlow: transformFlexFlow, + }) } const expanded = Symbol('expanded') diff --git a/packages/uni-nvue-styler/src/expand/margin.ts b/packages/uni-nvue-styler/src/expand/margin.ts index d312cbb8766b6e138bda7484bcf0560ada69c1bf..2d6f0ec15bb6fd7addd6b9431d0a72ad9a3005f2 100644 --- a/packages/uni-nvue-styler/src/expand/margin.ts +++ b/packages/uni-nvue-styler/src/expand/margin.ts @@ -1,5 +1,9 @@ import { createDecl, TransformDecl } from '../utils' +const top = __NODE_JS__ ? '-top' : 'Top' +const right = __NODE_JS__ ? '-right' : 'Right' +const bottom = __NODE_JS__ ? '-bottom' : 'Bottom' +const left = __NODE_JS__ ? '-left' : 'Left' export const createTransformBox = ( type: 'margin' | 'padding' ): TransformDecl => { @@ -20,10 +24,10 @@ export const createTransformBox = ( } return [ - createDecl(`${type}-top`, splitResult[0], important, raws, source), - createDecl(`${type}-right`, splitResult[1], important, raws, source), - createDecl(`${type}-bottom`, splitResult[2], important, raws, source), - createDecl(`${type}-left`, splitResult[3], important, raws, source), + createDecl(type + top, splitResult[0], important, raws, source), + createDecl(type + right, splitResult[1], important, raws, source), + createDecl(type + bottom, splitResult[2], important, raws, source), + createDecl(type + left, splitResult[3], important, raws, source), ] } } diff --git a/packages/uni-nvue-styler/src/expand/transition.ts b/packages/uni-nvue-styler/src/expand/transition.ts index 071e3663ae7847ddff4a1eaf9d1a161f5600bcb7..1b1fbbe572db81c48e509f4f0978334f0626692c 100644 --- a/packages/uni-nvue-styler/src/expand/transition.ts +++ b/packages/uni-nvue-styler/src/expand/transition.ts @@ -1,6 +1,16 @@ import type { Declaration } from 'postcss' import { createDecl, TransformDecl } from '../utils' +const transitionProperty = __NODE_JS__ + ? 'transition-property' + : 'transitionProperty' +const transitionDuration = __NODE_JS__ + ? 'transition-duration' + : 'transitionDuration' +const transitionTimingFunction = __NODE_JS__ + ? 'transition-timing-function' + : 'transitionTimingFunction' +const transitionDelay = __NODE_JS__ ? 'transition-delay' : 'transitionDelay' export const transformTransition: TransformDecl = (decl) => { const CHUNK_REGEXP = /^(\S*)?\s*(\d*\.?\d+(?:ms|s)?)?\s*(\S*)?\s*(\d*\.?\d+(?:ms|s)?)?$/ @@ -12,25 +22,17 @@ export const transformTransition: TransformDecl = (decl) => { } match[1] && result.push( - createDecl('transition-property', match[1], important, raws, source) + createDecl(transitionProperty, match[1], important, raws, source) ) match[2] && result.push( - createDecl('transition-duration', match[2], important, raws, source) + createDecl(transitionDuration, match[2], important, raws, source) ) match[3] && result.push( - createDecl( - 'transition-timing-function', - match[3], - important, - raws, - source - ) + createDecl(transitionTimingFunction, match[3], important, raws, source) ) match[4] && - result.push( - createDecl('transition-delay', match[4], important, raws, source) - ) + result.push(createDecl(transitionDelay, match[4], important, raws, source)) return result } diff --git a/packages/uni-nvue-styler/src/normalize/color.ts b/packages/uni-nvue-styler/src/normalize/color.ts index 2fb393e2f867b94819d72b86b5c71d0460efa7ad..94d5a329bdc1a8a906cadad534b0cdf52306077a 100644 --- a/packages/uni-nvue-styler/src/normalize/color.ts +++ b/packages/uni-nvue-styler/src/normalize/color.ts @@ -1,4 +1,4 @@ -import { Normalize, hyphenate } from '../utils' +import { Normalize, autofixedReason, validReason } from '../utils' export const normalizeColor: Normalize = (v) => { v = (v || '').toString() @@ -9,9 +9,7 @@ export const normalizeColor: Normalize = (v) => { return { value: '#' + v[1] + v[1] + v[2] + v[2] + v[3] + v[3], reason: function reason(k, v, result) { - return ( - 'NOTE: property value `' + v + '` is autofixed to `' + result + '`' - ) + return autofixedReason(v, result) }, } } @@ -19,9 +17,7 @@ export const normalizeColor: Normalize = (v) => { return { value: EXTENDED_COLOR_KEYWORDS[v], reason: function reason(k, v, result) { - return ( - 'NOTE: property value `' + v + '` is autofixed to `' + result + '`' - ) + return autofixedReason(v, result) }, } } @@ -63,13 +59,7 @@ export const normalizeColor: Normalize = (v) => { return { value: null, reason(k, v, result) { - return ( - 'ERROR: property value `' + - v + - '` is not valid for `' + - hyphenate(k) + - '`' - ) + return validReason(k, v) }, } } diff --git a/packages/uni-nvue-styler/src/normalize/enum.ts b/packages/uni-nvue-styler/src/normalize/enum.ts index 409a3bd3c022f56470387a96c59c7fe74d35e359..c387a528be5f341368e609d259ef51b40aeb685c 100644 --- a/packages/uni-nvue-styler/src/normalize/enum.ts +++ b/packages/uni-nvue-styler/src/normalize/enum.ts @@ -1,4 +1,4 @@ -import { hyphenate, Normalize } from '../utils' +import { defaultValueReason, Normalize, supportedEnumReason } from '../utils' export function createEnumNormalize(items: Array): Normalize { return (v) => { @@ -10,28 +10,14 @@ export function createEnumNormalize(items: Array): Normalize { return { value: v, reason: function reason(k, v, result) { - return ( - 'NOTE: property value `' + - v + - '` is the DEFAULT value for `' + - hyphenate(k) + - '` (could be removed)' - ) + return defaultValueReason(k, v) }, } } return { value: null, reason: function reason(k, v, result) { - return ( - 'ERROR: property value `' + - v + - '` is not supported for `' + - hyphenate(k) + - '` (supported values are: `' + - items.join('`|`') + - '`)' - ) + return supportedEnumReason(k, v, items) }, } } diff --git a/packages/uni-nvue-styler/src/normalize/flexWrap.ts b/packages/uni-nvue-styler/src/normalize/flexWrap.ts index 899e83d900c3508665c7d8fc92b3abc943f1dac1..64f5e334c3a886cededc320857414f1c7cfdc2f4 100644 --- a/packages/uni-nvue-styler/src/normalize/flexWrap.ts +++ b/packages/uni-nvue-styler/src/normalize/flexWrap.ts @@ -1,4 +1,9 @@ -import { hyphenate, Normalize } from '../utils' +import { + Normalize, + supportedEnumReason, + defaultValueReason, + compatibilityReason, +} from '../utils' export const normalizeFlexWrap: Normalize = (v) => { const values = ['nowrap', 'wrap', 'wrap-reverse'] @@ -7,11 +12,7 @@ export const normalizeFlexWrap: Normalize = (v) => { return { value: v, reason(k, v, result) { - return ( - 'NOTE: the ' + - hyphenate(k) + - ' property may have compatibility problem on native' - ) + return compatibilityReason(k) }, } } @@ -19,28 +20,14 @@ export const normalizeFlexWrap: Normalize = (v) => { return { value: v, reason: function reason(k, v, result) { - return ( - 'NOTE: property value `' + - v + - '` is the DEFAULT value for `' + - hyphenate(k) + - '` (could be removed)' - ) + return defaultValueReason(k, v) }, } } return { value: null, reason(k, v, result) { - return ( - 'ERROR: property value `' + - v + - '` is not supported for `' + - hyphenate(k) + - '` (supported values are: `' + - values.join('`|`') + - '`)' - ) + return supportedEnumReason(k, v, values) }, } } diff --git a/packages/uni-nvue-styler/src/normalize/index.ts b/packages/uni-nvue-styler/src/normalize/index.ts index ef2ffa6a05ad5153793c8506ff0b056ed0a811dc..3213e38f1a23fcb38467fb0be15b5f435f2f6837 100644 --- a/packages/uni-nvue-styler/src/normalize/index.ts +++ b/packages/uni-nvue-styler/src/normalize/index.ts @@ -1,13 +1,10 @@ import type { Plugin, Declaration, Helpers, Rule } from 'postcss' +import { camelize, hasOwn, isFunction, isString } from '@vue/shared' import { - camelize, - hasOwn, - hyphenate, - isFunction, - isNumber, - isString, LENGTH_REGEXP, SUPPORT_CSS_UNIT, + hyphenateStyleProperty, + isNumber, } from '../utils' import { normalizeMap } from './map' @@ -25,11 +22,14 @@ export function normalize(opts: NormalizeOptions = {}): Plugin { if (!hasOwn(opts, 'logLevel')) { opts.logLevel = 'WARNING' } - return { + const plugin: Plugin = { postcssPlugin: 'nvue:normalize', - Rule: createRuleProcessor(opts), Declaration: createDeclarationProcessor(opts), } + if (__NODE_JS__) { + plugin.Rule = createRuleProcessor(opts) + } + return plugin } function createRuleProcessor({ descendant }: NormalizeOptions) { @@ -72,7 +72,7 @@ function createDeclarationProcessor({ logLevel }: NormalizeOptions) { if (isString(value) || isNumber(value)) { decl.value = value } - if (log && log.reason) { + if (log && log.reason && helper) { const { reason } = log let needLog = false if (logLevel === 'NOTE') { @@ -120,7 +120,7 @@ export function normalizeDecl(name: string, value: string) { log = { reason: 'WARNING: `' + - hyphenate(name) + + hyphenateStyleProperty(name) + '` is not a standard property name (may not be supported)', } } diff --git a/packages/uni-nvue-styler/src/normalize/integer.ts b/packages/uni-nvue-styler/src/normalize/integer.ts index 64c574992b45b5f823054d415533ce41c2f146ff..f4d8d02a7eec8d795ba5c5487a6cb4002e461d07 100644 --- a/packages/uni-nvue-styler/src/normalize/integer.ts +++ b/packages/uni-nvue-styler/src/normalize/integer.ts @@ -1,4 +1,4 @@ -import { hyphenate, Normalize } from '../utils' +import { Normalize, supportedValueWithTipsReason } from '../utils' export const normalizeInteger: Normalize = (v) => { v = (v || '').toString() @@ -8,13 +8,7 @@ export const normalizeInteger: Normalize = (v) => { return { value: null, reason: function reason(k, v, result) { - return ( - 'ERROR: property value `' + - v + - '` is not supported for `' + - hyphenate(k) + - '` (only integer is supported)' - ) + return supportedValueWithTipsReason(k, v, `(only integer is supported)`) }, } } diff --git a/packages/uni-nvue-styler/src/normalize/length.ts b/packages/uni-nvue-styler/src/normalize/length.ts index f11faced40b5928dec272d302284f8c57734e025..62a7d3e5b47c3b08162910184a00d84b1bf4a8cf 100644 --- a/packages/uni-nvue-styler/src/normalize/length.ts +++ b/packages/uni-nvue-styler/src/normalize/length.ts @@ -1,4 +1,10 @@ -import { Normalize, hyphenate, LENGTH_REGEXP, SUPPORT_CSS_UNIT } from '../utils' +import { + Normalize, + LENGTH_REGEXP, + SUPPORT_CSS_UNIT, + supportedValueWithTipsReason, + supportedUnitWithAutofixedReason, +} from '../utils' export const normalizeLength: Normalize = (v: string | number) => { v = (v || '').toString() @@ -14,15 +20,7 @@ export const normalizeLength: Normalize = (v: string | number) => { return { value: parseFloat(v), reason(k, v, result) { - return ( - 'NOTE: unit `' + - unit + - '` is not supported and property value `' + - v + - '` is autofixed to `' + - result + - '`' - ) + return supportedUnitWithAutofixedReason(unit, v, result) }, } } @@ -31,12 +29,10 @@ export const normalizeLength: Normalize = (v: string | number) => { return { value: null, reason(k, v, result) { - return ( - 'ERROR: property value `' + - v + - '` is not supported for `' + - hyphenate(k) + - '` (only number and pixel values are supported)' + return supportedValueWithTipsReason( + k, + v, + `(only number and pixel values are supported)` ) }, } diff --git a/packages/uni-nvue-styler/src/normalize/number.ts b/packages/uni-nvue-styler/src/normalize/number.ts index c9b390b3c4cc89420f429c20de07b4362592e2a7..ccbb412096b6c7d8035669a1e89d2c872aec9235 100644 --- a/packages/uni-nvue-styler/src/normalize/number.ts +++ b/packages/uni-nvue-styler/src/normalize/number.ts @@ -1,4 +1,8 @@ -import { Normalize, hyphenate, LENGTH_REGEXP } from '../utils' +import { + Normalize, + LENGTH_REGEXP, + supportedValueWithTipsReason, +} from '../utils' export const normalizeNumber: Normalize = (v) => { v = (v || '').toString() @@ -11,13 +15,7 @@ export const normalizeNumber: Normalize = (v) => { return { value: null, reason: function reason(k, v, result) { - return ( - 'ERROR: property value `' + - v + - '` is not supported for `' + - hyphenate(k) + - '` (only number is supported)' - ) + return supportedValueWithTipsReason(k, v, '(only number is supported)') }, } } diff --git a/packages/uni-nvue-styler/src/normalize/shorthandLength.ts b/packages/uni-nvue-styler/src/normalize/shorthandLength.ts index cca340633cfbc4afd5046a7939dd0b0c0851b95c..30f2a13e54e561c3d49114989db2d102ce5a26d0 100644 --- a/packages/uni-nvue-styler/src/normalize/shorthandLength.ts +++ b/packages/uni-nvue-styler/src/normalize/shorthandLength.ts @@ -1,4 +1,5 @@ -import { Normalize, isFunction } from '../utils' +import { isFunction } from '@vue/shared' +import { Normalize } from '../utils' import { normalizeLength } from './length' export const normalizeShorthandLength: Normalize = (v) => { diff --git a/packages/uni-nvue-styler/src/normalize/transitionInterval.ts b/packages/uni-nvue-styler/src/normalize/transitionInterval.ts index 94aa70f42a3b3b8761bc18b152b0bfaf03e1b80c..7b8802f0cce466bfd91fd340323fb78e1b0d8df5 100644 --- a/packages/uni-nvue-styler/src/normalize/transitionInterval.ts +++ b/packages/uni-nvue-styler/src/normalize/transitionInterval.ts @@ -1,4 +1,8 @@ -import { hyphenate, Normalize } from '../utils' +import { + autofixedReason, + Normalize, + supportedValueWithTipsReason, +} from '../utils' export const normalizeTransitionInterval: Normalize = (v) => { v = (v || 0).toString() @@ -15,9 +19,7 @@ export const normalizeTransitionInterval: Normalize = (v) => { return { value: parseInt(num + ''), reason(k, v, result) { - return ( - 'NOTE: property value `' + v + '` is autofixed to `' + result + '`' - ) + return autofixedReason(v, result) }, } } @@ -25,12 +27,10 @@ export const normalizeTransitionInterval: Normalize = (v) => { return { value: null, reason(k, v, result) { - return ( - 'ERROR: property value `' + - v + - '` is not supported for `' + - hyphenate(k) + - '` (only number of seconds and milliseconds is valid)' + return supportedValueWithTipsReason( + k, + v, + '(only number of seconds and milliseconds is valid)' ) }, } diff --git a/packages/uni-nvue-styler/src/normalize/transitionProperty.ts b/packages/uni-nvue-styler/src/normalize/transitionProperty.ts index d9fc759647d142be024cb6247263bf12dc5a0557..55364caf68d628666bd979a0018670eb47d44936 100644 --- a/packages/uni-nvue-styler/src/normalize/transitionProperty.ts +++ b/packages/uni-nvue-styler/src/normalize/transitionProperty.ts @@ -1,4 +1,5 @@ -import { camelize, hyphenate, Normalize } from '../utils' +import { camelize } from '@vue/shared' +import { Normalize, supportedValueWithTipsReason } from '../utils' import { normalizeMap } from './map' export const normalizeTransitionProperty: Normalize = (v) => { @@ -15,13 +16,7 @@ export const normalizeTransitionProperty: Normalize = (v) => { return { value: null, reason: function reason(k, v, result) { - return ( - 'ERROR: property value `' + - v + - '` is not supported for `' + - hyphenate(k) + - '` (only css property is valid)' - ) + return supportedValueWithTipsReason(k, v, '(only css property is valid)') }, } } diff --git a/packages/uni-nvue-styler/src/normalize/transitionTimingFunction.ts b/packages/uni-nvue-styler/src/normalize/transitionTimingFunction.ts index c9f22d5cb65b98af04ca08c2b60dd9fc06d96127..b0e449bd49e19bd17e751a2e75e09b95005f4439 100644 --- a/packages/uni-nvue-styler/src/normalize/transitionTimingFunction.ts +++ b/packages/uni-nvue-styler/src/normalize/transitionTimingFunction.ts @@ -1,4 +1,4 @@ -import { hyphenate, NUM_REGEXP, Normalize } from '../utils' +import { NUM_REGEXP, Normalize, supportedEnumReason } from '../utils' export const normalizeTransitionTimingFunction: Normalize = (v) => { v = (v || '').toString() @@ -33,13 +33,14 @@ export const normalizeTransitionTimingFunction: Normalize = (v) => { return { value: null, reason(k, v, result) { - return ( - 'ERROR: property value `' + - v + - '` is not supported for `' + - hyphenate(k) + - '` (supported values are: `linear`|`ease`|`ease-in`|`ease-out`|`ease-in-out`|`cubic-bezier(n,n,n,n)`)' - ) + return supportedEnumReason(k, v, [ + 'linear', + 'ease', + 'ease-in', + 'ease-out', + 'ease-in-out', + 'cubic-bezier(n,n,n,n)', + ]) }, } } diff --git a/packages/uni-nvue-styler/src/objectifier.ts b/packages/uni-nvue-styler/src/objectifier.ts index b592dc9cdfef2d2852eea00dba18038784f38253..99d69aa6cc59797d62b963191795ca9ef35b9793 100644 --- a/packages/uni-nvue-styler/src/objectifier.ts +++ b/packages/uni-nvue-styler/src/objectifier.ts @@ -1,5 +1,5 @@ import { Container, Root, Document } from 'postcss' -import { extend } from './utils' +import { extend } from '@vue/shared' interface ObjectifierContext { 'FONT-FACE': Record[] diff --git a/packages/uni-nvue-styler/src/parse.ts b/packages/uni-nvue-styler/src/parse.ts index 235d725eaa588c578dc115630d1f238f612e8c3e..047ab7fad7b67de0bef2e7746ee8ca9b06acca4d 100644 --- a/packages/uni-nvue-styler/src/parse.ts +++ b/packages/uni-nvue-styler/src/parse.ts @@ -1,5 +1,5 @@ import postcss, { Message } from 'postcss' -import { objectifier } from '.' +import { objectifier } from './objectifier' import { expand } from './expand' import { NormalizeOptions, normalize } from './normalize' diff --git a/packages/uni-nvue-styler/src/shared.ts b/packages/uni-nvue-styler/src/shared.ts new file mode 100644 index 0000000000000000000000000000000000000000..1539d7e55f8d2014a14fa98ea6ca4c8645d3b43d --- /dev/null +++ b/packages/uni-nvue-styler/src/shared.ts @@ -0,0 +1,30 @@ +export const extend = Object.assign +export const isArray = Array.isArray +export const isString = (val: unknown): val is string => typeof val === 'string' +export const isFunction = (val: unknown): val is Function => + typeof val === 'function' + +const hasOwnProperty = Object.prototype.hasOwnProperty +export const hasOwn = ( + val: object, + key: string | symbol +): key is keyof typeof val => hasOwnProperty.call(val, key) + +const cacheStringFunction = string>( + fn: T +): T => { + const cache: Record = Object.create(null) + return ((str: string) => { + const hit = cache[str] + return hit || (cache[str] = fn(str)) + }) as any +} + +const camelizeRE = /-(\w)/g +export const camelize = cacheStringFunction((str: string): string => { + return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : '')) +}) + +export const capitalize = cacheStringFunction( + (str: string) => str.charAt(0).toUpperCase() + str.slice(1) +) diff --git a/packages/uni-nvue-styler/src/utils.ts b/packages/uni-nvue-styler/src/utils.ts index 0775c0bbae076ca2a63f4ee4b240bffb72d30aa0..3861de5478a1693648c04b7753d49968b0706987 100644 --- a/packages/uni-nvue-styler/src/utils.ts +++ b/packages/uni-nvue-styler/src/utils.ts @@ -1,5 +1,4 @@ import type { Declaration, Source } from 'postcss' - export type TransformDecl = (decl: Declaration) => Declaration[] export type Normalize = (v: string | number) => { @@ -31,21 +30,10 @@ export const NUM_REGEXP = /^[-]?\d*\.?\d+$/ export const LENGTH_REGEXP = /^[-+]?\d*\.?\d+(\S*)$/ export const SUPPORT_CSS_UNIT = ['px', 'pt', 'wx', 'upx', 'rpx'] -export const extend = Object.assign -export const isArray = Array.isArray -export const isString = (val: unknown): val is string => typeof val === 'string' export const isNumber = (val: unknown): val is string => typeof val === 'number' -export const isFunction = (val: unknown): val is Function => - typeof val === 'function' export const serialize = (val: unknown) => JSON.parse(JSON.stringify(val)) -const hasOwnProperty = Object.prototype.hasOwnProperty -export const hasOwn = ( - val: object, - key: string | symbol -): key is keyof typeof val => hasOwnProperty.call(val, key) - const cacheStringFunction = string>(fn: T): T => { const cache: Record = Object.create(null) return ((str: string) => { @@ -54,13 +42,9 @@ const cacheStringFunction = string>(fn: T): T => { }) as any } -const camelizeRE = /-(\w)/g -export const camelize = cacheStringFunction((str: string): string => { - return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : '')) -}) - const hyphenateRE = /([A-Z])/g -export const hyphenate = cacheStringFunction((str: string) => + +export const hyphenateStyleProperty = cacheStringFunction((str: string) => str .replace(hyphenateRE, (_, m) => { if (typeof m === 'string') { @@ -70,3 +54,85 @@ export const hyphenate = cacheStringFunction((str: string) => }) .toLowerCase() ) + +export function autofixedReason( + v: string | number, + result: string | number | null +) { + return 'NOTE: property value `' + v + '` is autofixed to `' + result + '`' +} + +export function validReason(k: string, v: string | number) { + return ( + 'ERROR: property value `' + + v + + '` is not valid for `' + + hyphenateStyleProperty(k) + + '`' + ) +} + +export function defaultValueReason(k: string, v: string | number) { + return ( + 'NOTE: property value `' + + v + + '` is the DEFAULT value for `' + + hyphenateStyleProperty(k) + + '` (could be removed)' + ) +} + +export function supportedEnumReason( + k: string, + v: string | number, + items: unknown[] +) { + return ( + 'ERROR: property value `' + + v + + '` is not supported for `' + + hyphenateStyleProperty(k) + + '` (supported values are: `' + + items.join('`|`') + + '`)' + ) +} + +export function supportedValueWithTipsReason( + k: string, + v: string | number, + tips?: string +) { + return ( + 'ERROR: property value `' + + v + + '` is not supported for `' + + hyphenateStyleProperty(k) + + '` ' + + tips + ) +} + +export function supportedUnitWithAutofixedReason( + unit: string, + v: string | number, + result: string | number | null +) { + return ( + 'NOTE: unit `' + + unit + + '` is not supported and property value `' + + v + + '` is autofixed to `' + + result + + '`' + ) +} + +export function compatibilityReason(k: string) { + return ( + 'NOTE: the ' + + hyphenateStyleProperty(k) + + ' property may have compatibility problem on native' + ) +} diff --git a/packages/uni-nvue-styler/tsconfig.json b/packages/uni-nvue-styler/tsconfig.json index aac3fa9bf1f140ce60321e2d26b40dd17a90bf0e..77a379559fdd401f964b6fec322bdf87a3a95782 100644 --- a/packages/uni-nvue-styler/tsconfig.json +++ b/packages/uni-nvue-styler/tsconfig.json @@ -14,7 +14,10 @@ "resolveJsonModule": true, "esModuleInterop": true, "removeComments": false, - "lib": ["ESNext", "DOM"] + "lib": ["ESNext", "DOM"], + "paths": { + "shared": ["./src/shared.ts"] + } }, "include": [ "src",