(https://github.com/davidgomes)"
47 | ],
48 | "license": "MIT",
49 | "dependencies": {
50 | "cxs": "6.2.0",
51 | "graphql-anywhere": "^4.1.24",
52 | "graphql-tag": "2.10.0"
53 | },
54 | "devDependencies": {
55 | "@babel/cli": "^7.2.3",
56 | "@babel/core": "^7.2.2",
57 | "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
58 | "@babel/plugin-transform-modules-commonjs": "^7.2.0",
59 | "@babel/preset-env": "^7.2.3",
60 | "@babel/preset-react": "^7.0.0",
61 | "babel-core": "^7.0.0-bridge.0",
62 | "babel-eslint": "^10.0.1",
63 | "babel-jest": "^23.6.0",
64 | "babel-loader": "^8.0.4",
65 | "codecov": "^3.1.0",
66 | "cross-env": "^5.2.0",
67 | "eslint": "^5.11.1",
68 | "eslint-config-prettier": "^3.3.0",
69 | "eslint-plugin-import": "^2.14.0",
70 | "eslint-plugin-prettier": "^3.0.1",
71 | "eslint-plugin-react": "^7.12.0",
72 | "graphql": "^14.0.2",
73 | "husky": "^1.3.1",
74 | "jest": "^23.6.0",
75 | "lint-staged": "^8.1.0",
76 | "prettier": "^1.15.3",
77 | "prop-types": "^15.6.2",
78 | "react": "16.7.0-alpha.2",
79 | "react-dom": "16.7.0-alpha.2",
80 | "react-testing-library": "^5.4.2",
81 | "rimraf": "^2.6.2",
82 | "webpack": "^4.28.2",
83 | "webpack-cli": "^3.1.2"
84 | },
85 | "peerDependencies": {
86 | "graphql": "^14.0.2",
87 | "react": "^16.2.0",
88 | "react-dom": "^16.2.0"
89 | },
90 | "lint-staged": {
91 | "*.{js,md,ts,json}": [
92 | "prettier --write",
93 | "git add"
94 | ]
95 | }
96 | }
97 |
--------------------------------------------------------------------------------
/scripts/ci.sh:
--------------------------------------------------------------------------------
1 | set -e
2 |
3 | echo "Building project"
4 | yarn build
5 | echo "\n\n"
6 |
7 | echo "Linting"
8 | yarn lint
9 | echo "\n\n"
10 |
11 | echo "Running tests"
12 | yarn test --coverage && codecov
13 | echo "\n\n"
--------------------------------------------------------------------------------
/src/__snapshots__/index.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`GqlCSS it renders component with styles 1`] = `
4 |
5 |
8 | Using component with styles
9 |
10 |
15 |
18 | Using component without styles
19 |
20 |
25 |
29 | Using stateful component
30 |
31 |
36 |
40 | Using stateful component
41 |
42 |
47 |
50 | Some heading
51 |
52 |
57 |
60 | Some heading
61 |
62 |
67 |
70 | Some heading
71 |
72 |
73 | `;
74 |
75 | exports[`useGqlCSS with styled it returns a styled component 1`] = `
76 |
77 |
80 | Some heading
81 |
82 |
83 | `;
84 |
85 | exports[`useGqlCSS with styled it supports variables and stateful components 1`] = `
86 |
87 |
90 | Other component sharing state
91 |
92 |
97 |
100 | Other component sharing state
101 |
102 |
Some heading
);
22 | expect(container).toMatchSnapshot();
23 | });
24 |
25 | it("it supports variables and stateful components", () => {
26 | function StatefulComponent() {
27 | const [variant, setVariant] = useState("normal");
28 | const { styled } = useGqlCSS(styles);
29 | const toggleVariant = () =>
30 | setVariant(state => (state === "normal" ? "done" : "normal"));
31 | const Button = styled`{
32 | theme(variant: ${props => props.variant}) {
33 | button
34 | }
35 | base {
36 | marginLeft: spacing {
37 | m
38 | }
39 | }
40 | }`;
41 | Button.propTypes = {
42 | variant: PropTypes.string.isRequired,
43 | };
44 |
45 | return (
46 |
49 | );
50 | }
51 |
52 | const { container } = render();
53 |
54 | expect(container).toMatchSnapshot();
55 |
56 | fireEvent.click(container.firstChild);
57 |
58 | expect(container).toMatchSnapshot();
59 | });
60 |
61 | it("it fails if props don't exist", () => {
62 | const { styled } = useGqlCSS(styles);
63 | const H2 = styled`{
64 | theme(variant: ${props => props.variant}) {
65 | button
66 | }
67 | base {
68 | marginLeft: spacing {
69 | m
70 | }
71 | }
72 | }`;
73 | H2.propTypes = {
74 | variant: PropTypes.string,
75 | };
76 |
77 | const { container } = render(Some heading
);
78 | expect(global.console.error).toHaveBeenCalledWith(
79 | "Not a valid gql query. Did you forget a prop?"
80 | );
81 | expect(container).toMatchSnapshot();
82 | });
83 |
84 | it("it fails if interpolation is null", () => {
85 | const { styled } = useGqlCSS(styles);
86 | const H2 = styled`{
87 | theme(variant: ${null}) {
88 | button
89 | }
90 | base {
91 | marginLeft: spacing {
92 | m
93 | }
94 | }
95 | }`;
96 |
97 | const { container } = render(Some heading
);
98 | expect(global.console.error).toHaveBeenCalledWith(
99 | "Not a valid gql query. Did you forget a prop?"
100 | );
101 | expect(container).toMatchSnapshot();
102 | });
103 |
104 | it("it handles style interpolation", () => {
105 | const { styled } = useGqlCSS(styles);
106 | const color = "blue";
107 | const H3 = styled.h3`{
108 | base {
109 | marginLeft: spacing {
110 | m
111 | }
112 | }
113 |
114 | ${props =>
115 | props.primary &&
116 | `
117 | base {
118 | color: colors {
119 | ${color}
120 | }
121 | }
122 | `}
123 | }`;
124 | H3.propTypes = {
125 | primary: PropTypes.bool.isRequired,
126 | };
127 | H3.defaultProps = {
128 | primary: false,
129 | };
130 |
131 | const { container } = render(Some heading
);
132 | expect(container).toMatchSnapshot();
133 | });
134 | });
135 |
136 | describe("with getStyles", () => {
137 | it("it allows the extraction of styles", () => {
138 | const { getStyles } = useGqlCSS(styles);
139 | const query = gql`
140 | {
141 | base {
142 | typography {
143 | fontSize: scale {
144 | l
145 | }
146 | fontWeight: weight {
147 | bold
148 | }
149 | }
150 | marginLeft: spacing {
151 | xl
152 | }
153 | color: colors {
154 | green
155 | }
156 | }
157 | }
158 | `;
159 | const extractedStyles = getStyles(query);
160 | expect(extractedStyles).toEqual({
161 | color: "green",
162 | fontSize: "36px",
163 | fontWeight: 700,
164 | marginLeft: "32px",
165 | });
166 | });
167 |
168 | it("it supports variables", () => {
169 | const { getStyles } = useGqlCSS(styles);
170 | const query = gql`
171 | {
172 | theme(variant: $variant) {
173 | button
174 | }
175 | }
176 | `;
177 | const extractedStyles = getStyles(query, { variant: "done" });
178 | expect(extractedStyles).toEqual({
179 | backgroundColor: "green",
180 | cursor: "pointer",
181 | fontSize: 36,
182 | padding: 24,
183 | });
184 | });
185 |
186 | it("it handles fragments", () => {
187 | const { getStyles } = useGqlCSS(styles);
188 | const headingStyles = gql`
189 | fragment Heading on Styles {
190 | base {
191 | typography {
192 | fontSize: scale {
193 | xl
194 | }
195 | fontWeight: weight {
196 | bold
197 | }
198 | }
199 | }
200 | }
201 | `;
202 | const query = gql`
203 | ${headingStyles}
204 | {
205 | ...Heading
206 | base {
207 | color: colors {
208 | blue
209 | }
210 | }
211 | }
212 | `;
213 | const extractedStyles = getStyles(query);
214 | expect(extractedStyles).toEqual({
215 | color: "blue",
216 | fontSize: "52px",
217 | fontWeight: 700,
218 | });
219 | });
220 |
221 | it("it handles custom units", () => {
222 | const { getStyles } = useGqlCSS(styles);
223 | const query = gql`
224 | {
225 | base {
226 | typography {
227 | fontSize: scale {
228 | l
229 | }
230 | fontWeight: weight {
231 | bold
232 | }
233 | }
234 | marginLeft: spacing(unit: "em") {
235 | s
236 | }
237 | color: colors {
238 | green
239 | }
240 | }
241 | }
242 | `;
243 | const extractedStyles = getStyles(query);
244 | expect(extractedStyles).toEqual({
245 | color: "green",
246 | fontSize: "36px",
247 | fontWeight: 700,
248 | marginLeft: "4em",
249 | });
250 | });
251 |
252 | it("it only supports gql queries", () => {
253 | const { getStyles } = useGqlCSS(styles);
254 | const query = "something else";
255 | expect(() => getStyles(query)).toThrowError("Query must be a valid gql query");
256 | });
257 | });
258 |
259 | describe("with GqlCSS", () => {
260 | it("it supports variables and stateful components", () => {
261 | function StatefulComponent() {
262 | const [variant, setVariant] = useState("normal");
263 | const { GqlCSS } = useGqlCSS(styles);
264 | const toggleVariant = () =>
265 | setVariant(state => (state === "normal" ? "done" : "normal"));
266 |
267 | return (
268 |
274 | Using stateful component
275 |
276 | );
277 | }
278 |
279 | const { container, queryByTestId } = render();
280 |
281 | expect(container).toMatchSnapshot();
282 |
283 | fireEvent.click(queryByTestId("stateful-component"));
284 |
285 | expect(container).toMatchSnapshot();
286 | });
287 | });
288 | });
289 |
290 | describe("GqlCSS", () => {
291 | it("it renders component without styles", () => {
292 | const { container } = render(
293 | Using component without styles
294 | );
295 |
296 | expect(container).toMatchSnapshot();
297 | });
298 |
299 | it("it renders component with styles", () => {
300 | const { container } = render(
301 |
302 | Using component with styles
303 |
304 | );
305 |
306 | expect(container).toMatchSnapshot();
307 | });
308 | });
309 |
--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
1 | function isFalsish(chunk) {
2 | return chunk === undefined || chunk === null || chunk === false || chunk === "";
3 | }
4 |
5 | export function isPlainObject(x) {
6 | return typeof x === "object" && x.constructor === Object;
7 | }
8 |
9 | export function isFunction(test) {
10 | return typeof test === "function";
11 | }
12 |
13 | export function buildQuery(chunk, props) {
14 | if (Array.isArray(chunk)) {
15 | const ruleSet = [];
16 |
17 | for (let i = 0, len = chunk.length, result; i < len; i += 1) {
18 | result = buildQuery(chunk[i], props);
19 |
20 | if (result === null) continue;
21 | else if (Array.isArray(result)) ruleSet.push(...result);
22 | else ruleSet.push(result);
23 | }
24 |
25 | return ruleSet;
26 | }
27 |
28 | if (isFalsish(chunk)) {
29 | return null;
30 | }
31 |
32 | if (isFunction(chunk)) {
33 | return chunk(props);
34 | }
35 |
36 | return chunk.toString();
37 | }
38 |
39 | export function isGqlQuery(query) {
40 | return typeof query === "object" && query.constructor === Object && query.kind === "Document";
41 | }
42 |
43 | export function interleave(strings, interpolations = []) {
44 | const result = [strings[0]];
45 |
46 | for (let i = 0, len = interpolations.length; i < len; i += 1) {
47 | result.push(interpolations[i], strings[i + 1]);
48 | }
49 |
50 | return result;
51 | }
52 |
53 | export function smoosh(object) {
54 | return Object.assign(
55 | {},
56 | ...(function _flatten(objectBit) {
57 | return [].concat(
58 | ...Object.keys(objectBit).map(key =>
59 | typeof objectBit[key] === "object"
60 | ? _flatten(objectBit[key])
61 | : { [key]: objectBit[key] }
62 | )
63 | );
64 | })(object)
65 | );
66 | }
67 |
68 | export const domElements = [
69 | "a",
70 | "abbr",
71 | "address",
72 | "area",
73 | "article",
74 | "aside",
75 | "audio",
76 | "b",
77 | "base",
78 | "bdi",
79 | "bdo",
80 | "big",
81 | "blockquote",
82 | "body",
83 | "br",
84 | "button",
85 | "canvas",
86 | "caption",
87 | "cite",
88 | "code",
89 | "col",
90 | "colgroup",
91 | "data",
92 | "datalist",
93 | "dd",
94 | "del",
95 | "details",
96 | "dfn",
97 | "dialog",
98 | "div",
99 | "dl",
100 | "dt",
101 | "em",
102 | "embed",
103 | "fieldset",
104 | "figcaption",
105 | "figure",
106 | "footer",
107 | "form",
108 | "h1",
109 | "h2",
110 | "h3",
111 | "h4",
112 | "h5",
113 | "h6",
114 | "head",
115 | "header",
116 | "hgroup",
117 | "hr",
118 | "html",
119 | "i",
120 | "iframe",
121 | "img",
122 | "input",
123 | "ins",
124 | "kbd",
125 | "keygen",
126 | "label",
127 | "legend",
128 | "li",
129 | "link",
130 | "main",
131 | "map",
132 | "mark",
133 | "marquee",
134 | "menu",
135 | "menuitem",
136 | "meta",
137 | "meter",
138 | "nav",
139 | "noscript",
140 | "object",
141 | "ol",
142 | "optgroup",
143 | "option",
144 | "output",
145 | "p",
146 | "param",
147 | "picture",
148 | "pre",
149 | "progress",
150 | "q",
151 | "rp",
152 | "rt",
153 | "ruby",
154 | "s",
155 | "samp",
156 | "script",
157 | "section",
158 | "select",
159 | "small",
160 | "source",
161 | "span",
162 | "strong",
163 | "style",
164 | "sub",
165 | "summary",
166 | "sup",
167 | "table",
168 | "tbody",
169 | "td",
170 | "textarea",
171 | "tfoot",
172 | "th",
173 | "thead",
174 | "time",
175 | "title",
176 | "tr",
177 | "track",
178 | "u",
179 | "ul",
180 | "var",
181 | "video",
182 | "wbr",
183 |
184 | // SVG
185 | "circle",
186 | "clipPath",
187 | "defs",
188 | "ellipse",
189 | "foreignObject",
190 | "g",
191 | "image",
192 | "line",
193 | "linearGradient",
194 | "mask",
195 | "path",
196 | "pattern",
197 | "polygon",
198 | "polyline",
199 | "radialGradient",
200 | "rect",
201 | "stop",
202 | "svg",
203 | "text",
204 | "tspan",
205 | ];
206 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | var webpack = require("webpack");
3 | var path = require("path");
4 | var env = process.env.NODE_ENV;
5 |
6 | var reactExternal = {
7 | root: "React",
8 | commonjs2: "react",
9 | commonjs: "react",
10 | amd: "React",
11 | };
12 |
13 | var reactDomExternal = {
14 | commonjs: "react-dom",
15 | commonjs2: "react-dom",
16 | amd: "ReactDOM",
17 | root: "ReactDOM",
18 | };
19 |
20 | var config = {
21 | externals: {
22 | react: reactExternal,
23 | "react-dom": reactDomExternal,
24 | },
25 | module: {
26 | rules: [
27 | {
28 | test: /\.jsx?$/,
29 | use: ["babel-loader"],
30 | exclude: /node_modules/,
31 | },
32 | ],
33 | },
34 | resolve: {
35 | modules: [path.join(__dirname, "./src/"), "node_modules"],
36 | extensions: [".js", ".jsx"],
37 | },
38 | output: {
39 | library: "GraphqlCSS",
40 | libraryTarget: "umd",
41 | },
42 | plugins: [
43 | new webpack.optimize.OccurrenceOrderPlugin(),
44 | new webpack.DefinePlugin({
45 | "process.env.NODE_ENV": JSON.stringify(env),
46 | }),
47 | ],
48 | };
49 |
50 | if (env === "production") {
51 | config.plugins.push(
52 | new webpack.LoaderOptionsPlugin({
53 | minimize: true,
54 | }),
55 | new webpack.optimize.ModuleConcatenationPlugin()
56 | );
57 | }
58 |
59 | module.exports = config;
60 |
--------------------------------------------------------------------------------
