linaria icon indicating copy to clipboard operation
linaria copied to clipboard

Object Style syntax

Open loafofpiecrust opened this issue 5 years ago • 4 comments

Describe the enhancement

Coming from emotion, I miss being able to define my styles as a JS object, like so:

const myStyle = css({
  fontSize: "1.2rem",
});

It makes a big difference to me, especially when trying to write abstractions that work with styles.

Motivation

I have some utility styles that look like this (which linaria supports!):

export const fullWidth = {
  width: "100%",
  [theme.mediaQueries.medium]: {
    width: "45rem",
  },
  [theme.mediaQueries.large]: {
    width: "56rem",
  },
}

But then I can't write the final styles as an object. I have to interpolate them into a template string, which makes my styles inconsistent across the code base.

const myStyle = css`
  ${fullWidth}
`;

Possible implementations

I'm not sure; it seems like this library is tied to how template strings work. Is it straightforward to support at all?

Related Issues

It seems like this was last discussed several months ago in #464, is it still infeasible?

loafofpiecrust avatar Oct 26 '20 23:10 loafofpiecrust

It seems like this could be trivially provided by just a wrapper that calls the tagged template with an interpolation. I'm going to try out a proof of concept on a project I'm working on, and if it works I'll either throw together a PR if there's interest from the maintainers, or publish a small companion package.

eyelidlessness avatar Nov 24 '20 19:11 eyelidlessness

I'm disappointed to admit that, absent something I'm missing or some work at the build stage, I don't think this is achievable. I spent more time than I'd like to admit fussing with the types before finally just casting to see the runtime behavior and... well... this is what I get:

.s11fyzev{-webkit-var(--s11fyzev-0);-moz-var(--s11fyzev-0);-ms-var(--s11fyzev-0);var(--s11fyzev-0);}

eyelidlessness avatar Nov 28 '20 00:11 eyelidlessness

Really wanted, because also it's easier to mentally parse only JS in js files (right, there's jsx too, but jsx is just xml + js), just like react inline styles

caub avatar Dec 22 '21 20:12 caub

Do the template strings need to exist at build time? I can't easily produce build time template strings in PureScript so this would be necessary for me to switch to linaria.

i-am-the-slime avatar Feb 24 '23 08:02 i-am-the-slime