hono
hono copied to clipboard
honojs
attach hono-css's global scope from hono/css with `global`
What is the feature you are proposing?
I think it would be useful to have an API to inject directly from #hono/css to the root scope of #hono-css.
like this:
import { css, global } from 'hono/css'
const hogeCss = css`
color: red;
`
global`
body {
background-color: red;
}
@media (min-width: 768px) {
${hogeCss} {
color: blue;
}
}
`
Although it may be difficult from a security perspective, this would allow for more expressive CSS design.
@sor4chi
Okay, I understand it as an issue, but is it really necessary for us? It may be useful in some cases to be able to inject global styles from child components, but if we add body { color: ${myColor} in both "ComponentA" and "ComponentB", the administrator of "ComponentC" would have to ask "What is the color of the text Who's changing it?"
If our goal is to apply styles to the root element, and we want to use variables there, we could write the following.
<html class={css`
color: ${globalTextColor}
`}>
<body><App /></body>
</html>
I am hoping that there is a good solution to the media query issue, but I haven't come up with a good idea yet.
Hi, @usualoma It is true that when the same selector is specified from multiple components, it is difficult to know which one to choose when they are competing against each other.
I envision something like GlobalStyle for Vanilla Extract.
Code
import { globalStyle } from "@vanilla-extract/css";
globalStyle("body", {
color: "red",
});
globalStyle("body", {
color: "blue",
});
Vanilla Extract does not manage duplicates on the library side, but appends them in the order they are generated based on the concept of user management, and styles are applied according to the css order.
Certainly for just defining a little global style, something like what you have presented would be sufficient, but global assumes that the css generated under the component will be further styled as follows.
const containerCSS = css`
display: flex;
flex-direction: column;
width: 100%;
`
global`
${containerCSS} p {
font-size: 14px;
}
${containerCSS} a {
color: blue;
}
`
If you can do this, you can use Hono CSS to style the raw HTML passed from an external CMS, etc.
The creation of duplicate global styles generation should be eliminated by creating a Set with a Hash of Style.
@sor4chi Thanks for the reply! I think I understand the issues you are considering. I created #1928, will this solve your issue?
@usualoma Thank you, it was exactly what I was looking for!
The approach to implementing pseudo-scope was eye-catching. It is certainly inconvenient and confusing to use a separate function called global without the benefit of vscode-styled-components.
By the way, regarding this CSS nesting notation, it should only be supported by modern browsers, but is it like basically asking the user to support it with polyfill, etc.?