Getting 'No utility classes were detected in your source files' warning. about stencil-tailwind-plugin HOT 25 OPEN

@Poimen I opened #24 to track that feature request.

from stencil-tailwind-plugin.

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.

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:

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 component-without-tw-classes. This causes the warning to appear. Once you add a TW class in the render function, the warning disappears. Note! Adding a TW class via @apply in the .scss file doesn't hide the warning. For example:

I just didn't read good enough. 🤦 My apologies! 😓.

from stencil-tailwind-plugin.

Yeah, so, the content parameter will be overridden for the Stencil compiler to make it point to the building file, rather than a global blob (otherwise it includes all the styles from all the components in each other).

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',
  ]
  // ...
}

?
source

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 😸

from stencil-tailwind-plugin.

Regarding the safelist option in the Tailwind config. Yeah, I've tried using that but it messes up the performance when starting the project for development. Takes minutes before it starts and I don't want that 😅. Basically, I need every text and background color to be present in the Tailwind output. This is because I have an Avatar component that gets it background color and text color (when profile image is not available) based on the user that is currently logged in. So, it's dynamic.

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 safelist array. So I though adding one more file that contains all the classes I want in, into the source and content option would be far more performant. So I guess that's not an option then?

safelist: [
  'ux-bg-white',
  'ux-bg-black',
  'ux-text-white',
  'ux-text-black',
  {
      pattern: /ux-bg-(gray|red|yellow|green|blue|purple)-(50|100|200|300|400|500|600|700|800|900)/
  },
  {
      pattern: /ux-text-(gray|red|yellow|green|blue|purple)-(50|100|200|300|400|500|600|700|800|900)/
  }    
],

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 ux- prefix for the TW classes? I don't know. Looks like it doesn't cause any problems though. Not sure if problems will arise in the near future while developing the UX project. I surely hope not 😀.

from stencil-tailwind-plugin.

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 ux- prefix 🤷‍♂️

from stencil-tailwind-plugin.

On the safelist-ing ... I think that is a "problem" of how things are envisioned to work.

So what is happening when safelist is used, for instance:

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 safelist. So each component contains bg-red-500 / text-3xl / lg:text-4xl.

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 (Avatar) should get the colors, not every component?

from stencil-tailwind-plugin.

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 safelist option 🤔.

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 shadow: false configured.

I suspect your usecase is that a single component (Avatar) should get the colors, not every component?

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 Avatar component having it. Any idea on how to achieve that?

And the safelist.txt option with content combination is out of the question then?

from stencil-tailwind-plugin.

Sorry, got distracted with paying the bills 😸

And the safelist.txt option with content combination is out of the question then?

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 safelist section in the config. The purge postcss plugin is no longer used.

Any idea on how to achieve that?

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.

I was under the assumption that it would be added once to the global styling output file

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.

from stencil-tailwind-plugin.

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 safelist section in the config. The purge postcss plugin is no longer used.

Yeah, I understand that. But normally I would say when I add a specific file in the content array it would also be scanned for any used TW classes. So I was hoping to be able to use that. But because you mentioned Stencil JS overriding the content input, I can safely say thats not an option here.

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.

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?

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.

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 😁.

from stencil-tailwind-plugin.

@Poimen I also get this warn.
NOTE: Also, I think the defaultExtractor part of the readme is not up to date and it doesn't work anymore.

from stencil-tailwind-plugin.

Also, I think the defaultExtractor part of the readme is not up to date and it doesn't work anymore.

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?

But normally I would say when I add a specific file in the content array it would also be scanned for any used TW classes

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...

could you work this out in a simple example?

My idea is something like this - presently an example config in the plugins for stencil.config.ts:

  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.

from stencil-tailwind-plugin.

It would be interesting if this could be reproduced on a small example?

Let me see what I can do!

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...

That is how I did it when I still used the purge option 😁.

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.

This sounds like exactly what I need so solve the issue I am having 💪.

from stencil-tailwind-plugin.

It would be interesting if this could be reproduced on a small example?

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 component-without-tw-classes. This causes the warning to appear. Once you add a TW class in the render function, the warning disappears. Note! Adding a TW class via @apply in the .scss file doesn't hide the warning. For example:

component-without-tw-classes {
  @apply flex;
}

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?

from stencil-tailwind-plugin.

Should:

component-without-tw-classes {
  @apply flex;
}

not be:

.component-without-tw-classes {
  @apply flex;
}

(missing dot in front of class)?

from stencil-tailwind-plugin.

Nah, you can apply css directly on the HOST element if you leave out the .. You can add styling to the HOST element in two ways.

1: Via the scss file.

component-without-tw-classes {
  @apply flex;
}

2: In the render function by adding a Host element and add classes to that.

import { Component, h, Host } from '@stencil/core';

@Component({
  tag: 'component-without-tw-classes',
  styleUrl: 'component-without-tw-classes.scss',
})
export class ComponentWithoutTwClasses {
  render() {
    return  <Host class="flex">
        <div></div>
    </Host>;
  }
}

Also see the other components in my example project.

from stencil-tailwind-plugin.

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 component-without-tw-classes in the html. As in you're making component-without-tw-classes; it doesn't exist as in the render function - so the JIT could be purging it out as there is no reference to that actual element or class - the actual HTML presented doesn't contain that text. But this is really guess work, I'll have to actually have a proper dig around to see what it's doing, but on the face of it...

When consuming the component, you would have component-without-tw-classes and the css would apply. I would normally use the :host selector to target the host itself. I've had problems with host styles before that don't apply like you would think, this might be one of those caveat moments.

But thanks for the solid example, at least there is something to talk to and experiment with 👍

from stencil-tailwind-plugin.

Ah OK, got it! Looking forward to the config function too if it is manageable!

from stencil-tailwind-plugin.

@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?

from stencil-tailwind-plugin.

I would find it very cool if by default the components without any reference to a CSS file guarantee the usage of the TW

@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.

from stencil-tailwind-plugin.

It would be interesting if this could be reproduced on a small example?

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 component-without-tw-classes. This causes the warning to appear. Once you add a TW class in the render function, the warning disappears. Note! Adding a TW class via @apply in the .scss file doesn't hide the warning. For example:

component-without-tw-classes {
  @apply flex;
}

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?

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;
}

from stencil-tailwind-plugin.

@Poimen Do you have any update, or fix for this? Do you need help finding out why is this happening?

from stencil-tailwind-plugin.

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.

from stencil-tailwind-plugin.

Hi! Yes, I'm using the HMR plugin. However, I tried to remove it and the same warning still remains.

from stencil-tailwind-plugin.

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>
    )
  }
}

from stencil-tailwind-plugin.

This should be solved with @stencil/[email protected], please check the screenshots of my comment here and you can see the warning is gone.

Seems to me that issue comes from Stencil with the sourcemap error thing 🤔

from stencil-tailwind-plugin.