support css properties with multiple values

master
Brad Cornes 2020-05-02 13:18:30 +01:00
parent e39c398f48
commit 95b249409b
5 changed files with 61 additions and 8 deletions

View File

@ -55,7 +55,16 @@ async function process(ast) {
const decls = {}
rule.walkDecls((decl) => {
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

View File

@ -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'],
},
},
})
})

View File

@ -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(' ')
}

View File

@ -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)
}

View File

@ -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,