-
Notifications
You must be signed in to change notification settings - Fork 265
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.
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
[RFC] Use CSS Custom Properties for dynamic styles #595
Comments
This is just an idea I had a while ago, likely I might not have time to implement it soon but I wanted to put it out there in case anybody is interested cc @developit |
I tried the following code from the documentation but I got the __jsx-style-dynamic-selector after each selector.... it's very annoying... import React from "react";
import css from "styled-jsx/css";
function getLinkStyles(color: string) {
return css.resolve`
div > h1 {
color: ${color};
}
`;
}
export default () => {
const { className, styles } = getLinkStyles("red");
return (
<div>
<div className={className}>
<h1>tot</h1>
</div>
{styles}
</div>
);
}; But I got something annoying when I tried to add selector directly after each one I got
in my case so I get a wrong selector and no style on my elements... |
The scope of this "RFC" is to discuss about the possibility to use CSS Custom Properties for dynamic styles.
Switching to use CSS Custom Properties might allow us to explore static extraction in the future.
This mode would be optional and disabled by default as many might still need to support IE, it will also be a breaking change because we would need to allow interpolations only for CSS values:
How dynamic styles work right now
Interpolations, and therefore the entire template literal containing the CSS, are flagged as dynamic when they have an expression that cannot be evaluated at build time.
When this is the case we rewrite the styles as follow:
We also hash the string above to have a base ID, say
123
. Then we rewrite theclassName
attribute of every JSX element to include a fn that generates the proper ID at runtime based on props:JSXStyle.dynamic
's signature is:It takes an
Array<JSXStyleInfo>
because there could be multiple style tags per component.At runtime then it basically maps
JSXStyleInfo
to create an hash from JSXStyleInfo, and then flattens the result to finally return classnamesInternally then
JSXStyle
does the same and replaces__jsx-style-dynamic-selector
withjsx-123abc
.Proposal
I think that we could rework this part to instead use custom properties:
We won't use any
__jsx-style-dynamic-selector
but rather use theBaseID
to generate the scoped classjsx-123
.Interpolations would be replaced with custom properties:
and the root JSXElement would set custom properties using
JSXStyle.dynamic
:The text was updated successfully, but these errors were encountered: