1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

diff --git a/packages/tailwindcss-class-names/src/extractClassNames.mjs b/packages/tailwindcss-class-names/src/extractClassNames.mjs
index 4ccb6622101ef1538bfffa21842e3265d0706a23..df4559939aba242c977b6be4adea01cfe05adb47 100644
--- a/packages/tailwindcss-class-names/src/extractClassNames.mjs
+++ b/packages/tailwindcss-class-names/src/extractClassNames.mjs
@@ -55,7 +55,16 @@     const classNames = getClassNamesFromSelector(rule.selector)
 
     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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

diff --git a/packages/tailwindcss-class-names/tests/extractClassNames.test.js b/packages/tailwindcss-class-names/tests/extractClassNames.test.js
index 7e7b6471ff2ee0ba50de454d6743490a152e5e01..fe8e04bf6ba717f7e2e1a52a79b06cca78fbbe7a 100644
--- a/packages/tailwindcss-class-names/tests/extractClassNames.test.js
+++ b/packages/tailwindcss-class-names/tests/extractClassNames.test.js
@@ -350,3 +350,24 @@       ],
     },
   })
 })
+
+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'],
+      },
+    },
+  })
+})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

diff --git a/packages/tailwindcss-language-server/src/providers/completionProvider.ts b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
index 54f39076f9ee0da598c03d4a503699dcf66520ee..bb78423a37f7e2c8d48fed37d4f45413bf782113 100644
--- a/packages/tailwindcss-language-server/src/providers/completionProvider.ts
+++ b/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 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(' ')
 }
 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

diff --git a/packages/tailwindcss-language-server/src/util/array.ts b/packages/tailwindcss-language-server/src/util/array.ts
new file mode 100644
index 0000000000000000000000000000000000000000..13683ccbd6c9bb53185ebb57311e5833d551c5c5
--- /dev/null
+++ b/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)
+}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

diff --git a/packages/tailwindcss-language-server/src/util/stringify.ts b/packages/tailwindcss-language-server/src/util/stringify.ts
index 5433e90926433db92e6f14389dd4c1d796df38a3..f2811a6b93276f3bdab86c4f1084af6ce56489a0 100644
--- a/packages/tailwindcss-language-server/src/util/stringify.ts
+++ b/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 @@   }
 
   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,