support css properties with multiple values

Author: Brad Cornes

packages/tailwindcss-class-names/src/extractClassNames.mjs

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

packages/tailwindcss-class-names/tests/extractClassNames.test.js

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

packages/tailwindcss-language-server/src/providers/completionProvider.ts

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

packages/tailwindcss-language-server/src/util/array.ts

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

packages/tailwindcss-language-server/src/util/stringify.ts

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