{title}
210 |{description}
211 |10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `npm run build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /example-sites/create-react-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-react-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "5.11.0", 7 | "@testing-library/react": "10.4.3", 8 | "@testing-library/user-event": "12.0.11", 9 | "react": "16.13.1", 10 | "react-dom": "16.13.1", 11 | "react-scripts": "3.4.1", 12 | "flair": "0.0.0-af376dbc1" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /example-sites/create-react-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricokahler/flair/54701d2de653d08d42614649fd015693f81da188/example-sites/create-react-app/public/favicon.ico -------------------------------------------------------------------------------- /example-sites/create-react-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 |
20 | Edit src/App.js and save to reload.
21 |
3 |
4 | 
5 |
6 |
8 | Gatsby's default starter 9 |
10 | 11 | Kick off your project with this default boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React. 12 | 13 | _Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._ 14 | 15 | ## 🚀 Quick start 16 | 17 | 1. **Create a Gatsby site.** 18 | 19 | Use the Gatsby CLI to create a new site, specifying the default starter. 20 | 21 | ```shell 22 | # create a new Gatsby site using the default starter 23 | gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default 24 | ``` 25 | 26 | 1. **Start developing.** 27 | 28 | Navigate into your new site’s directory and start it up. 29 | 30 | ```shell 31 | cd my-default-starter/ 32 | gatsby develop 33 | ``` 34 | 35 | 1. **Open the source code and start editing!** 36 | 37 | Your site is now running at `http://localhost:8000`! 38 | 39 | _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._ 40 | 41 | Open the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! 42 | 43 | ## 🧐 What's inside? 44 | 45 | A quick look at the top-level files and directories you'll see in a Gatsby project. 46 | 47 | . 48 | ├── node_modules 49 | ├── src 50 | ├── .gitignore 51 | ├── .prettierrc 52 | ├── gatsby-browser.js 53 | ├── gatsby-config.js 54 | ├── gatsby-node.js 55 | ├── gatsby-ssr.js 56 | ├── LICENSE 57 | ├── package-lock.json 58 | ├── package.json 59 | └── README.md 60 | 61 | 1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed. 62 | 63 | 2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”. 64 | 65 | 3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for. 66 | 67 | 4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent. 68 | 69 | 5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser. 70 | 71 | 6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail). 72 | 73 | 7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. 74 | 75 | 8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering. 76 | 77 | 9. **`LICENSE`**: Gatsby is licensed under the MIT license. 78 | 79 | 10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).** 80 | 81 | 11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project. 82 | 83 | 12. **`README.md`**: A text file containing useful reference information about your project. 84 | 85 | ## 🎓 Learning Gatsby 86 | 87 | Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start: 88 | 89 | - **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process. 90 | 91 | - **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar. 92 | 93 | ## 💫 Deploy 94 | 95 | [](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-default) 96 | 97 | [](https://zeit.co/import/project?template=https://github.com/gatsbyjs/gatsby-starter-default) 98 | 99 | 100 | -------------------------------------------------------------------------------- /example-sites/gatsby/gatsby-browser.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { ThemeProvider, ColorContextProvider } from "flair" 3 | import theme from "./src/styles/theme" 4 | 5 | export const wrapRootElement = ({ element }) => ( 6 |
19 |
31 | 20 | 27 | {siteTitle} 28 | 29 |
30 |
36 | {children}
37 |
42 |
43 |
44 | )
45 | }
46 |
47 | Layout.propTypes = {
48 | children: PropTypes.node.isRequired,
49 | }
50 |
51 | export default Layout
52 |
--------------------------------------------------------------------------------
/example-sites/gatsby/src/components/seo.js:
--------------------------------------------------------------------------------
1 | /**
2 | * SEO component that queries for data with
3 | * Gatsby's useStaticQuery React hook
4 | *
5 | * See: https://www.gatsbyjs.org/docs/use-static-query/
6 | */
7 |
8 | import React from "react"
9 | import PropTypes from "prop-types"
10 | import { Helmet } from "react-helmet"
11 | import { useStaticQuery, graphql } from "gatsby"
12 |
13 | function SEO({ description, lang, meta, title }) {
14 | const { site } = useStaticQuery(
15 | graphql`
16 | query {
17 | site {
18 | siteMetadata {
19 | title
20 | description
21 | author
22 | }
23 | }
24 | }
25 | `
26 | )
27 |
28 | const metaDescription = description || site.siteMetadata.description
29 |
30 | return (
31 | NOT FOUND
10 |You just hit a route that doesn't exist... the sadness.
11 |Hi people
24 |Welcome to your new Gatsby site.
25 |Now go build something great.
26 |
27 | {/*
29 | Go to page 2
30 | Hi from the second page
11 |Welcome to page 2
12 | Go back to the homepage 13 |{title}
38 |{description}
39 |{title}
52 |{description}
53 |{title}
48 |{description}
49 |
50 | hello world
51 |
52 | `);
53 |
54 | expect(stylesHandler.mock.calls).toMatchInlineSnapshot(`
55 | Array [
56 | Array [
57 | Object {
58 | "cssVariableObject": Object {
59 | "--Example-0000-root-0": "red",
60 | },
61 | "root": "Example-0000-root",
62 | },
63 | ],
64 | ]
65 | `);
66 | });
67 |
68 | it.todo("doesn't have re-rendering issues");
69 | test.todo('Root component composition (styles, classNames, props, ref)');
70 |
71 | it('propagates the color context correctly', () => {
72 | const useStyles = createStyles(({ color }) => ({
73 | root: [color.readable],
74 | classNamePrefix: 'Example-0000',
75 | }));
76 |
77 | const stylesHandler = jest.fn();
78 |
79 | function Example(props) {
80 | const { Root, styles } = useStyles(props);
81 |
82 | useEffect(() => {
83 | stylesHandler(styles);
84 | }, [styles]);
85 |
86 | return
117 | stuff
118 |
119 | `);
120 | });
121 |
--------------------------------------------------------------------------------
/packages/ssr/src/createStyles.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef, useMemo } from 'react';
2 | import {
3 | ReactComponent,
4 | StyleProps,
5 | StyleFnArgs,
6 | GetComponentProps,
7 | UseStyles,
8 | useTheme,
9 | useColorContext,
10 | } from '@flair/core';
11 |
12 | function hashStyleObj(
13 | styleObj: { [key: string]: string | undefined } | null | undefined,
14 | ) {
15 | if (!styleObj) return '';
16 |
17 | return Object.keys(styleObj)
18 | .map((key) => `${key}_${styleObj[key]}`)
19 | .join('__|__');
20 | }
21 |
22 | function usePreserveReference<
23 | T extends { [key: string]: string | undefined } | null | undefined
24 | >(styleObj: T): T {
25 | return useMemo(
26 | () => styleObj,
27 | // eslint-disable-next-line react-hooks/exhaustive-deps
28 | [hashStyleObj(styleObj)],
29 | );
30 | }
31 |
32 | // preserve the object reference
33 | const empty = {};
34 |
35 | const identity = {title}
96 |
129 |
135 | `);
136 | });
137 |
138 | test("the root node doesn't remount when classnames changes", async () => {
139 | let resolve;
140 | const done = new Promise((thisResolve) => {
141 | resolve = thisResolve;
142 | });
143 |
144 | const useStyles = createStyles(() => ({
145 | root: 'style-root',
146 | title: 'style-title',
147 | }));
148 |
149 | const rerenderHandler = jest.fn();
150 | const rootClassHandler = jest.fn();
151 |
152 | function Component(props) {
153 | const { Root, styles } = useStyles(props);
154 |
155 | useEffect(() => {
156 | rerenderHandler();
157 | }, []);
158 |
159 | useEffect(() => {
160 | rootClassHandler(styles.root);
161 | }, [styles.root]);
162 |
163 | return 132 | test title 133 |
134 |4 | > **a lil preface 😅**:
5 | > **~** 6 | > 7 | > I think by the nature of styling itself, the way we style can be just as opinionated as the styles themselves. 8 | > 9 | > Please read this with an open mind and feel free to [open an issue](https://github.com/ricokahler/flair/issues) or [email me](mailto:ricokahler@me.com) with any feedback or corrections! 10 | 11 | Why another CSS-in-JS lib? 12 | 13 | Because there's no one lib that checks all the boxes for me. See below for an explanation. 14 | 15 | ### 1. Component-centric semantics for styles 16 | 17 | If you used Material UI or JSS, then you're familiar with using `withStyles` or `makeStyles`. e.g. 18 | 19 | ```js 20 | // Component.js in [material-ui] 21 | import React from 'react'; 22 | import { makeStyles } from '@material-ui/core'; 23 | 24 | const useStyles = makeStyles((theme) => ({ 25 | root: { 26 | /* styles go here */ 27 | }, 28 | title: { 29 | /* styles go here */ 30 | }, 31 | })); 32 | 33 | function Component(props) { 34 | const classes = useStyles(props); 35 | // classes.root… 36 | // classes.title… 37 | } 38 | 39 | export default Component; 40 | ``` 41 | 42 | This pattern is great because it creates styles on a component level and it's simple for a parent component to override child styles. For example, in Material UI, a parent component can override `title` styles like so: 43 | 44 | ```js 45 | // Parent.js in [material-ui] 46 | import React from 'react'; 47 | import { makeStyles } from '@material-ui/core'; 48 | import Component from './Component'; 49 | 50 | const useStyles = makeStyles(theme => ({ 51 | root: {/* ... */}, 52 | modifedTitle: {/* ... */}, 53 | }); 54 | 55 | function Parent(props) { 56 | const classes = useStyles(props); 57 | 58 | return ( 59 | <> 60 |