Question: Can I use this with Emotion? about graphql-css HOT 4 CLOSED

ping @braposo

from graphql-css.

Hey @lifeiscontent, thanks for your question! That's something I've been considering since the deprecation of glamorous so it's probably happening soon.

In the meantime you could always wrap the generated component with emotion, which I know isn't ideal but works.

import styled from "react-emotion";

const Text = gqlCSS(styles)(textStyles);

const StyledText = styled(Text)({
	...yourStyles
});

from graphql-css.

@braposo I'd love to talk to you more about this concept you've put together.

One of the things I think would be really powerful here is to create an adapter for the initializer. e.g.

import GraphQLCSS from 'graphql-css';
import { css } from 'emotion';

const CSSQuery = new GraphQLCSS({ css });

const MyComp = (props) => (
  <CSSQuery query={...} variables={...}>
    {className => <div className={className} {...props} />}
  </CSSQuery>
);

I think something like this would be super powerful. Because of a few things.

1. It removes the need for an extra adapter into the react eco system (emotion, styled-components, etc).
2. the query generates the className.
3. you can use pure react components and the API stays the same for other Query components.

what do you think about something like this?

from graphql-css.

@lifeiscontent with the new v2 API you can now use getStyles to make it work with emotion.

import useGqlCSS, { gql } from "graphql-css";
import styled from "@emotion/styled";
...
const query = gql`
    {
        color: colors {
            green
        }
    }
`;
const { getStyles } = useGqlCSS(styles);
const StyledComponent = styled.div(getStyles(query));

from graphql-css.