theron-wang/VS2022-Editor-Support-for-Tailwind-CSS

Tailwind Config Prefix Support

delta1186 opened this issue · 9 comments

delta1186 commented

Thanks for creating this extension. It does not appear that the extension currently supports the prefix option set in the tailwind.config.js file. Not sure how difficult it would be to include that.

module.exports = {
    prefix: 'tw-',

That way the intellisense would auto-complete the following:

<div class="tw-text-

Working on adding tailwindcss to an existing project and have to prefix tailwind so I do not completely break the design. :)

theron-wang commented

Of course! I just added this feature in the latest update. Thank you!

delta1186 commented

@theron-wang thanks so much. I just updated the extension. Actually removed it and added it back just to be safe. Is there a trick to getting the prefix to work?

my tailwind.config.js file

/** @type {import('tailwindcss').Config} */
module.exports = {
    prefix: 'tw-',
    content: [
        './**/*.{aspx,aspx.vb}',
        './**/*.{ascx,ascx.vb}',
        './**/*.{master,master.vb}',
        './**/*.{html,htm}',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}
Recording.2023-09-09.123135.mp4
theron-wang commented

That’s very strange. I can’t see to repro this issue; are you sure you have Node installed and is your configuration file set to the correct one? Also, are there any errors logged to the ‘Extensions’ output window?

delta1186 commented

Running node v18.10.0 per node -v at the cmd
Do I need to be running v20?

Not sure I understand the second part here about config set to the right one.
"Node installed and is your configuration file set to the correct one"

System.IO.IOException: The process cannot access the file 'c:\user...\appdata\local\microsoft\visualstudio\17.0_f9beb536\extensions\14ly2nmg.tla\Resources\tailwindclasses.json' because it is being used by another process.
   at System.IO.__Error.WinIOError(Int32 errorCode, String maybeFullPath)
   at System.IO.FileStream.Init(String path, FileMode mode, FileAccess access, Int32 rights, Boolean useRights, FileShare share, Int32 bufferSize, FileOptions options, SECURITY_ATTRIBUTES secAttrs, String msgPath, Boolean bFromProxy, Boolean useLongPath, Boolean checkHost)
   at System.IO.FileStream..ctor(String path, FileMode mode, FileAccess access, FileShare share)
   at TailwindCSSIntellisense.Completions.CompletionUtilities.<LoadClassesAsync>d__70.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.Completions.CompletionUtilities.<InitializeAsync>d__68.MoveNext()
System.IO.IOException: The process cannot access the file 'c:\users...\appdata\local\microsoft\visualstudio\17.0_f9beb536\extensions\14ly2nmg.tla\Resources\tailwindclasses.json' because it is being used by another process.
   at System.IO.__Error.WinIOError(Int32 errorCode, String maybeFullPath)
   at System.IO.FileStream.Init(String path, FileMode mode, FileAccess access, Int32 rights, Boolean useRights, FileShare share, Int32 bufferSize, FileOptions options, SECURITY_ATTRIBUTES secAttrs, String msgPath, Boolean bFromProxy, Boolean useLongPath, Boolean checkHost)
   at System.IO.FileStream..ctor(String path, FileMode mode, FileAccess access, FileShare share)
   at TailwindCSSIntellisense.Completions.CompletionUtilities.<LoadClassesAsync>d__70.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.Completions.CompletionUtilities.<InitializeAsync>d__68.MoveNext()
System.IO.IOException: The process cannot access the file 'c:\users\...\appdata\local\microsoft\visualstudio\17.0_f9beb536\extensions\14ly2nmg.tla\Resources\tailwindclasses.json' because it is being used by another process.
   at System.IO.__Error.WinIOError(Int32 errorCode, String maybeFullPath)
   at System.IO.FileStream.Init(String path, FileMode mode, FileAccess access, Int32 rights, Boolean useRights, FileShare share, Int32 bufferSize, FileOptions options, SECURITY_ATTRIBUTES secAttrs, String msgPath, Boolean bFromProxy, Boolean useLongPath, Boolean checkHost)
   at System.IO.FileStream..ctor(String path, FileMode mode, FileAccess access, FileShare share)
   at TailwindCSSIntellisense.Completions.CompletionUtilities.<LoadClassesAsync>d__70.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.Completions.CompletionUtilities.<InitializeAsync>d__68.MoveNext()
System.IO.IOException: The process cannot access the file 'c:\users\...\appdata\local\microsoft\visualstudio\17.0_f9beb536\extensions\14ly2nmg.tla\Resources\tailwindclasses.json' because it is being used by another process.
   at System.IO.__Error.WinIOError(Int32 errorCode, String maybeFullPath)
   at System.IO.FileStream.Init(String path, FileMode mode, FileAccess access, Int32 rights, Boolean useRights, FileShare share, Int32 bufferSize, FileOptions options, SECURITY_ATTRIBUTES secAttrs, String msgPath, Boolean bFromProxy, Boolean useLongPath, Boolean checkHost)
   at System.IO.FileStream..ctor(String path, FileMode mode, FileAccess access, FileShare share)
   at TailwindCSSIntellisense.Completions.CompletionUtilities.<LoadClassesAsync>d__70.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.Completions.CompletionUtilities.<InitializeAsync>d__68.MoveNext()
System.IO.IOException: The process cannot access the file 'c:\users\...\appdata\local\microsoft\visualstudio\17.0_f9beb536\extensions\14ly2nmg.tla\Resources\tailwindclasses.json' because it is being used by another process.
   at System.IO.__Error.WinIOError(Int32 errorCode, String maybeFullPath)
   at System.IO.FileStream.Init(String path, FileMode mode, FileAccess access, Int32 rights, Boolean useRights, FileShare share, Int32 bufferSize, FileOptions options, SECURITY_ATTRIBUTES secAttrs, String msgPath, Boolean bFromProxy, Boolean useLongPath, Boolean checkHost)
   at System.IO.FileStream..ctor(String path, FileMode mode, FileAccess access, FileShare share)
   at TailwindCSSIntellisense.Completions.CompletionUtilities.<LoadClassesAsync>d__70.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.Completions.CompletionUtilities.<InitializeAsync>d__68.MoveNext()
System.InvalidOperationException: Error occurred while parsing configuration file: ...\node_modules\tailwindcss\stubs\tailwind.config.js:2
export default __CONFIG__
^^^^^^
SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1078:15)
    at Module._compile (node:internal/modules/cjs/loader:1113:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1203:10)
    at Module.load (node:internal/modules/cjs/loader:1027:32)
    at Module._load (node:internal/modules/cjs/loader:868:12)
    at Module.require (node:internal/modules/cjs/loader:1051:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at [stdin]:1:28
    at Script.runInThisContext (node:vm:129:12)
Node.js v18.10.0
   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()
System.InvalidOperationException: Error occurred while parsing configuration file: ...\node_modules\tailwindcss\stubs\tailwind.config.js:2
export default __CONFIG__
^^^^^^
SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1078:15)
    at Module._compile (node:internal/modules/cjs/loader:1113:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1203:10)
    at Module.load (node:internal/modules/cjs/loader:1027:32)
    at Module._load (node:internal/modules/cjs/loader:868:12)
    at Module.require (node:internal/modules/cjs/loader:1051:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at [stdin]:1:28
    at Script.runInThisContext (node:vm:129:12)
Node.js v18.10.0
   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()
System.InvalidOperationException: Error occurred while parsing configuration file: c:\us...\node_modules\tailwindcss\stubs\tailwind.config.js:2
export default __CONFIG__
^^^^^^
SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1078:15)
    at Module._compile (node:internal/modules/cjs/loader:1113:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1203:10)
    at Module.load (node:internal/modules/cjs/loader:1027:32)
    at Module._load (node:internal/modules/cjs/loader:868:12)
    at Module.require (node:internal/modules/cjs/loader:1051:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at [stdin]:1:28
    at Script.runInThisContext (node:vm:129:12)
Node.js v18.10.0
   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()
System.InvalidOperationException: Error occurred while parsing configuration file: c:\use...m\node_modules\tailwindcss\stubs\tailwind.config.js:2
export default __CONFIG__
^^^^^^
SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1078:15)
    at Module._compile (node:internal/modules/cjs/loader:1113:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1203:10)
    at Module.load (node:internal/modules/cjs/loader:1027:32)
    at Module._load (node:internal/modules/cjs/loader:868:12)
    at Module.require (node:internal/modules/cjs/loader:1051:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at [stdin]:1:28
    at Script.runInThisContext (node:vm:129:12)
Node.js v18.10.0
   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()
System.InvalidOperationException: Error occurred while parsing configuration file: c:\us...rm\node_modules\tailwindcss\stubs\tailwind.config.js:2
export default __CONFIG__
^^^^^^
SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1078:15)
    at Module._compile (node:internal/modules/cjs/loader:1113:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1203:10)
    at Module.load (node:internal/modules/cjs/loader:1027:32)
    at Module._load (node:internal/modules/cjs/loader:868:12)
    at Module.require (node:internal/modules/cjs/loader:1051:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at [stdin]:1:28
    at Script.runInThisContext (node:vm:129:12)
Node.js v18.10.0
   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()
System.InvalidOperationException: Error occurred while parsing configuration file: c:\use...rm\node_modules\tailwindcss\stubs\tailwind.config.js:2
export default __CONFIG__
^^^^^^
SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1078:15)
    at Module._compile (node:internal/modules/cjs/loader:1113:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1203:10)
    at Module.load (node:internal/modules/cjs/loader:1027:32)
    at Module._load (node:internal/modules/cjs/loader:868:12)
    at Module.require (node:internal/modules/cjs/loader:1051:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at [stdin]:1:28
    at Script.runInThisContext (node:vm:129:12)
Node.js v18.10.0
   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.<InitializeAsync>d__38.MoveNext()
System.InvalidOperationException: Error occurred while parsing configuration file: c:\use...rm\node_modules\tailwindcss\stubs\tailwind.config.js:2
export default __CONFIG__
^^^^^^
SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1078:15)
    at Module._compile (node:internal/modules/cjs/loader:1113:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1203:10)
    at Module.load (node:internal/modules/cjs/loader:1027:32)
    at Module._load (node:internal/modules/cjs/loader:868:12)
    at Module.require (node:internal/modules/cjs/loader:1051:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at [stdin]:1:28
    at Script.runInThisContext (node:vm:129:12)
Node.js v18.10.0
   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()
delta1186 commented

@theron-wang so updated node to v20, but that did not work. I also rebooted since the output was mentioning a file in use by another process, but that also did not work. Anther thing to note about my solution folder. It contains two separate web forms apps, windows forms app and windows service and some thing items. I only have tailwind installed on one of the web forms apps.

This is the contents of the file it is erroring on

/** @type {import('tailwindcss').Config} */
export default __CONFIG__

also this is the extension output after the reboot.

System.InvalidOperationException: Error occurred while parsing configuration file: c:\users...m\node_modules\tailwindcss\stubs\tailwind.config.js:2
export default __CONFIG__
^^^^^^
SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1187:20)
    at Module._compile (node:internal/modules/cjs/loader:1231:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1321:10)
    at Module.load (node:internal/modules/cjs/loader:1125:32)
    at Module._load (node:internal/modules/cjs/loader:965:12)
    at Module.require (node:internal/modules/cjs/loader:1149:19)
    at require (node:internal/modules/helpers:121:18)
    at [stdin]:1:28
    at Script.runInThisContext (node:vm:122:12)
Node.js v20.0.0
   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.<InitializeAsync>d__38.MoveNext()
System.InvalidOperationException: Error occurred while parsing configuration file: c:\users\...m\node_modules\tailwindcss\stubs\tailwind.config.js:2
export default __CONFIG__
^^^^^^
SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1187:20)
    at Module._compile (node:internal/modules/cjs/loader:1231:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1321:10)
    at Module.load (node:internal/modules/cjs/loader:1125:32)
    at Module._load (node:internal/modules/cjs/loader:965:12)
    at Module.require (node:internal/modules/cjs/loader:1149:19)
    at require (node:internal/modules/helpers:121:18)
    at [stdin]:1:28
    at Script.runInThisContext (node:vm:122:12)
Node.js v20.0.0
   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()
delta1186 commented

It appears I get the file in use error when I close VS and reopen. Also tried node v20.5.0 and npm 10.1.0 without success.

theron-wang commented

Not sure I understand the second part here about config set to the right one.

Sorry about the confusion, I meant to ask if you right clicked on the file and clicked ‘set as configuration file’. That doesn’t seem to be the issue, however.

Is the content of your configuration file (tailwind.config.js) the same as what you provided above and if not, are you referencing other files?

Again, I’m very sorry about this inconvenience!

  • 👍1
delta1186 commented

Okay, I missed that step. I just did it and it now works as expected. Sorry about that.

Now if I can just get VS to stop taking 20 seconds every time I click refresh in the browser to reload the page. :)

theron-wang commented

Great to hear that it works!