-
Notifications
You must be signed in to change notification settings - Fork 5
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
Getting 'No utility classes were detected in your source files' warning. #23
Comments
Yeah, so, the For TW v3, is this the safelist not what you want? module.exports = {
content: [
'./pages/**/*.{html,js}'
'./components/**/*.{html,js}',
],
safelist: [
'bg-red-500',
'text-3xl',
'lg:text-4xl',
]
// ...
} ? I've not used the safe list idea before, so not sure the exact expectation of that text file you are providing. Back to the warning, I have only seen that before when the component doesn't have TW styles in it - like we have a helper component, it's just a fancy syntactic sugar component to allow data moving in an ergonomic way so there is no render in it. Hence we get the warning. The difficulty with such, it's a chicken and egg - need to pass the file to TW only to discover the style is missing. I haven't given it much though and normally just ignore it. However, I know some CI/CD track warnings, but we've disabled warning tracking in our ADO pipelines...basically we're working around the warning 😸 |
Regarding the I've tried the following patterns to add those classes. These aren't even all the available colors and it took too long to process. I even tried adding them manually in the
Regarding the warning. I got a lot of components (about 40 now) with loads of TW styling, so thats why I thought the warning weird 😉. Perhaps it is because I use |
So on the warning, as far as I have tested, the prefix appears to be working as expected. As a silly test: <div class="text-slate-800">
This is a text line
</div> this will generate the warning. However, this doesn't: <div class="ux-text-slate-800">
This is a text line
</div> So you could have an errant component that is missing the |
On the safelist-ing ... I think that is a "problem" of how things are envisioned to work. So what is happening when module.exports = {
content: [
'./pages/**/*.{html,js}'
'./components/**/*.{html,js}',
],
safelist: [
'bg-red-500',
'text-3xl',
'lg:text-4xl',
]
// ...
} is that each and every component includes the This is because the same configuration is applied per component, so each component generates the same safelist. With Web Components in the shadow DOM, the idea is that they are self contained with all their CSS without leaking (or as little as possible). Hence, the "pass in the config and capture the CSS per component" works. However, in your case, the time explosion is the running (depending on the stencil config, 2+ times) the TW processor and it outputting all the CSS that stencil then has to package. I suspect your usecase is that a single component ( |
I understand the build time explosion now, thanks! So the build time is depended on the amount of components I have in combination the amount of classes I have in the At the moment I do not work with shadow DOM. That was a choice because my previous TW / Stencil setup was v2 and working with the purge option. I couldn't get that working with shadow DOM enabled. I kept that choice in when I updated my UX project with TW v3 and your plugin. So basically all components have
Preferably I would have the background and text color globally available, I was under the assumption that it would be added once to the global styling output file. Though at this moment I could work with only the And the |
Sorry, got distracted with paying the bills 😸
As I understand it in TW v3, the JIT fully enabled so it only generate the classes required, so no purge required. So the safelist where you would have given it to purge is replaced by the
Nope, this would be not achievable in the current configuration I was throwing around an idea in my head that instead of an object only TW config, it could take a function as well. The function could be sent the filename that it is processing and a TW configuration object. The implementation could be updated per file then and used. This way the caller could have some control over the TW config at a per file level.
Each component will have it's own baked in CSS, either not scoped, scoped or in the shadow DOM. There is a global CSS, but this is not processed (AFAIR, but it's been awhile) by the build pipeline. |
Yeah, I understand that. But normally I would say when I add a specific file in the
Hmm, could you work this out in a simple example? I understand the part of the function getting the filename as parameter and TW config. But what kind of modifications did you have in mind?
Got it. And now I understand why I see so many duplicate classes when using multiple components from my UX project in consuming projects. Ment to dive into that soon, but I guess I only have to solve it now 😁. |
@Poimen I also get this warn. |
ooh, yes, that isn't a thing anymore 🙈 will update that. Thanks! @ohkimur - are you using the same prefix as well? @ohkimur / @dtaalbers - I can't reproduce this outside of my example here #23 (comment) It would be interesting if this could be reproduced on a small example?
Ah! That is very cunning, it took a few reads to understand what you're doing ... would not have thought about it like that, but very interesting way around the problem...
My idea is something like this - presently an example config in the plugins: [
sass(),
tailwind({
tailwindConf,
tailwindCssPath: './src/styles/tailwind.css',
postcss: {
plugins: [
tailwindcss(),
autoprefixer()
]
}
}),
tailwindHMR()
] This would change to something like: import tailwindcss, { TailwindConfig } from 'tailwindcss';
import tailwindConf from './tailwind.config';
export const config: Config = {
// other stencil configuration
// ...
plugins: [
sass(),
tailwind({
tailwindConf: (filename: string, config: TailwindConfig): TailwindConfig => {
if (filename.includes('Avatar')) {
return {
...config,
content: [
...config.content,
'./src/safelist.txt'
]
}
}
return config;
},
tailwindCssPath: './src/styles/tailwind.css',
postcss: {
plugins: [
tailwindcss(),
autoprefixer()
]
}
}),
tailwindHMR()
]
}; This way you can mod and return the actual TW config that is used for a given file. You could also update the content to be whatever you needed for all the files on the fly as well if you needed. |
Let me see what I can do!
That is how I did it when I still used the purge option 😁.
This sounds like exactly what I need so solve the issue I am having 💪. |
Alright. After an hour of two digging around, I found out what is causing the warning! As you can see in my example I've added a new component called
I looked into my own UX project and I indeed have some components that don't have TW classes in them. @ohkimur is that something you have as well? |
Should: component-without-tw-classes {
@apply flex;
} not be: .component-without-tw-classes {
@apply flex;
} (missing dot in front of class)? |
Nah, you can apply css directly on the HOST element if you leave out the 1: Via the
2: In the render function by adding a
Also see the other components in my example project. |
The host element isn't named yet, so externally, you would be correct, but internally I'm not so sure. The TW regex may not be able to handle that style of component naming - as in there is no element named When consuming the component, you would have But thanks for the solid example, at least there is something to talk to and experiment with 👍 |
Ah OK, got it! Looking forward to the config function too if it is manageable! |
@dtaalbers Yes, I also seem to get the warning in components without TW classes. @Poimen I would find it very cool if by default the components without any reference to a CSS file guarantee the usage of the TW. At the moment it seems that if I don't have any components with CSS files associated, the TW classes fail. I guess this happens because the TW utility classes are not included by default or something like that (more research might be necessary). However, when there is at least one component that has a reference to a CSS file, other components seem to not require the CSS file. Do you think that we can do something about this? |
@ohkimur - can we please open a new issue to track this. I have a feeling this won't be possible given how the stencil compiler packages things - like the packager need to the know there are css and tsx files to package. However, would need to have a proper look into it and see if there is a way of working around this. |
Oh man, so sorry. I've just re-read what you said above in your first reply on this issue and me saying the same a few replies later:
I just didn't read good enough. 🤦 My apologies! 😓. |
For me, it's not the same. I only have a component with tw classes and the associated CSS file. that only contains the following code: :host {
display: block;
} |
@Poimen Do you have any update, or fix for this? Do you need help finding out why is this happening? |
Hi - I had thought this was fixed. There was another report of the HMR plugin making this thing "go away", are you using the HMR plugin at all? There seems to be a side effect in the stencil processing when you write new css blocks, which causes it to output slightly different things. I'm still trying to see exactly how to get around/fix that kind of side effect. |
Hi! Yes, I'm using the HMR plugin. However, I tried to remove it and the same warning still remains. |
Even if I leave just one component in the entire codebase, the warning remains. This is the component's code: import { Component, h, Prop } from '@stencil/core'
@Component({
tag: 'at-button',
styleUrl: 'at-button.css',
shadow: true,
})
export class AtButton {
@Prop() size: 'sm' | 'md' | 'lg' = 'sm'
render() {
return (
<button
class={{
'font-sans shadow-red-md hover:shadow-red-2xl active:shadow-red-sm flex cursor-pointer items-center gap-3 rounded-lg border-none bg-red-500 font-medium text-red-50 outline-none transition-all duration-300 hover:scale-105 hover:bg-red-400 hover:text-red-50 active:scale-95 active:bg-red-600 active:text-red-100':
true,
'px-5 py-3 text-sm': this.size === 'sm',
'px-7 py-4 text-base': this.size === 'md',
'px-9 py-5 text-lg': this.size === 'lg',
}}
>
<slot></slot>
</button>
)
}
} And this is the CSS file associated with it: :host {
display: block;
} Also, to make sure the class is detected, and it's not caused by the conditional classes or something like that, I also tried the following code, but the warning is still there: import { Component, h, Prop } from '@stencil/core'
@Component({
tag: 'at-button',
styleUrl: 'at-button.css',
shadow: true,
})
export class AtButton {
render() {
return (
<button class='font-sans shadow-red-md hover:shadow-red-2xl active:shadow-red-sm flex cursor-pointer items-center gap-3 rounded-lg border-none bg-red-500 font-medium text-red-50 outline-none transition-all duration-300 hover:scale-105 hover:bg-red-400 hover:text-red-50 active:scale-95 active:bg-red-600 active:text-red-100'>
<slot></slot>
</button>
)
}
} |
This should be solved with Seems to me that issue comes from Stencil with the sourcemap error thing 🤔 |
I am getting the above warning. But the classes seems to be generated properly. Is there something I am doing wrong? Any way to get rid of the warning?
Also small side question. It seems to be ignoring
'./src/safelist.txt'
in the content. Is that a tailwind thingy or is this something the plugin doesn't process? Thanks in advance!The text was updated successfully, but these errors were encountered: