`fragment` tag for composition
See original GitHub issueProblem
Currently it’s not possible to compose styles from multiple classnames together. Previously we had a include
helper which would take a class name and return the unprocessed CSS text. I removed it because it wasn’t strightforward to implement it with the new approach and I haven’t needed to use it personally. In addition, an extra class name was generated whether you used it anywhere or not.
Another usecase is that once you get into an interpolation inside the tagged template, we don’t parse the nested interpolations. So it’s not possible to do something like following:
const Box = styled.div`
font-size: 14px;
${borders
.map(({ p, w }) => `border-${p}: ${w}px solid ${props => props.color}`)
.join('\n')};
`;
styled-components
has exports css
tag to support this. However, the css
tag is used for class names in Linaria, so we can’t do the same.
Prior art
Emotion allows you to interpolate a class name which inlines its styles: https://emotion.sh/docs/composition
One problem with this approach is that you’re interpolating a class name, but getting the CSS text instead. This breaks the following use case where you might want to refer to another class name:
const paragraph = css`
font-size: 14px;
`;
const article = css`
backgrounc-color: white;
.${paragraph} {
font-size: 16px;
}
`;
Current solution
Currently, you could do something like this:
const shared = `
font-size: 18px;
`;
const Title = styled.h1`
${shared};
color: black;
`;
There are 2 issues with this approach:
- There’s no syntax highlighting or autocomplete for the CSS
- It’s not possibe to use dynamic interpolations like you would in
styled
Proposal
We could add a new fragment
tag to allow this use case:
const shared = fragment.css`
font-size: 18px;
`;
const Title = styled.h1`
${shared};
color: black;
`;
The fragment
tag itself won’t generate any class names, but when the result is interpolated, it will inline the CSS text along with the dynamic interpolations. It’ll work very similarly to how styled-components
handles interpolation of css
tagged template literals. As for parsing, it would be parsed similar to how the styled.x
tags are parsed.
Note: Initially I thought of having just fragment
, but went for fragment.css
since it allows us to have syntax highlighting and autocomplete.
Since the fragment
tag won’t generate a class name, to use it as a class, you could do something like this:
const title = css`${shared}`;
You could even inline it if you don’t like creating an extra variable:
<h1 class={css`${shared}`} />
Why not add it
It requires extra code, especially if we want to support interpolations and don’t want to leave the CSS code for the fragment inside the JS bundle.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:47
- Comments:30 (15 by maintainers)
Top GitHub Comments
I opened a draft PR with PoC implementation, the allowed syntax is as below, please find the description in the PR #615
Styles composition would be extremely useful once we introduce react-native support #236 We could potentially share more code between
react
andreact-native