Skip to content
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.

Sign up for GitHub

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

Jump to bottom

bug: input-error definition is not there in the output csss #3269

Closed
indcoder opened this issue Nov 9, 2024 · 10 comments
Closed

bug: input-error definition is not there in the output csss #3269

indcoder opened this issue Nov 9, 2024 · 10 comments

Comments

@indcoder
Copy link

indcoder commented Nov 9, 2024

What version of daisyUI are you using?

v4.12.14

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://github.com/HackerspaceMumbai/Visage

Describe your issue

I'm programmatically adding the input-error class to form controls failing validation

image

While the input-error is being added to the input element, its not getting styled because there is no input-error styling in the generated output css even though input-bordered, input-focus etc are there.

image image

I have tweaked my theme but I dont think this should cause the error color disappearing from the generated css output file

/** @type {import('tailwindcss').Config} /
module.exports = {
content: ["./**/.{razor,html}"],
theme: {
extend: {},
},
plugins: [require('daisyui')],
daisyui: {
themes: [

        {
            light: {
                ...require("daisyui/src/theming/themes")["light"],
                "primary": "facc15",
                "secondary": "003366",

            },

            dark: {
                ...require("daisyui/src/theming/themes")["dark"],
                "primary": "facc15",
                "secondary": "00bcd4"

            },





        },


    ], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
    darkTheme: "false", // name of one of the included themes for dark mode
    base: true, // applies background color and foreground color for root element by default
    styled: true, // include daisyUI colors and design decisions for all components
    utils: true, // adds responsive and modifier utility classes
    prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
    logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
    themeRoot: ":root", // The element that receives theme color CSS variables
}

}
@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 9, 2024

Thank you @indcoder 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.

@saadeghi
Copy link
Owner

saadeghi commented Nov 9, 2024

Where is input-error in your code?

@indcoder
Copy link
Author

indcoder commented Nov 9, 2024

@saadeghi please check 1st picture of the issue ...I have circled it in the Dev Tool. The element has a class of input-error, but the generated CSs output file doesn't have a definition of input-error

@saadeghi
Copy link
Owner

saadeghi commented Nov 9, 2024

I see your screenshot. Where did you use input-error in your source code?
Tailwind doesn't generate classnames from your output HTML which you see in devtools. It generates from your source code.

@indcoder
Copy link
Author

indcoder commented Nov 9, 2024 via email

@saadeghi
Copy link
Owner

saadeghi commented Nov 9, 2024

Where is this .razor file? I don't see any input-error in your repo.

@indcoder
Copy link
Author

Its generated in a Utility Validation Class ....which injects input-error into the HTML/Blazor component if validation fails.

https://github.com/HackerspaceMumbai/Visage/blob/13d3d7ac18a9fd63f310770ed3d5753c8038a5dd/Visage.FrontEnd/Visage.FrontEnd.Shared/DaisyUIInputError.cs#L13

@saadeghi
Copy link
Owner

Your content config in tailwind.config.js is only addressing "./**/*.{razor,html}" (not .cs files)
https://github.com/HackerspaceMumbai/Visage/blob/13d3d7ac18a9fd63f310770ed3d5753c8038a5dd/Visage.FrontEnd/Visage.FrontEnd.Shared/tailwind.config.js#L3

If you want it to also find class names in DaisyUIInputError.cs, update that content.

Let me know if you have a question.

@indcoder
Copy link
Author

Ok thank you., @saadeghi.

Also wanted to leave a bit of my learning on this:

Now I also experimented why it worked in the PoC but not here.....In the PoC, I had experimented by adding the input-error in the razor to see how it behaved in the browser and then added it to Utility class and removed it from the razor file.. In this project, I added it directly to the utility class, but since tailwind config was watching only my razor files...it did not pickup the input error......

But why it worked in the PoC after removing it from the razor? Well IMO, its an edge case..once you add it in the razor file, the generated output css will retain that definition even if the input-error is subsequently removed from the razor file.

image

@saadeghi
Copy link
Owner

saadeghi commented Nov 10, 2024 •
edited
Loading

In dev mode when you add class names to your files they will be added to the CSS file but when you delete them they are not being removed instantly.

I'm mot sure but I think the same happens with JS functions, etc. and the reason is, faster HMR. Apparently loading some unused code in dev mode costs less time than removing them.

If you restart the dev server, the removed class name is not there anymore.

In the end, you should never trust the output you see in dev mode since the priority in dev mode is speed while the priority in production mode is efficiency and performance. That's why when you run a Lighthouse test on dev mode you get an awful result. Because a lot of unoptimized, unused things are included.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@indcoder @saadeghi