Gatsby

Install the package:
npm install classy-ui@beta babel-preset-gatsby
Create a custom babel configuration, where Add classy-ui/plugin to your babel configuration:
.babelrc
{
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": [">0.25%", "not dead"]
        }
      }
    ]
  ],
  "plugins": ["classy-ui/plugin"]
}
Start using it:
import { compose, tokens } from 'classy-ui';
Gatbsy uses a .cache directory. If you were to change the tokens of Classy-UI with a custom configuration, make sure to delete this folder before start the development process again
Production
Gatsby will by default output to a public directory. The Classy-UI file can be outputted to the same directory:
.babelrc
{
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": [">0.25%", "not dead"]
        }
      }
    ]
  ],
  "plugins": [
    ["classy-ui/plugin", { "output": "public" }],
    'gatsby-plugin-react-helmet'
  ]
}
Follow the Gatsby guide for using react-helmet to populate the head of the html file. We insert a link tag when running production, which will load the classy-ui.css file in production:
src/pages/index.js
import { compose, tokens } from "classy-ui"
import React from "react"
import { Helmet } from "react-helmet"
​
export default () => (
  <div className={compose(tokens.color.RED_500)}>
    <Helmet>
      {process.env.NODE_ENV === "production" ? (
        <link rel="stylesheet" href="/classy-ui.css" />
      ) : null}
    </Helmet>
    <h1>Hello world!</h1>
  </div>
)
Hashing vs ETAG
Classy-UI does not currently support hashing. The reason being that the Babel plugin is not able to pass information about the name to the build tool. We are exploring this and any feedback is welcome. That means you should ensure that the classy-ui.css file is using ETag.
Last modified 3yr ago