[Feature Request] Intellisense Support for Tailwind Plugins

[Lepidopteran]

I've been enjoying using this plugin. However I've notice it doesn't recognize classes from other plugins (ex. DaisyUI).

It would be great if this could be added.

[theron-wang]

Thanks! I’ll see how viable this is to implement.

[theron-wang]

Added in 1.1.9; if there are any issues, please let me know!

[Lepidopteran]

That's great! however I have not been able to get it to work from my testing. are there any changes I should be making to anything?

I did check and I have latest version.

[theron-wang]

If the plugin is referenced in the plugins section in your configuration file, intellisense should work. If it doesn’t work then there is probably an error—could you tell me which plugins you are using, as well as the error message in the extensions output pane?

Thanks and sorry about the inconvenience!

On Mon, Dec 4, 2023 at 10:47 AM Blaine @.***> wrote:

That's great! however I have not been able to get it to work from my testing. are there any changes I should be making to config?

I did check and I have latest version

— Reply to this email directly, view it on GitHub https://github.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/issues/24#issuecomment-1838924778, or unsubscribe https://github.com/notifications/unsubscribe-auth/APRLLK6227F4DI7BTM5STGTYHXWCPAVCNFSM6AAAAAA7LPN2MOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMZYHEZDINZXHA . You are receiving this because you modified the open/close state.Message ID: <theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/issues/24/1838924778@ github.com>

[Lepidopteran]

Tailwind CSS Config Including Plugins:

/** @type {import('tailwindcss').Config} */
const plugin = require("tailwindcss/plugin");
module.exports = {
  content: [
    "*.aspx",
    "**/*.aspx",
    "*.ascx",
    "**/*.ascx",
    "*.master",
    "*.Master",
  ],
  // TODO: set to true when site has migrated to Tailwind
  corePlugins: {
    preflight: false,
  },
  theme: {
    extend: {
      height: {
        screen: ["calc(var(--vh) * 100)", "100vh"],
      }
    },
  },
  plugins: [
    require("daisyui"),
    plugin(function ({ addBase, theme, addUtilities }) {
      addUtilities({
        ".h-small-screen": {
          height: ["100vh", "calc(var(--vh) * 100)", "100svh"],  
        },
        ".h-large-screen": {
          height: ["100vh","100lvh"],
        },
        ".h-dynamic-screen": {
          height: ["100vh", "100dvh"],
        },
      })
    }),
  ],
  daisyui: {
    themes: [
      {
        light: {
          ...require("daisyui/src/theming/themes")["light"],
          primary: "#f80",
          secondary: "#48f",
          "--rounded-box": "0.5rem",
          "--rounded-btn": "0.325rem",
        },
        dark: {
          "primary": "#f80",
          "secondary": "#08f",
          "accent": "#1f2937",
          "neutral": "#1e1e1e",
          "base-100": "#3c3c3c",
          "info": "#00b0ff",
          "success": "#00bf79",
          "warning": "#fbbf24",
          "error": "#de1d41",
          "--rounded-box": "0.5rem",
          "--rounded-btn": "0.325rem",
          "--rounded-badge": "1.2rem",
        },
      },
    ],
  },
};

Error:

System.InvalidOperationException: Error occurred while parsing configuration file: C:\Users\test\Projects\tailwind_website\node_modules\daisyui\src\theming\functions.js:33
  },
                               ^
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\test\Projects\tailwind_website\node_modules\culori\src\index.js from C:\Users\test\Projects\tailwind_website\node_modules\daisyui\src\theming\functions.js not supported.
Instead change the require of index.js in C:\Users\test\Projects\tailwind_website\node_modules\daisyui\src\theming\functions.js to a dynamic import() which is available in all CommonJS modules.
    at Module.require ([stdin]:33:32)
    at Object.<anonymous> (C:\Users\test\Projects\tailwind_website\node_modules\daisyui\src\theming\functions.js:4:48)
    at Module.require ([stdin]:33:32)
    at Object.<anonymous> (C:\Users\test\Projects\tailwind_website\node_modules\daisyui\src\index.js:17:24)
    at Module.require ([stdin]:33:32)
    at Object.<anonymous> (C:\Users\test\Projects\tailwind_website\tailwind.config.js:24:5)
    at Module.require ([stdin]:33:32)
    at [stdin]:35:25
    at [stdin]:221:3
    at Script.runInThisContext (node:vm:123:12)
    at Object.runInThisContext (node:vm:299:38)
    at [stdin]-wrapper:6:22
    at Socket.emit (node:events:526:35) {
  code: 'ERR_REQUIRE_ESM'
}
Node.js v18.17.1
   at TailwindCSSIntellisense.Configuration.ConfigFileParser.<GetConfigJsonNodeAsync>d__4.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at TailwindCSSIntellisense.Configuration.ConfigFileParser.<GetConfigurationAsync>d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at TailwindCSSIntellisense.Configuration.CompletionConfiguration.<ReloadCustomAttributesAsync>d__39.MoveNext()

Hope this helps debug the issue.

[theron-wang]

Thanks! I wasn't really able to reproduce the issue, but it looks like the extension couldn't parse the import statements in culori\src\index.js (referenced in ...require("daisyui/src/theming/themes")["light"]). I made some changes regarding that in 1.1.9.1 so I'm hoping that it will work.

[Lepidopteran]

Unfortunately I'm still getting errors regarding DaisyUI and the extension.

I've attached the extension error, system info, as well as the versions of Node and npm.

Please let me know If I'm doing anything wrong.

Extension Error:

System.InvalidOperationException: Error occurred while parsing configuration file: C:\Users\test\Projects\tailwind_website\node_modules\daisyui\src\theming\functions.js:31
    const result = interpolate([input, "black"], "oklch")(percentage)
                   ^
TypeError: interpolate is not a function
    at Object.generateDarkenColorFrom (C:\Users\test\Projects\tailwind_website\node_modules\daisyui\src\theming\functions.js:31:20)
    at C:\Users\test\Projects\tailwind_website\node_modules\daisyui\src\theming\functions.js:55:34
    at Array.forEach (<anonymous>)
    at Object.convertColorFormat (C:\Users\test\Projects\tailwind_website\node_modules\daisyui\src\theming\functions.js:42:27)
    at C:\Users\test\Projects\tailwind_website\node_modules\daisyui\src\theming\functions.js:147:39
    at Array.forEach (<anonymous>)
    at Object.injectThemes (C:\Users\test\Projects\tailwind_website\node_modules\daisyui\src\theming\functions.js:146:28)
    at mainFunction (C:\Users\test\Projects\tailwind_website\node_modules\daisyui\src\index.js:59:40)
    at [stdin]:99:21
    at Array.forEach (<anonymous>)
Node.js v18.17.1
   at TailwindCSSIntellisense.Configuration.ConfigFileParser.<GetConfigJsonNodeAsync>d__4.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at TailwindCSSIntellisense.Configuration.ConfigFileParser.<GetConfigurationAsync>d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at TailwindCSSIntellisense.Configuration.CompletionConfiguration.<ReloadCustomAttributesAsync>d__39.MoveNext()

OS Info:

Test@DESKTOP-EGOIDM
----------------------
OS: Windows 11
Kernel: 10.0.22621
DE: Aero
WM: Explorer
WM Theme: Custom
Terminal: WezTerm
CPU: 11th Gen Intel i5-1135G7 (8) @ 2.420GHz
GPU: Caption
GPU: Intel(R) Iris(R) Xe Graphics
Memory: 7346MiB / 7953MiB

NPM version: 9.6.7

NodeJS Version: v18.17.1

[theron-wang]

Alright, so I made some more changes which will hopefully fix the issue. If there are any more issues, and if you are able to, could you tell me if you are using the latest DaisyUI version (just so I can try to reproduce the issue as best as possible)? Also, could you try adding "type": "module" in package.json and changing module.exports = to export default? Sorry about the inconveniences.

Thanks!

[Lepidopteran]

I made the suggested change to package.json and tailwind.config.js and also updated DaisyUI to version 4.4.19. Everything works as expected!

I believe the issue was fixed by changing module.exports = in tailwind.config.js.

I'm happy everything works but i wonder if there is a way to make it work without having to change module.exports = in tailwind.config.js?

If not, It's not that big of change to make to make this work.

Thank you for all the hard work on this project.

I would be happy to provide any questions to pertaining to my project.

I've attached my package.json and tailwind.config.js files

Package:

{
  "version": "1.0.0",
  "name": "tailwind test website",
  "private": true,
  "type": "module",
  "devDependencies": {
    "daisyui": "^4.4.19",
    "eslint": "^8.54.0",
    "tailwindcss": "^3.3.6",
  },
  "scripts": {
    "build": "tailwindcss -i ./src/css/style.css -o ./res/css/style.css --minify",
    "dev": "tailwindcss -c ./tailwind.config.js -i ./src/css/style.css -o ./res/css/style.css --watch"
  }
}

TailwindCSS Config:

/** @type {import('tailwindcss').Config} */
const plugin = require("tailwindcss/plugin");
export default {
  content: [
    "*.aspx",
    "**/*.aspx",
    "*.ascx",
    "**/*.ascx",
    "*.master",
    "*.Master",
  ],
  // TODO: set to true when site has migrated to Tailwind
  corePlugins: {
    preflight: false,
  },
  theme: {
    extend: {
      height: {
        screen: ["calc(var(--vh) * 100)", "100vh"],
      }
    },
  },
  plugins: [
    require("daisyui"),
    plugin(function ({ addBase, theme, addUtilities }) {
      addUtilities({
        ".h-small-screen": {
          height: ["100vh", "calc(var(--vh) * 100)", "100svh"],  
        },
        ".h-large-screen": {
          height: ["100vh","100lvh"],
        },
        ".h-dynamic-screen": {
          height: ["100vh", "100dvh"],
        },
      })
    }),
  ],
  daisyui: {
    themes: [
      {
        light: {
          ...require("daisyui/src/theming/themes")["light"],
          primary: "#f80",
          secondary: "#48f",
          "--rounded-box": "0.5rem",
          "--rounded-btn": "0.325rem",
        },
        dark: {
          "primary": "#f80",
          "secondary": "#08f",
          "accent": "#1f2937",
          "neutral": "#1e1e1e",
          "base-100": "#3c3c3c",
          "info": "#00b0ff",
          "success": "#00bf79",
          "warning": "#fbbf24",
          "error": "#de1d41",
          "--rounded-box": "0.5rem",
          "--rounded-btn": "0.325rem",
          "--rounded-badge": "1.2rem",
        },
      },
    ],
  },
};

[theron-wang]

Unfortunately, I still couldn't reproduce the issue exactly. I found that a similar error would occur when I had "type": "module" and not export module and vice versa, but I don't think that it is really related. If I eventually find a solution, I'll update the extension. Thanks for your help!