Skip to content

Allow configuring .ts files to include for Angular users #687

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
leon opened this issue Jan 4, 2023 · 1 comment
Closed

Allow configuring .ts files to include for Angular users #687

leon opened this issue Jan 4, 2023 · 1 comment
Assignees

Comments

@leon
Copy link

leon commented Jan 4, 2023

What version of Tailwind CSS IntelliSense are you using?
v0.9.2

What version of Tailwind CSS are you using?
v3.2.4

What package manager are you using?
pnpm

What operating system are you using?
macOS

Tailwind config

// Paste the contents of your Tailwind config file here

VS Code settings

"tailwindCSS.experimental.classRegex": ["class:\\s'([^`]*)'"],

Describe your issue

Problem

I'm using tailwind with angular where the components are defined in the .ts files.
Since #644 was merged It no longer works for me in angular components since typescript was removed as a language that this plugin checks.

This issue is mostly as reference for others encountering the same problems.
so maybe we should add something about it to the docs?

// my-thing.component.ts
@Component({
  selector: 'my-thing',
  standalone: true,
  template: '<div>My Thing</div>',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    class: 'flex flex-col gap-4'
  }
})
export class MyThingComponent {}

So there might be more people like me out there.

I also had to add the experimental classRegex

"tailwindCSS.experimental.classRegex": ["class:\\s'([^`]*)'"],

to get it to recognise the that host: { class: '' } is tailwind.

Solution

Since there is already a way to include typescript again, that is always an option.

"tailwindCSS.experimental.classRegex": ["class:\\s'([^`]*)'"],
"tailwindCSS.includeLanguages": {
  "typescript": "javascript"
}

Improvement

But it would be better to only include it for files that are angular components.

So if possible maybe we could add the possibility to specify an array of globs where the plugin should be active?

that way in angular projects, we only activate the plugin on certain files

Some usual file name patterns in angular projects
either they use the newer syntax where everything is in the .ts file, or you import an html template.

my-thing.component.html
my-thing.component.ts

my-dialog.dialog.html
my-dialog.dialog.ts

my-button.button.html
my-button.button.ts

my-panel.panel.html
my-panel.panel.ts
@bradlc bradlc self-assigned this Jan 4, 2023
@bradlc
Copy link
Contributor

bradlc commented Jan 4, 2023

Hey @leon. Thanks for the suggestion. As you said I think the existing includeLanguages setting already covers this. You can also already specify globs using the tailwindCSS.experimental.configFile setting:

"tailwindCSS.experimental.configFile": {
  "./tailwind.config.js": ["./src/components/**/*.ts"]
}

I think I'm happy with the existing settings right now and wouldn't want to add additional complexity there. The only thing I'm considering now is whether we should reinstate the typescript language by default, but I'll wait and see about that.

Thanks again, and let me know if I've missed something 👍

@bradlc bradlc closed this as not planned Won't fix, can't repro, duplicate, stale Jan 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants