@ptb/gatsby-plugin-styletron
A Gatsby plugin for styletron with built-in server-side rendering support
Last updated 2 years ago by ptb .
Apache-2.0 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @ptb/gatsby-plugin-styletron 
SYNC missed versions from official npm registry.

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

Current Tags

  • 2018.4.29-1                                ...           latest (2 years ago)

153 Versions

  • 2018.4.29-1                                ...           2 years ago
  • 2018.4.29-0                                ...           2 years ago
  • 2018.4.28-5                                ...           2 years ago
  • 2018.4.28-4                                ...           2 years ago
  • 2018.4.28-3                                ...           2 years ago
  • 2018.4.28-2                                ...           2 years ago
  • 2018.4.28-1                                ...           2 years ago
  • 2018.4.28-0                                ...           2 years ago
  • 2018.4.27-0                                ...           2 years ago
  • 2018.4.26-13                                ...           2 years ago
  • 2018.4.26-12                                ...           2 years ago
  • 2018.4.26-11                                ...           2 years ago
  • 2018.4.26-10                                ...           2 years ago
  • 2018.4.26-9                                ...           2 years ago
  • 2018.4.26-8                                ...           2 years ago
  • 2018.4.26-7                                ...           2 years ago
  • 2018.4.26-6                                ...           2 years ago
  • 2018.4.26-5                                ...           2 years ago
  • 2018.4.26-4                                ...           2 years ago
  • 2018.4.26-3                                ...           2 years ago
  • 2018.4.26-2                                ...           2 years ago
  • 2018.4.26-1                                ...           2 years ago
  • 2018.4.26-0                                ...           2 years ago
  • 2018.4.25-0                                ...           2 years ago
  • 2018.4.24-2                                ...           2 years ago
  • 2018.4.24-1                                ...           2 years ago
  • 2018.4.24-0                                ...           2 years ago
  • 2018.4.23-5                                ...           2 years ago
  • 2018.4.19-0                                ...           2 years ago
  • 2018.4.18-3                                ...           2 years ago
  • 2018.4.18-2                                ...           2 years ago
  • 2018.4.18-1                                ...           2 years ago
  • 2018.4.18-0                                ...           2 years ago
  • 2018.4.17-0                                ...           2 years ago
  • 2018.4.13-2                                ...           2 years ago
  • 2018.4.13-1                                ...           2 years ago
  • 2018.4.13-0                                ...           2 years ago
  • 2018.4.12-1                                ...           2 years ago
  • 2018.4.12-0                                ...           2 years ago
  • 2018.4.9-0                                ...           2 years ago
  • 2018.4.8-2                                ...           2 years ago
  • 2018.4.8-1                                ...           2 years ago
  • 2018.4.8-0                                ...           2 years ago
  • 2018.4.7-2                                ...           2 years ago
  • 2018.4.7-1                                ...           2 years ago
  • 2018.4.7-0                                ...           2 years ago
  • 2018.4.6-8                                ...           2 years ago
  • 2018.4.6-7                                ...           2 years ago
  • 2018.4.6-6                                ...           2 years ago
  • 2018.4.6-5                                ...           2 years ago
  • 2018.4.6-4                                ...           2 years ago
  • 2018.4.6-3                                ...           2 years ago
  • 2018.4.6-2                                ...           2 years ago
  • 2018.4.6-1                                ...           2 years ago
  • 2018.4.5-3                                ...           2 years ago
  • 2018.4.5-0                                ...           2 years ago
  • 2018.4.4-19                                ...           2 years ago
  • 2018.4.4-18                                ...           2 years ago
  • 2018.4.4-17                                ...           2 years ago
  • 2018.4.4-16                                ...           2 years ago
  • 2018.4.4-15                                ...           2 years ago
  • 2018.4.4-14                                ...           2 years ago
  • 2018.4.4-13                                ...           2 years ago
  • 2018.4.4-12                                ...           2 years ago
  • 2018.4.4-11                                ...           2 years ago
  • 2018.4.4-10                                ...           2 years ago
  • 2018.4.4-9                                ...           2 years ago
  • 2018.4.4-8                                ...           2 years ago
  • 2018.4.4-7                                ...           2 years ago
  • 2018.4.4-6                                ...           2 years ago
  • 2018.4.4-5                                ...           2 years ago
  • 2018.4.4-4                                ...           2 years ago
  • 2018.4.4-3                                ...           2 years ago
  • 2018.4.4-2                                ...           2 years ago
  • 2018.4.4-1                                ...           2 years ago
  • 2018.4.4-0                                ...           2 years ago
  • 2018.4.3-7                                ...           2 years ago
  • 2018.4.3-6                                ...           2 years ago
  • 2018.4.3-5                                ...           2 years ago
  • 2018.4.3-4                                ...           2 years ago
  • 2018.4.3-3                                ...           2 years ago
  • 2018.4.3-2                                ...           2 years ago
  • 2018.4.3-1                                ...           2 years ago
  • 2018.4.3-0                                ...           2 years ago
  • 2018.3.29-3                                ...           2 years ago
  • 2018.3.29-2                                ...           2 years ago
  • 2018.3.29-1                                ...           2 years ago
  • 2018.3.29-0                                ...           2 years ago
  • 2018.3.28-5                                ...           2 years ago
  • 2018.3.28-4                                ...           2 years ago
  • 2018.3.28-3                                ...           2 years ago
  • 2018.3.28-2                                ...           2 years ago
  • 2018.3.28-1                                ...           2 years ago
  • 2018.3.28-0                                ...           2 years ago
  • 2018.3.27-19                                ...           2 years ago
  • 2018.3.27-18                                ...           2 years ago
  • 2018.3.27-17                                ...           2 years ago
  • 2018.3.27-16                                ...           2 years ago
  • 2018.3.27-15                                ...           2 years ago
  • 2018.3.27-14                                ...           2 years ago
  • 2018.3.27-13                                ...           2 years ago
  • 2018.3.27-12                                ...           2 years ago
  • 2018.3.27-11                                ...           2 years ago
  • 2018.3.27-10                                ...           2 years ago
  • 2018.3.27-9                                ...           2 years ago
  • 2018.3.27-8                                ...           2 years ago
  • 2018.3.27-7                                ...           2 years ago
  • 2018.3.27-6                                ...           2 years ago
  • 2018.3.27-5                                ...           2 years ago
  • 2018.3.27-4                                ...           2 years ago
  • 2018.3.27-3                                ...           2 years ago
  • 2018.3.27-2                                ...           2 years ago
  • 2018.3.27-1                                ...           2 years ago
  • 2018.3.27-0                                ...           2 years ago
  • 2018.3.26-31                                ...           2 years ago
  • 2018.3.26-30                                ...           2 years ago
  • 2018.3.26-27                                ...           2 years ago
  • 2018.3.26-26                                ...           2 years ago
  • 2018.3.26-25                                ...           2 years ago
  • 2018.3.26-24                                ...           2 years ago
  • 2018.3.26-23                                ...           2 years ago
  • 2018.3.26-22                                ...           2 years ago
  • 2018.3.26-21                                ...           2 years ago
  • 2018.3.26-20                                ...           2 years ago
  • 2018.3.26-19                                ...           2 years ago
  • 2018.3.26-18                                ...           2 years ago
  • 2018.3.26-17                                ...           2 years ago
  • 2018.3.26-16                                ...           2 years ago
  • 2018.3.26-15                                ...           2 years ago
  • 2018.3.26-14                                ...           2 years ago
  • 2018.3.26-11                                ...           2 years ago
  • 2018.3.26-10                                ...           2 years ago
  • 2018.3.26-9                                ...           2 years ago
  • 2018.3.26-8                                ...           2 years ago
  • 2018.3.26-7                                ...           2 years ago
  • 2018.3.26-6                                ...           2 years ago
  • 2018.3.26-5                                ...           2 years ago
  • 2018.3.26-4                                ...           2 years ago
  • 2018.3.26-3                                ...           2 years ago
  • 2018.3.26-2                                ...           2 years ago
  • 2018.3.26-1                                ...           2 years ago
  • 2018.3.26-0                                ...           2 years ago
  • 2018.3.25-32                                ...           2 years ago
  • 2018.3.25-31                                ...           2 years ago
  • 2018.3.25-30                                ...           2 years ago
  • 2018.3.25-29                                ...           2 years ago
  • 2018.3.25-28                                ...           2 years ago
  • 2018.3.25-27                                ...           2 years ago
  • 2.0.6                                ...           2 years ago
  • 2.0.5                                ...           2 years ago
  • 1.0.17                                ...           2 years ago
  • 1.0.16                                ...           2 years ago
  • 1.0.15                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dev Dependencies (0)
None

Copyright 2014 - 2016 © taobao.org |