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