Merge branch 'next' into config-explorer

Author: Brad Cornes

packages/tailwindcss-class-names/package-lock.json

@@ -27,6 +27,7 @@
   "devDependencies": {
     "@zeit/ncc": "^0.21.1",
     "esm": "^3.2.25",
-    "jest": "^25.1.0"
+    "jest": "^25.1.0",
+    "postcss": "^7.0.27"
   }
 }

packages/tailwindcss-class-names/package.json

@@ -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/src/extractClassNames.mjs

@@ -3,19 +3,14 @@ import stackTrace from 'stack-trace'
 import pkgUp from 'pkg-up'
 import { glob } from './glob'
 import { isObject } from './isObject'
+import importFrom from 'import-from'
 
-export async function getBuiltInPlugins(cwd) {
+export async function getBuiltInPlugins({ cwd, resolvedConfig }) {
   try {
-    return (
-      await glob(path.resolve(cwd, 'node_modules/tailwindcss/lib/plugins/*.js'))
-    )
-      .map((x) => {
-        try {
-          const mod = __non_webpack_require__(x)
-          return mod.default ? mod.default() : mod()
-        } catch (_) {}
-      })
-      .filter(Boolean)
+    // TODO: add v0 support ("generators")
+    return importFrom(cwd, 'tailwindcss/lib/corePlugins.js').default({
+      corePlugins: resolvedConfig.corePlugins,
+    })
   } catch (_) {
     return []
   }

packages/tailwindcss-class-names/src/getPlugins.js

@@ -19,7 +19,7 @@ const proxyHandler = (base = []) => ({
 })
 
 export async function getUtilityConfigMap({ cwd, resolvedConfig, postcss }) {
-  const builtInPlugins = await getBuiltInPlugins(cwd)
+  const builtInPlugins = await getBuiltInPlugins({ cwd, resolvedConfig })
   const userPlugins = Array.isArray(resolvedConfig.plugins)
     ? resolvedConfig.plugins
     : []

packages/tailwindcss-class-names/src/getUtilityConfigMap.js

@@ -10,6 +10,7 @@ import getPlugins from './getPlugins'
 import getVariants from './getVariants'
 import resolveConfig from './resolveConfig'
 import * as util from 'util'
+import * as path from 'path'
 import { glob } from './glob'
 import { getUtilityConfigMap } from './getUtilityConfigMap'
 
@@ -51,9 +52,10 @@ export default async function getClassNames(
     })
     invariant(configPath.length === 1, 'No Tailwind CSS config found.')
     configPath = configPath[0]
-    postcss = importFrom(cwd, 'postcss')
-    tailwindcss = importFrom(cwd, 'tailwindcss')
-    version = importFrom(cwd, 'tailwindcss/package.json').version
+    const configDir = path.dirname(configPath)
+    postcss = importFrom(configDir, 'postcss')
+    tailwindcss = importFrom(configDir, 'tailwindcss')
+    version = importFrom(configDir, 'tailwindcss/package.json').version
 
     const sepLocation = semver.gte(version, '0.99.0')
       ? ['separator']
@@ -90,9 +92,10 @@ export default async function getClassNames(
       delete config[sepLocation]
     }
 
-    const resolvedConfig = resolveConfig({ cwd, config })
+    const resolvedConfig = resolveConfig({ cwd: configDir, config })
 
     return {
+      version,
       configPath,
       config: resolvedConfig,
       separator: typeof userSeperator === 'undefined' ? ':' : userSeperator,
@@ -101,7 +104,7 @@ export default async function getClassNames(
       plugins: getPlugins(config),
       variants: getVariants({ config, version, postcss }),
       utilityConfigMap: await getUtilityConfigMap({
-        cwd,
+        cwd: configDir,
         resolvedConfig,
         postcss,
       }),
@@ -112,7 +115,7 @@ export default async function getClassNames(
   function watch(files = []) {
     if (watcher) watcher.close()
     watcher = chokidar
-      .watch([CONFIG_GLOB, ...files])
+      .watch([CONFIG_GLOB, ...files], { cwd })
       .on('change', handleChange)
       .on('unlink', handleChange)
   }

packages/tailwindcss-class-names/src/index.js

@@ -121,9 +121,9 @@ test('foo', async () => {
   })
 })
 
-test.only('processes basic css', async () => {
+test('processes basic css', async () => {
   const result = await processCss(`
-    .bg-red\\:foo {
+    .bg-red {
       background-color: red;
     }
   `)
@@ -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'],
+      },
+    },
+  })
+})