Will this support dynamic whole CSS property entries?

Ex.

import { styled } from '@compiled/css-in-js';

const Foo = styled.div`
  ${(props) => (props.on ? 'color: red;' : 'color: black;')}
`

Today, this throws a

@parcel/transformer-babel: <css input>:3:3: Unknown word
          CssSyntaxError: <css input>:3:3: Unknown word

I would provide a codesandbox but I’ve had a hard time getting @compiled running in any, is there a starter template in codesandbox? .

[pgmanutd]

@butlersrepos: Also check this link on compiled website: https://compiledcssinjs.com/docs/migrating#generating-css-at-runtime

[itsdouges]

Hi,

At the moment that CSS won’t be able to defined like that (so alternatively define it as just the value and it will work).

I have some ideas how we can enable this though (because it’s still static) but we have other priorities at the moment.

We should add a better error message for this case!

On Sun, 4 Oct 2020, 4:13 am butlersrepos, [e-mail] wrote:

Ex.

import { styled } from ‘@compiled/css-in-js’;

const Foo = styled.div ${(props) => (props.on ? 'color: red;' : 'color: black;')}

Today, this throws a

@parcel/transformer-babel: <css input>:3:3: Unknown word CssSyntaxError: <css input>:3:3: Unknown word

I would provide a codesandbox but I’ve had a hard time getting @compiled https://github.com/compiled running in any 😦 .

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/atlassian-labs/compiled/issues/307, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABT4PHOTQEHO7XLBLRUZ2NTSI5LTFANCNFSM4SDEI4EA .