gatsby-plugin-styletron

A Gatsby plugin for styletron with built-in server-side rendering support.

Install

npm install --dev gatsby-plugin-styletron

How to use

Edit gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-styletron",
      options: {
        // You can pass options to Styletron.
        prefix: "_",
      },
    },
  ],
}

This can be used as described by styletron-react such as:

import React from "react"
import { styled, withStyle } from "styletron-react"

const RedAnchor = styled("a", { color: "red" })
const FancyAnchor = withStyle(RedAnchor, { fontFamily: "cursive" })

export default () => <FancyAnchor>Hi!</FancyAnchor>

Or, using the css convenience function:

import React from "react"
import styletron from "gatsby-plugin-styletron"

const styles = {
  fontFamily: "cursive",
  color: "blue",
}

export default props => {
  const css = styletron().css
  return <div className={css({ backgroundColor: "#fcc", ...styles })}>Hi!</div>
}

Or, crazy flexible combinations:

import React from "react"
import { styled, withStyle } from "styletron-react"
import styletron from "gatsby-plugin-styletron"

const fancyStyles = {
  ":hover": {
    backgroundColor: "papayawhip",
  },
  "@media (max-width: 768px)": {
    ":hover": {
      animationDuration: "3s",
      animationFillMode: "forwards",
      animationName: {
        "0%": {
          transform: "translate3d(0,0,0)",
        },
        to: {
          transform: "translate3d(100%,0,0)",
        },
      },
      willChange: "transform",
    },
    fontFamily: {
      fontStyle: "normal",
      fontWeight: "normal",
      src:
        "url(https://fonts.gstatic.com/s/inconsolata/v16/QldKNThLqRwH-OJ1UHjlKGlW5qhExfHwNJU.woff2) format(woff2)",
    },
    fontSize: "24px",
  },
  fontSize: "36px",
}

const divStyles = {
  border: "1px dashed #333",
}

const RedAnchor = styled("a", { color: "red" })
const FancyAnchor = withStyle(RedAnchor, { fontFamily: "cursive" })

export default () => {
  const css = styletron().css

  return (
    <div
      className={css({ backgroundColor: "#cff", ...divStyles, ...fancyStyles })}
    >
      <FancyAnchor>Hi!</FancyAnchor>
      <div className={css(fancyStyles)}>Cool huh?</div>
    </div>
  )
}