2018.4.29-1 • Published 7 years ago

@ptb/gatsby-plugin-styletron v2018.4.29-1

Weekly downloads
3
License
Apache-2.0
Repository
github
Last release
7 years ago

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

7 years ago

2018.4.29-0

7 years ago

2018.4.28-5

7 years ago

2018.4.28-4

7 years ago

2018.4.28-3

7 years ago

2018.4.28-2

7 years ago

2018.4.28-1

7 years ago

2018.4.28-0

7 years ago

2018.4.27-0

7 years ago

2018.4.26-13

7 years ago

2018.4.26-12

7 years ago

2018.4.26-11

7 years ago

2018.4.26-10

7 years ago

2018.4.26-9

7 years ago

2018.4.26-8

7 years ago

2018.4.26-7

7 years ago

2018.4.26-6

7 years ago

2018.4.26-5

7 years ago

2018.4.26-4

7 years ago

2018.4.26-3

7 years ago

2018.4.26-2

7 years ago

2018.4.26-1

7 years ago

2018.4.26-0

7 years ago

2018.4.25-0

7 years ago

2018.4.24-2

7 years ago

2018.4.24-1

7 years ago

2018.4.24-0

7 years ago

2018.4.23-5

7 years ago

2018.4.19-0

7 years ago

2018.4.18-3

7 years ago

2018.4.18-2

7 years ago

2018.4.18-1

7 years ago

2018.4.18-0

7 years ago

2018.4.17-0

7 years ago

2018.4.13-2

7 years ago

2018.4.13-1

7 years ago

2018.4.13-0

7 years ago

2018.4.12-1

7 years ago

2018.4.12-0

7 years ago

2018.4.9-0

7 years ago

2018.4.8-2

8 years ago

2018.4.8-1

8 years ago

2018.4.8-0

8 years ago

2018.4.7-2

8 years ago

2018.4.7-1

8 years ago

2018.4.7-0

8 years ago

2018.4.6-8

8 years ago

2018.4.6-7

8 years ago

2018.4.6-6

8 years ago

2018.4.6-5

8 years ago

2018.4.6-4

8 years ago

2018.4.6-3

8 years ago

2018.4.6-2

8 years ago

2018.4.6-1

8 years ago

2018.4.5-3

8 years ago

2018.4.5-0

8 years ago

2018.4.4-19

8 years ago

2018.4.4-18

8 years ago

2018.4.4-17

8 years ago

2018.4.4-16

8 years ago

2018.4.4-15

8 years ago

2018.4.4-14

8 years ago

2018.4.4-13

8 years ago

2018.4.4-12

8 years ago

2018.4.4-11

8 years ago

2018.4.4-10

8 years ago

2018.4.4-9

8 years ago

2018.4.4-8

8 years ago

2018.4.4-7

8 years ago

2018.4.4-6

8 years ago

2018.4.4-5

8 years ago

2018.4.4-4

8 years ago

2018.4.4-3

8 years ago

2018.4.4-2

8 years ago

2018.4.4-1

8 years ago

2018.4.4-0

8 years ago

2018.4.3-7

8 years ago

2018.4.3-6

8 years ago

2018.4.3-5

8 years ago

2018.4.3-4

8 years ago

2018.4.3-3

8 years ago

2018.4.3-2

8 years ago

2018.4.3-1

8 years ago

2018.4.3-0

8 years ago

2018.3.29-3

8 years ago

2018.3.29-2

8 years ago

2018.3.29-1

8 years ago

2018.3.29-0

8 years ago

2018.3.28-5

8 years ago

2018.3.28-4

8 years ago

2018.3.28-3

8 years ago

2018.3.28-2

8 years ago

2018.3.28-1

8 years ago

2018.3.28-0

8 years ago

2018.3.27-19

8 years ago

2018.3.27-18

8 years ago

2018.3.27-17

8 years ago

2018.3.27-16

8 years ago

2018.3.27-15

8 years ago

2018.3.27-14

8 years ago

2018.3.27-13

8 years ago

2018.3.27-12

8 years ago

2018.3.27-11

8 years ago

2018.3.27-10

8 years ago

2018.3.27-9

8 years ago

2018.3.27-8

8 years ago

2018.3.27-7

8 years ago

2018.3.27-6

8 years ago

2018.3.27-5

8 years ago

2018.3.27-4

8 years ago

2018.3.27-3

8 years ago

2018.3.27-2

8 years ago

2018.3.27-1

8 years ago

2018.3.27-0

8 years ago

2018.3.26-31

8 years ago

2018.3.26-30

8 years ago

2018.3.26-27

8 years ago

2018.3.26-26

8 years ago

2018.3.26-25

8 years ago

2018.3.26-24

8 years ago

2018.3.26-23

8 years ago

2018.3.26-22

8 years ago

2018.3.26-21

8 years ago

2018.3.26-20

8 years ago

2018.3.26-19

8 years ago

2018.3.26-18

8 years ago

2018.3.26-17

8 years ago

2018.3.26-16

8 years ago

2018.3.26-15

8 years ago

2018.3.26-14

8 years ago

2018.3.26-11

8 years ago

2018.3.26-10

8 years ago

2018.3.26-9

8 years ago

2018.3.26-8

8 years ago

2018.3.26-7

8 years ago

2018.3.26-6

8 years ago

2018.3.26-5

8 years ago

2018.3.26-4

8 years ago

2018.3.26-3

8 years ago

2018.3.26-2

8 years ago

2018.3.26-1

8 years ago

2018.3.26-0

8 years ago

2018.3.25-32

8 years ago

2018.3.25-31

8 years ago

2018.3.25-30

8 years ago

2018.3.25-29

8 years ago

2018.3.25-28

8 years ago

2018.3.25-27

8 years ago

2.0.6

8 years ago

2.0.5

8 years ago

1.0.17

8 years ago

1.0.16

8 years ago

1.0.15

8 years ago