tinyColor.less from antd overriding my own styles about next-plugin-antd-less HOT 7 CLOSED

😂 https://github.com/vercel/next.js/search?q=css+order&type=issues

from next-plugin-antd-less.

can you show an example repo?

from next-plugin-antd-less.

I was trying to reproduce it a while back with your mkn repo to ensure if it is on my end or not, so it is using a slightly older version of your mkn repo. I do apologize for absolutely butchering your code. I was trying to delete a lot of it as I was trying to figure out the cause of the issue.

Example Repo:
https://github.com/kseanjbz/mkn_bug_demo

steps to reproduce:

1. yarn install
2. yarn dev (sometimes i had to exit and run again)
3. navigate to http://localhost:3000/about
4. notice the button is not red
5. In line 30 of MasterLayout.tsx, uncomment it
6. refresh localhost page
7. notice how both are now red

Same thing is happening in my app where seemingly random things like this was breaking my app. One was an import of a component which only contained divs and nothing else but it broke the styling. Thanks for looking at this SolidZORO!

from next-plugin-antd-less.

I tried to run your case and found that it worked fine, uncommented the Button and found that the .test did not take effect immediately, but after refreshing the page everything worked fine.

I think this is some disadvantage of SSR compared to CSR, the mechanism of code hot update is not the same. Anyway I think this is normal, or can you describe in more detail what is wrong there? Recording a video would be fine.

BTW, the project didn't run because of the missing @THEME--DARK variable, then I added a ~ to the front of vars, like this @THEME--DARK: ~'theme-dark'; and it worked.

from next-plugin-antd-less.

The problem is I always expected the button to be red and the .test to take effect, but on initial load it isn't unless the other button is loaded. Why would commenting out the button change anything? Very strange indeed.

from next-plugin-antd-less.

ohhhh! It seems to be a css order issue with next.js, which is particularly bad on antd.

You can write an extra layer of button.text {} or use !important.

from next-plugin-antd-less.

Exactly. I'm trying to figure out why the css ordering can flip so randomly. Using button.text or !important isn't really a feasible solution for my app.

from next-plugin-antd-less.