[Feature Request] Intellisense Support for Tailwind Plugins

Question

[Feature Request] Intellisense Support for Tailwind Plugins

Closed this issue 10 months ago · 10 comments

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.

Answer 1 · 2023-11-17T11:59:31.000Z

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

Answer 2 · 2023-12-04T02:56:49.000Z

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

Answer 3 · 2023-12-04T15:47:40.000Z

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.

Answer 4 · 2023-12-04T17:19:25.000Z

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 <#24 (comment)>, 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>

Answer 5 · 2023-12-04T17:57:02.000Z

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.

Answer 6 · 2023-12-05T01:29:40.000Z

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.

Answer 7 · 2023-12-05T17:48:53.000Z

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

Answer 8 · 2023-12-06T02:57:50.000Z

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!

Answer 9 · 2023-12-06T14:41:52.000Z

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",
        },
      },
    ],
  },
};

Answer 10 · 2023-12-20T03:22:02.000Z

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!