style {} block has no effect
elverskog opened this issue · comments
I'm having trouble getting a style block to have any effect.
This works.
<style>
ul.item-list {
color: red;
}
</style>
This does not.
style {
ul.item-list {
color: red;
}
}
Both are right above this markup in a .marko file.
<ul.item-list>
<for|item, index| of=input.items>
<list-item key=`${index}` ...item />
</for>
</ul>
There is nothing else in the file.
I am using the standard tooling from npx @marko/create on arch linux, testing on firefox.
Is there any specific config, transpiler or flag that needs to be used for the style block version to work?
I also tried just using the straight ul (like ul { ... })
I see the same result with npm run dev as with build then run.
@elverskog could you create and share reproduction repo?
Yes, of course (link below)
I figured out more specifically when the issue happens but why or if there is some rule...?
When it breaks:
I have an index.marko file in my ./src/pages dir and it has a class { ... } at the top.
When that class is present it stops stye blocks from working for any components used in the markup of said file.
The class can be empty or have stuff in it...still breaks things.
If I remove that class declaration, the style blocks go into effect.
@elverskog the issue is https://github.com/marko-js/marko/wiki/Error:-Stateful-components-cannot-contain-html,-head,-or-body-tags.
It's one of the first issues people typically run into when using Marko (with the changes we're making for Marko 6 thankfully it will be a non-issue there).
The gist is that Marko is going to work best when you move stateful logic as low in the tree as possible in order to take advantage of its partial hydration. By putting a class at the root component you essentially opt into fully rendering everything in the browser which is problematic for most of our setups since things like the assets are only ever rendered on the server side.
We also have a concept called split components which you can use at the root and give you access to a limited subset of the Marko api. With it you do not have access to state and Marko uses this to know not to send the template to the browser since it could never re-render. With it you still get access to some lifecycle methods (eg onMount) and the ability to attach event handlers.
ty