• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

braposo/graphql-css: A blazing fast CSS-in-GQL™ library.

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称（OpenSource Name）：

braposo/graphql-css

开源软件地址(OpenSource Url)：

https://github.com/braposo/graphql-css

开源编程语言(OpenSource Language)：

JavaScript 99.1%

开源软件介绍(OpenSource Introduction)：

graphql-css is a blazing fast CSS-in-GQL™ library that converts GraphQL queries into styles for your components.

Comes with a bunch of utilities so it's easy to integrate with your favourite way of building components.

Build Status Code Coverage npm version npm downloads gzip size MIT License

Module format Prettier format PRs Welcome Blazing Fast Modern Enterprise Grade

Installation

npm install graphql-css
# or
yarn add graphql-css

Dependencies

graphql-css requires graphql to be installed as a peer dependency. It's compatible with React hooks so you can use it with React's latest version.

Quick start

import useGqlCSS from "graphql-css";
import styles from "your-style-guide";

const App = () => {
    const { styled } = useGqlCSS(styles);
    const H2 = styled.h2`
        {
            typography {
                h2
            }
            marginLeft: spacing {
                xl
            }
            color: colors {
                green
            }
        }
    `;
    return <H2>This is a styled text</H2>;
};

Edit graphql-css

API

By default, graphql-css exports a hook-like function called useGqlCSS.

It also exports a couple of other utilities:

  • GqlCSS: a component that provides the same declarative API
  • gql: the default export from graphql-tag so you don't have to install it if only using graphql-css

useGqlCSS

The main export is the useGqlCSS function that should be used in most cases. It provides these utilities:

  • styled: a styled-component inspired function to create components from gqlCSS queries
  • getStyles: a function to extract styles to an object
  • GqlCSS: a component that encapsulates the styled functionality

useGqlCSS needs to be initialised with the styles from the styleguide in a JSON format (check examples folder for a detailed example).

Here's how you can use it to create a new component with styled:

import useGqlCSS from "graphql-css";
...
const { styled } = useGqlCSS(styles);
const Text = styled.p`
    {
        typography {
            fontSize: scale {
                l
            }
        }
    }
`;
...
<Text>This is a styled text</Text>

alternatively, you can also return the styles as an object with getStyles so you can use it with other CSS-in-JS libraries:

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));

If you want to keep the declarative API you can also use the GqlCSS, which is an exact match to the main GqlCSS component exported by this library. The only difference is that the useGqlCSS version already has the styles initialised.

import useGqlCSS, { gql } from "graphql-css";
...
const { GqlCSS } = useGqlCSS(styles);
const query = gql`
    {
        typography {
            h2
        }
    }
`;
...
<GqlCSS query={query} component="h2">This is a styled text</GqlCSS>

Please check the GqlCSS section below for a detailed reference.

GqlCSS

<GqlCSS> component allows for a more declarative API and accepts these props:

Prop Type Default Definition
styles object The styleguide object with all the rules
query gql The gql query to get the styles
component string || node "div" HTML element or React component to be displayed

All the remaining props are passed to the generated component. Here are some examples:

...
<GqlCSS styles={styles} query={query}>This is a styled text</GqlCSS>
<GqlCSS styles={styles} query={queryH1} component="h1">This is a styled H1 heading</GqlCSS>
...

Styles object

The styles object is a valid JSON object that is used to define the styleguide of your project. Usually it includes definitions for colors, spacing, typography, etc.

const base = 4;
const styles = {
    typography: {
        scale: {
            s: base * 3,
            base: base * 4,
            m: base * 6,
            l: base * 9,
            xl: base * 13,
            xxl: base * 20,
            unit: "px",
        },
        weight: {
            thin: 300,
            normal: 400,
            bold: 700,
            bolder: 900,
        },
    },
    spacing: {
        s: base,
        base: base * 2,
        m: base * 4,
        l: base * 6,
        xl: base * 8,
        xxl: base * 10,
        unit: "px",
    },
    colors: {
        blue: "blue",
        green: "green",
        red: "red",
    },
};

This is completely up to you and one of the big advantages of using graphql-css as you can adapt it to your needs. As long as the styles and the queries match their structure, there shouldn't be much problem.

You can also specify the unit of each property by definining the unit key.

scale: {
    s: base * 3,
    base: base * 4,
    m: base * 6,
    l: base * 9,
    xl: base * 13,
    xxl: base * 20,
    unit: "em"
},

Building the GraphQL query

The GraphQL query follows the structure of the styles object with a few particular details. When building the query you need to alias the values you're getting from the style guide to the correspondent CSS property. Here's a quick example:

{
    typography {
        fontSize: scale {
            xl
        }
        fontWeight: weight {
            bold
        }
    }
}

This also means that you can reuse the same query by using different alias:

{
    marginLeft: spacing {
        l
    }
    paddingTop: spacing {
        xl
    }
}

Using fragments

Because This is just GraphQL™, you can also create fragments that can then be included in other queries:

const h1Styles = gql`
    fragment H1 on Styles {
        base {
            typography {
                fontSize: scale {
                    xl
                }
                fontWeight: weight {
                    bold
                }
            }
        }
    }
`;

const otherH1Styles = gql`
    ${h1Styles}
    {
        ...H1
        base {
            color: colors {
                blue
            }
        }
    }
`;

This is a powerful pattern that avoids lots of repetitions and allows for a bigger separation of concerns.

Defining custom unit

You can also override the pre-defined unit directly in your query by using the argument unit:

{
    marginLeft: spacing(unit: "em") {
        l
    }
    paddingTop: spacing {
        xl
    }
}

This will return { marginLeft: "24em", paddingTop: "32px" }.

Using style variations (theming)

One of the big advantages of CSS-in-GQL™ is that you can use the power of variables to build custom queries. In graphql-css that means that we can easily define variants (think themes) for specific components.

Let's start with this style definition file:

const styles = {
    theme: {
        light: {
            button: {
                // button light styles
            },
        },
        dark: {
            button: {
                // button dark styles
            },
        },
    },
};

We now have two options to handle theming, first using the styled function from useGqlCSS:

import useGqlCSS, { gql } from "graphql-css";
...
const { styled } = useGqlCSS(styles);
const Button = styled.button`
    {
        theme(variant: ${props => props.variant}) {
            button
        }
    }
`;
...
<Button variant="dark">Some text</Button>

Alternatively, we can use GraphQL variables instead by using getStyles:

import useGqlCSS, { gql } from "graphql-css";
import styled from "@emotion/styled";
...
const { getStyles } = useGqlCSS(styles);
const query = gql`
    {
        theme(variant: $variant) {
            button
        }
    }
`;
const LightButton = styled.button(getStyles(query, { variant: "light" }));
...
<LightButton>Some text</LightButton>

Developing

You can use yarn run dev to run it locally, but we recommend using the CodeSandbox playground for development.

Contributing

Please follow our contributing guidelines.

License

MIT

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
api-platform/core: The server component of API Platform: hypermedia and GraphQL ...发布时间：2022-06-22
下一篇：
jahewson/elm-graphql: GraphQL for Elm发布时间：2022-06-22
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap