Using css`` and theme

[xrofa]

Hello!
With the styled method, we can use the theme we define, so we can have something like this:

const ContainerWithTheme = styled('div')`
    color: ${({ theme }) => theme.primary};
`;

Is there any way of doing exactly the same but with the css method?

Something like this:

const BtnClassName = css`
  border-radius: ${({ theme }) => theme.radius };
`;

I've tried different ways, but I don't think its supported right now, am I right?

Thanks!

[cristianbote]

Hey @xrofa,

Indeed, that is not supported at the moment. The logic was that setup and styled would usually be used together and hence the tight logic behind theme getting passed in there only. But, you could have a pre-bound css function and use that where needed:

import { css } from "goober";

const cssWithTheme = css.bind({
  // `p` here is the `props` key passed to the core logic
  p: {
    theme: {
      radius: "16px"
    }
  }
});

const BtnClassName = cssWithTheme`
  border-radius: ${({ theme }) => theme.radius};
`;

Would this be something that could be of help?

[xrofa]

Hey @cristianbote !
Thanks for the reply, that will most surely help.

Another question I have, are we able to use the css`` just like in styled-components?
I mean this type of use case:
https://styled-components.com/docs/api#css

import styled, { css } from 'styled-components'

const complexMixin = css`
  color: ${props => (props.whiteColor ? 'white' : 'black')};
`

const StyledComp = styled.div`
  /* This is an example of a nested interpolation */
  ${props => (props.complex ? complexMixin : 'color: blue;')};
`

[cristianbote]

Not exactly. css outputs a string value, representing the className for that given styles. With your exmaple, you could have multiple approaches for goober. One of it that comes to mind would be something like this:

import { styled, css } from 'goober'

// Switch to a regular function that returns an object
const complexMixin = props => ({
  color: props.whiteColor ? 'white' : 'black';
});

// Switch to an array based parameters so you could nest multiple styles
const StyledComp = styled.div([
  /* This is an example of a nested interpolation */
  props => props.complex ? complexMixin(props) : { color: 'blue'}
])

These changes in essence do not change the output but they do change in how they interact and depend on each other.

[dougg0k]

Is there any way to condition the property itself inside a styled() string?