support css properties with multiple values
parent
e39c398f48
commit
95b249409b
|
@ -55,7 +55,16 @@ async function process(ast) {
|
|||
|
||||
const decls = {}
|
||||
rule.walkDecls((decl) => {
|
||||
decls[decl.prop] = decl.value
|
||||
if (decls[decl.prop]) {
|
||||
decls[decl.prop] = [
|
||||
...(Array.isArray(decls[decl.prop])
|
||||
? decls[decl.prop]
|
||||
: [decls[decl.prop]]),
|
||||
decl.value,
|
||||
]
|
||||
} else {
|
||||
decls[decl.prop] = decl.value
|
||||
}
|
||||
})
|
||||
|
||||
let p = rule
|
||||
|
|
|
@ -350,3 +350,24 @@ test('processes multiple scopes for the same class name', async () => {
|
|||
},
|
||||
})
|
||||
})
|
||||
|
||||
test('processes multiple properties of the same name', async () => {
|
||||
const result = await processCss(`
|
||||
.bg-red {
|
||||
background-color: blue;
|
||||
background-color: red;
|
||||
}
|
||||
`)
|
||||
|
||||
expect(result).toEqual({
|
||||
context: {},
|
||||
classNames: {
|
||||
'bg-red': {
|
||||
__rule: true,
|
||||
__context: [],
|
||||
__scope: null,
|
||||
'background-color': ['blue', 'red'],
|
||||
},
|
||||
},
|
||||
})
|
||||
})
|
||||
|
|
|
@ -23,6 +23,7 @@ import { isJsContext } from '../util/js'
|
|||
import { naturalExpand } from '../util/naturalExpand'
|
||||
import semver from 'semver'
|
||||
import { docsUrl } from '../util/docsUrl'
|
||||
import { ensureArray } from '../util/array'
|
||||
|
||||
function completionsFromClassList(
|
||||
state: State,
|
||||
|
@ -725,10 +726,19 @@ function isContextItem(state: State, keys: string[]): boolean {
|
|||
}
|
||||
|
||||
function stringifyDecls(obj: any): string {
|
||||
return Object.keys(obj)
|
||||
.map((prop) => {
|
||||
return `${prop}: ${obj[prop]};`
|
||||
})
|
||||
let props = Object.keys(obj)
|
||||
let nonCustomProps = props.filter((prop) => !prop.startsWith('--'))
|
||||
|
||||
if (props.length !== nonCustomProps.length && nonCustomProps.length !== 0) {
|
||||
props = nonCustomProps
|
||||
}
|
||||
|
||||
return props
|
||||
.map((prop) =>
|
||||
ensureArray(obj[prop])
|
||||
.map((value) => `${prop}: ${value};`)
|
||||
.join(' ')
|
||||
)
|
||||
.join(' ')
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,11 @@
|
|||
export function dedupe<T>(arr: Array<T>): Array<T> {
|
||||
return arr.filter((value, index, self) => self.indexOf(value) === index)
|
||||
}
|
||||
|
||||
export function ensureArray<T>(value: T | T[]): T[] {
|
||||
return Array.isArray(value) ? value : [value]
|
||||
}
|
||||
|
||||
export function flatten<T>(arrays: T[][]): T[] {
|
||||
return [].concat.apply([], arrays)
|
||||
}
|
|
@ -1,6 +1,7 @@
|
|||
import removeMeta from './removeMeta'
|
||||
const dlv = require('dlv')
|
||||
import escapeClassName from 'css.escape'
|
||||
import { ensureArray } from './array'
|
||||
|
||||
export function stringifyConfigValue(x: any): string {
|
||||
if (typeof x === 'string') return x
|
||||
|
@ -35,9 +36,10 @@ export function stringifyCss(className: string, obj: any): string {
|
|||
|
||||
const indentStr = '\t'.repeat(context.length)
|
||||
const decls = props.reduce((acc, curr, i) => {
|
||||
return `${acc}${i === 0 ? '' : '\n'}${indentStr + '\t'}${curr}: ${
|
||||
obj[curr]
|
||||
};`
|
||||
const propStr = ensureArray(obj[curr])
|
||||
.map((val) => `${indentStr + '\t'}${curr}: ${val};`)
|
||||
.join('\n')
|
||||
return `${acc}${i === 0 ? '' : '\n'}${propStr}`
|
||||
}, '')
|
||||
css += `${indentStr}${augmentClassName(
|
||||
className,
|
||||
|
|
Loading…
Reference in New Issue