.github/workflows/ci.yml

@@ -35,11 +35,14 @@ jobs:
         if: steps.cache.outputs.cache-hit != 'true'
         run: yarn
 
+      - name: Prepare
+        run: yarn dev:prepare
+
       - name: Lint
         run: yarn lint
 
-      # - name: Test
-      #   run: yarn test
+      - name: Test
+        run: yarn test
 
       # - name: Coverage
       #   run: yarn codecov

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [5.3.3](https://github.com/nuxt-community/tailwindcss-module/compare/v5.3.2...v5.3.3) (2022-09-08)
+
+
+### Bug Fixes
+
+* resolve config paths fully and warn on config errors ([#522](https://github.com/nuxt-community/tailwindcss-module/issues/522)) ([6a6dc4f](https://github.com/nuxt-community/tailwindcss-module/commit/6a6dc4fc4dffefeb2141722cd8058d50ff27038e))
+
 ### [5.3.2](https://github.com/nuxt-community/tailwindcss-module/compare/v5.3.1...v5.3.2) (2022-08-12)
 
 

docs/content/_theme.yml

@@ -8,7 +8,7 @@ description: Add Tailwind CSS to your Nuxt application in seconds.
 
 socials:
   twitter: "nuxt_js"
-  github: "nuxt-community/tailwindcss-module"
+  github: "nuxt-modules/tailwindcss"
 
 debug: false
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/tailwindcss",
-  "version": "5.3.2",
+  "version": "5.3.3",
   "description": "TailwindCSS module for Nuxt",
   "repository": "nuxt-community/tailwindcss-module",
   "license": "MIT",
@@ -23,32 +23,34 @@
     "lint": "eslint --ext .js,.ts,.vue",
     "prepack": "yarn build",
     "release": "yarn test && standard-version && git push --follow-tags && npm publish",
-    "test": "yarn lint"
+    "test": "vitest"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.0.0-rc.5",
+    "@nuxt/kit": "^3.0.0-rc.9",
     "@nuxt/postcss8": "^1.1.3",
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.8",
     "chalk": "^5.0.1",
     "clear-module": "^4.1.2",
     "consola": "^2.15.3",
-    "defu": "^6.0.0",
-    "postcss": "^8.4.14",
+    "defu": "^6.1.0",
+    "postcss": "^8.4.16",
     "postcss-custom-properties": "^12.1.8",
     "postcss-nesting": "^10.1.10",
-    "tailwind-config-viewer": "^1.7.1",
-    "tailwindcss": "^3.1.6",
+    "tailwind-config-viewer": "^1.7.2",
+    "tailwindcss": "^3.1.8",
     "ufo": "^0.8.5"
   },
   "devDependencies": {
-    "@fontsource/inter": "^4.5.11",
+    "@fontsource/inter": "^4.5.12",
+    "@nuxt/content": "^2.1.0",
     "@nuxt/module-builder": "latest",
-    "@nuxt/test-utils": "latest",
+    "@nuxt/test-utils": "^3.0.0-rc.9",
     "@nuxtjs/eslint-config-typescript": "latest",
     "codecov": "latest",
     "eslint": "latest",
-    "nuxt": "npm:nuxt3@latest",
-    "@nuxt/content": "npm:@nuxt/content-edge@latest",
-    "standard-version": "latest"
+    "jsdom": "^20.0.0",
+    "nuxt": "^3.0.0-rc.9",
+    "standard-version": "latest",
+    "vitest": "^0.23.1"
   }
 }

playground/content/content.md

@@ -5,9 +5,12 @@
 ---
 
 ::div{.my-4 .px-4}
-Hello World! :wave:
+[Hello World!]{.text-green-500} :wave:
 
 This is an integration test with [@nuxt/content](https://content.nuxtjs.org){.font-bold .hover:text-blue-500}! :smile:
 
 It feels pretty smooth!
+
+[Home](/)
 ::
+

playground/pages/index.vue

@@ -6,7 +6,7 @@
     <div class="max-w-screen-lg p-4 mx-auto space-y-4">
       <div>
         <span class="pr-1 font-medium">This is a HMR test, try changing the color:</span>
-        <span class="text-brand">meow!</span>
+        <span class="text-blue-500">meow!</span>
       </div>
       <div>
         <NuxtLink to="/content" class="underline hover:text-indigo-500">

src/module.ts

@@ -12,8 +12,7 @@ import {
   createResolver,
   resolvePath,
   addVitePlugin,
-  tryRequireModule,
-  isNuxt3
+  isNuxt3, findPath, requireModule
 } from '@nuxt/kit'
 import { Config } from 'tailwindcss'
 import { name, version } from '../package.json'
@@ -39,8 +38,10 @@ export interface ModuleHooks {
   'tailwindcss:config': (tailwindConfig: any) => void
 }
 
+type Arrayable<T> = T | T[]
+
 export interface ModuleOptions {
-  configPath: string;
+  configPath: Arrayable<string>;
   cssPath: string;
   config: Config;
   viewer: boolean;
@@ -76,17 +77,14 @@ export default defineNuxtModule<ModuleOptions>({
      * Push config paths into `configPaths` without extension.
      * Allows next steps of processing to try both .js / .ts when resolving the config.
      */
-    const addConfigPath = async (path: string | string[]) => {
-      if (typeof path === 'string') {
-        path = (await resolvePath(path, { extensions: ['.js', '.ts'] })).split('.').slice(0, -1).join('.')
-        configPaths.push(path)
-        return
-      }
-
-      if (Array.isArray(path)) {
-        for (let _path of path) {
-          _path = (await resolvePath(_path, { extensions: ['.js', '.ts'] })).split('.').slice(0, -1).join('.')
-          configPaths.push()
+    const addConfigPath = async (path: Arrayable<string>) => {
+      // filter in case an empty path is provided
+      const paths = (Array.isArray(path) ? path : [path]).filter(Boolean)
+      for (const path of paths) {
+        const resolvedPath = (await findPath(path, { extensions: ['.js', '.mjs', '.ts'] }, 'file'))
+        // only if the path is found
+        if (resolvedPath) {
+          configPaths.push(resolvedPath)
         }
       }
     }
@@ -116,7 +114,12 @@ export default defineNuxtModule<ModuleOptions>({
     // Recursively resolve each config and merge tailwind configs together.
     let tailwindConfig: any = {}
     for (const configPath of configPaths) {
-      const _tailwindConfig = tryRequireModule(configPath, { clearCache: true })
+      let _tailwindConfig
+      try {
+        _tailwindConfig = requireModule(configPath, { clearCache: true })
+      } catch (e) {
+        logger.warn(`Failed to load Tailwind config at: \`./${relative(nuxt.options.rootDir, configPath)}\``, e)
+      }
 
       // Transform purge option from Array to object with { content }
       if (_tailwindConfig && Array.isArray(_tailwindConfig.purge)) {

test/basic.test.ts

@@ -0,0 +1,56 @@
+import { useTestContext, $fetch } from '@nuxt/test-utils'
+import { describe, test, expect, vi } from 'vitest'
+import { mockedInfo } from 'consola'
+import { r, setupNuxtTailwind } from './util'
+
+describe('tailwindcss module', async () => {
+  vi.mock('consola', async () => {
+    const { default: mod } = (await vi.importActual<typeof import('consola')>('consola'))
+    mod.withScope = () => mod
+    mod.info = vi.fn()
+    return { default: mod, mockedInfo: mod.info }
+  })
+
+  await setupNuxtTailwind({
+    exposeConfig: true,
+    cssPath: r('tailwind.css')
+  })
+
+  //
+  // test('tailwind works', async () => {
+  //   const manifest = await $fetch('/_nuxt/manifest.json')
+  //   // @ts-expect-error untyped
+  //   const [, { css }] = Object.entries(manifest).find(([, v]) => v.isEntry)
+  //   const cssContents = await $fetch(`/_nuxt/${css[0]}`) as string
+
+  //   // test tailwind is the first entry
+  //   expect(cssContents.startsWith('/*! tailwindcss v')).toBeTruthy()
+  //   // test pages/index.vue is read
+  //   expect(cssContents).toContain('.max-w-7xl')
+  // })
+
+  test('include custom tailwind.css file in project css', () => {
+    const nuxt = useTestContext().nuxt
+
+    expect(mockedInfo.mock.calls[0]).contains('Using Tailwind CSS from ~/tailwind.css')
+
+    expect(nuxt.options.css).toHaveLength(1)
+    expect(nuxt.options.css[0]).toEqual(nuxt.options.tailwindcss.cssPath)
+  })
+
+  test('default js config is merged in', () => {
+    const nuxt = useTestContext().nuxt
+    const vfsKey = Object.keys(nuxt.vfs).find(k => k.includes('tailwind.config.'))
+    // set from default config tailwind.config.js
+    expect(nuxt.vfs[vfsKey]).contains('"primary": "#f1e05a"')
+  })
+
+  // @todo re-implement
+  // test('custom paths', () => {
+  //   const ctx = useTestContext()
+  //
+  //   expect(logger.info).toHaveBeenNthCalledWith(1, `Using Tailwind CSS from ~/${relative(rootDir, nuxt.options.tailwindcss.cssPath)}`)
+  //   expect(logger.info).toHaveBeenNthCalledWith(2, `Merging Tailwind config from ~/${relative(rootDir, nuxt.options.tailwindcss.configPath)}`)
+  // })
+  //
+})

test/configs.test.ts

@@ -0,0 +1,45 @@
+import { describe, test, expect, vi } from 'vitest'
+import { mockedWarn } from 'consola'
+import { useTestContext } from '@nuxt/test-utils'
+import { setupNuxtTailwind } from './util'
+
+describe('tailwindcss module configs', async () => {
+  vi.mock('consola', async () => {
+    const { default: mod } = (await vi.importActual<typeof import('consola')>('consola'))
+    mod.withScope = () => mod
+    mod.info = vi.fn()
+    mod.warn = vi.fn()
+    return { default: mod, info: mod.info, mockedWarn: mod.warn }
+  })
+
+  await setupNuxtTailwind({
+    exposeConfig: true,
+    configPath: [
+      'alt-tailwind.config.js',
+      'malformed-tailwind.config',
+      'ts-tailwind.config'
+    ],
+    cssPath: 'tailwind.css'
+  })
+
+  test('throws error about malformed config', () => {
+    expect(mockedWarn.mock.calls[0][0]).toMatchInlineSnapshot('"Failed to load Tailwind config at: `./malformed-tailwind.config.js`"')
+    expect(mockedWarn.mock.calls[0][0]).contains('Failed to load Tailwind config at: `./malformed-tailwind.config.js`')
+
+    expect(mockedWarn.mock.calls[0].length).toBe(2)
+  })
+
+  test('ts config file is loaded and merged', () => {
+    const nuxt = useTestContext().nuxt
+    const vfsKey = Object.keys(nuxt.vfs).find(k => k.includes('tailwind.config.'))
+    // set from ts-tailwind.config.ts
+    expect(nuxt.vfs[vfsKey]).contains('"typescriptBlue": "#007acc"')
+  })
+
+  test('js config file is loaded and merged', () => {
+    const nuxt = useTestContext().nuxt
+    const vfsKey = Object.keys(nuxt.vfs).find(k => k.includes('tailwind.config.'))
+    // set from ts-tailwind.config.ts
+    expect(nuxt.vfs[vfsKey]).contains('"javascriptYellow": "#f1e05a"')
+  })
+})

test/fixture/basic/alt-tailwind.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        javascriptYellow: '#f1e05a'
+      }
+    }
+  },
+  content: [
+    'content/**/*.md'
+  ]
+}

test/fixture/basic/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtPage />
+  </div>
+</template>

test/fixture/basic/malformed-tailwind.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('something-that-doesnt-exist')
+  ]
+}

test/fixture/basic/nuxt.config.ts

@@ -0,0 +1,11 @@
+import { resolve } from 'path'
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
+  alias: {
+    '@nuxtjs/tailwindcss': resolve(__dirname, '../../../src/module.ts')
+  },
+  modules: [
+    '@nuxtjs/tailwindcss'
+  ]
+})

test/fixture/basic/pages/index.vue

@@ -0,0 +1,18 @@
+<template>
+<!-- This example requires Tailwind CSS v2.0+ -->
+<div class="bg-gray-50">
+  <div class="px-4 py-12 mx-auto max-w-7xl sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
+    <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+      <span class="block">Ready to dive in?</span>
+      <span class="block text-indigo-600">Start your free trial today.</span>
+    </h2>
+    <div class="flex mt-8 lg:mt-0 lg:shrink-0">
+      <div class="inline-flex rounded-md shadow">
+        <a href="/_tailwind" class="inline-flex items-center justify-center px-5 py-3 text-base font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700">
+          Open Tailwind Config Viewer
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+</template>

test/fixture/basic/tailwind.config.js

@@ -1,5 +1,12 @@
 module.exports = {
   content: [
     'content/**/*.md'
-  ]
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: '#f1e05a'
+      }
+    }
+  }
 }