bug: Nested @property causes PostCSS build warnings

[brianhelba]

Reproduction URL (Required)

https://github.com/brianhelba/parcel-tailwind-postcss/tree/daisy-build

What version of daisyUI are you using?

5.0.35

Which browsers are you seeing the problem on?

No response

Describe your issue

When built, daisyUI's @property --radialprogress is nested within a @layer base with the overall structure:

@layer base {
  @property --radialprogress {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
  }
}

However, Parcel (a popular tool for building with PostCSS) expects that:

@property is only valid at the top level, not inside a layer

This causes builds of Tailwind + daisyUI with Parcel to emit the warning:

@parcel/transformer-css: Unknown at rule: @property

---

Given than the effects of registering a @property are indeed global (it's meaningless to scope to a @layer), could the definition of @property --radialprogress be moved to the top level (just like all the other @property --tw-border-style, etc.)?

[github-actions[bot]]

Thank you @brianhelba for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[brianhelba]

@saadeghi Given that you haven't received a response to https://github.com/parcel-bundler/lightningcss/issues/968#issuecomment-2916639715 , would it be possible to move forward with just addressing this within Daisy?

I agree, it shouldn't matter whether a @property is defined within a @layer or not, but maybe @property --radialprogress could be moved to the top level, just to keep other tools happy?

[saadeghi]

The current Tailwind CSS plugin API only allows adding styles to Tailwind layers. So it's not possible. A workaround would be excluding properties file:
https://daisyui.com/docs/base/

[almirhodzic]

I just uncomented: //export default {"@property --radialprogress":{"syntax":"""","inherits":"true","initial-value":"0%"}};

in: node_modules/daisyui/base/properties/object.js

the warining will disapear

[saadeghi]

@almirhodzic Easier way in your CSS file:

@plugin "daisyui" {
  exclude: properties;
}

Which excludes this file

[almirhodzic]

@almirhodzic Easier way in your CSS file:

@plugin "daisyui" {
  exclude: properties;
}

Which excludes this file

perf! thanks!

[dorsma]

I'm getting the same error using tailwindcss cli tool (not parcel)

/*! 🌼 daisyUI 5.3.10 */
Found 1 warning while optimizing generated CSS:
 
│ }
│ @layer base {
│   @property --radialprogress {
┆            ^-- Unknown at rule: @property

Using the @saadeghi workaround for now

[phcoliveira]

Thanks, folks, but can this file be excluded without any problems?

[pdanpdan]

Yes, if you don't use radial progress If you do use it, exclude properties and copy-paste the definition of the property in your css at the top

[robsontenorio]

I’m a bit late to the party, so is there no way to fix this warning in DaisyUI itself?

I’m using the .radial-progress component, but I still see this warning.

transforming (1) resources/js/app.js/*! 🌼 daisyUI 5.5.5 */

Found 1 warning while optimizing generated CSS:
 
│ }
│ @layer base {
│   @property --radialprogress {
┆            ^-- Unknown at rule: @property

[pdanpdan]

Exclude the properties and add it by hand in your css. That way you have the property defined and no warning.

[robsontenorio]

Thanks! 🙂

However, I prefer to stick to the default settings and avoid any additional elements in my app.css file. I will wait for a definitive fix.

[mtarroyo]

This is just a warning and will not affect your final build. This king of warning occurs not only in PostCSS but also in tools like Lightning CSS (used by Vite). Those tools emit this kind of warning because they don't understand @property or expect it to be declarad in a specific way. You can just ignore the warning because it do not interfer the CSS parse, minification and bundle provided by tools like PostCSS or Lightning CSS. The final bundled build will be interpreted and rendered by the browser, which can handle @property without problem.