Add stylus example (#1479)

* Add stylus example * Add CSS modules to example * Update readme
gatsbyjs · Jul 13, 2017 · 5e064c1 · 5e064c1
1 parent f04809d
commit 5e064c1
Show file tree

Hide file tree

Showing 8 changed files with 364 additions and 0 deletions.
diff --git a/examples/using-stylus/README.md b/examples/using-stylus/README.md
@@ -0,0 +1,11 @@
+# Using gatsby-plugin-stylus
+
+https://using-stylus.gatsbyjs.org
+
+Example site that demonstrates how to build Gatsby sites
+using the Gatsby plugin `gatsby-plugin-stylus`
+which sets up Webpack to run [Stylus][] code.
+
+The example includes both "plain" Stylus and usage of CSS modules.
+
+[Stylus]: https://github.com/stylus/stylus
diff --git a/examples/using-stylus/gatsby-config.js b/examples/using-stylus/gatsby-config.js
@@ -0,0 +1,32 @@
+module.exports = {
+  plugins: [
+    `gatsby-plugin-stylus`, // <--- This is the important part
+    `gatsby-plugin-offline`,
+    {
+      resolve: `gatsby-plugin-google-analytics`,
+      options: {
+        trackingId: `UA-93349937-2`,
+      },
+    },
+  ],
+}
+
+/**
+ * NOTE: You can use stylus plugins as well! Just import them as you normally
+ * would and pass them to the `use` option of the stylus plugin.
+ *
+ * --------------------------------------------------------------------------
+ *
+ * const rupture = require(`rupture`)
+ *
+ * module.exports = {
+ *   plugins: [
+ *     {
+ *       resolve: `gatsby-plugin-stylus`,
+ *       options: {
+ *         use: [rupture()],
+ *       },
+ *     },
+ *   ],
+ * }
+ */
diff --git a/examples/using-stylus/package.json b/examples/using-stylus/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "using-stylus",
+  "version": "1.0.0",
+  "description": "Example Gatsby website using the Gatsby plugin gatsby-plugin-stylus",
+  "main": "index.js",
+  "scripts": {
+    "develop": "gatsby develop",
+    "build": "gatsby build"
+  },
+  "author": "Ian Sinnott <ian@iansinnott.com>",
+  "license": "MIT",
+  "dependencies": {
+    "gatsby": "latest",
+    "gatsby-link": "latest",
+    "gatsby-plugin-google-analytics": "latest",
+    "gatsby-plugin-offline": "latest",
+    "gatsby-plugin-stylus": "latest",
+    "react-typography": "^0.15.10",
+    "typography": "^0.15.10"
+  }
+}
diff --git a/examples/using-stylus/src/html.js b/examples/using-stylus/src/html.js
@@ -0,0 +1,69 @@
+import React, { Component } from "react"
+import * as PropTypes from "prop-types"
+import Typography from "typography"
+import { TypographyStyle } from "react-typography"
+
+const typography = new Typography()
+
+let stylesStr
+if (process.env.NODE_ENV === `production`) {
+  try {
+    stylesStr = require(`!raw-loader!../public/styles.css`)
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+const propTypes = {
+  headComponents: PropTypes.node.isRequired,
+  body: PropTypes.node.isRequired,
+  postBodyComponents: PropTypes.node.isRequired,
+}
+
+class Html extends Component {
+  render() {
+    let css
+    if (process.env.NODE_ENV === `production`) {
+      css = (
+        <style
+          id="gatsby-inlined-css"
+          dangerouslySetInnerHTML={{ __html: stylesStr }}
+        />
+      )
+    }
+
+    return (
+      <html op="news" lang="en">
+        <head>
+          {this.props.headComponents}
+
+          <meta name="referrer" content="origin" />
+          <meta charSet="utf-8" />
+          <meta
+            name="description"
+            content="Gatsby example site demoing stylus plugin"
+          />
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+          />
+          <title>Using gatsby-plugin-stylus</title>
+          <TypographyStyle typography={typography} />
+          {css}
+        </head>
+        <body>
+          <div
+            id="___gatsby"
+            dangerouslySetInnerHTML={{ __html: this.props.body }}
+          />
+          {this.props.postBodyComponents}
+        </body>
+      </html>
+    )
+  }
+}
+
+Html.propTypes = propTypes
+
+module.exports = Html
diff --git a/examples/using-stylus/src/pages/css-modules.js b/examples/using-stylus/src/pages/css-modules.js
@@ -0,0 +1,45 @@
+import React from "react"
+import Link from 'gatsby-link'
+import s from "./css-modules.module.styl"
+
+class CssModules extends React.Component {
+  render() {
+    return (
+      <div>
+        <header className={s.header}>
+          <h1 className={s["the-stylus-class"]}>Hi stylish friends</h1>
+          <p>
+            All the styles for this page are written using <a href="https://github.com/stylus/stylus">Stylus</a>
+          </p>
+          <p>Open the inspector and inspect the class names of these elements.</p>
+          <Link to="/" className={s.cta}>View the plain example</Link>
+        </header>
+        <section className={s.main}>
+          <div className={s["stylus-nav-example"]}>
+            <h2>Nav example</h2>
+            <ul>
+              <li>
+                <a href="#">Store</a>
+              </li>
+              <li>
+                <a href="#">Help</a>
+              </li>
+              <li>
+                <a href="#">Logout</a>
+              </li>
+            </ul>
+          </div>
+
+          {/* This is intentionally global. See the stylus file */}
+          <div className="grid">
+            <div>1</div>
+            <div>2</div>
+            <div>2</div>
+          </div>
+        </section>
+      </div>
+    )
+  }
+}
+
+export default CssModules
diff --git a/examples/using-stylus/src/pages/css-modules.module.styl b/examples/using-stylus/src/pages/css-modules.module.styl
@@ -0,0 +1,73 @@
+// Variables don't need a dollar sign but it makes them easy to identify later
+// in code
+$color = pink
+
+borderRadius($radius = 5px)
+  -webkit-border-radius $radius
+  -moz-border-radius $radius
+  border-radius $radius
+
+.header
+  padding 20px
+  background thistle
+
+  h1
+    text-decoration none
+
+  .cta
+    display inline-block
+    color white
+    text-transform uppercase
+    text-decoration none
+    font-family sans-serif
+    padding 20px
+    background darken(thistle, 20%)
+
+  a
+    font-weight bold
+
+section
+  padding 20px
+
+.stylus-nav-example
+  ul
+    margin 0
+    padding 0
+    list-style none
+
+
+  li
+    display inline-block
+
+
+  a
+    borderRadius(3px)
+
+    background $color
+    display block
+    margin-right 6px
+    padding 3px 9px
+    text-decoration none
+
+
+.the-stylus-class
+  text-decoration underline
+
+
+:global(.grid) div
+  border 1px solid black
+  padding 0.5rem
+  margin-bottom 1rem
+  background #fafafa
+  border 1px solid #ddd
+  background orange
+
+
+@media (min-width: 400px)
+  :global(.grid) div
+    background transparentify(blue, 0.4)
+
+@media (min-width: 900px)
+  :global(.grid) div
+    background transparentify(pink, 0.1)
+
diff --git a/examples/using-stylus/src/pages/index.js b/examples/using-stylus/src/pages/index.js
@@ -0,0 +1,42 @@
+import React from "react"
+import Link from 'gatsby-link'
+import "./index.styl"
+
+class CssModules extends React.Component {
+  render() {
+    return (
+      <div>
+        <header className="header">
+          <h1 className="the-stylus-class">Hi stylish friends</h1>
+          <p>
+            All the styles for this page are written using <a href="https://github.com/stylus/stylus">Stylus</a>.
+          </p>
+          <Link to="/css-modules/" className="cta">View the CSS Modules example</Link>
+        </header>
+        <section className="main">
+          <div className="stylus-nav-example">
+            <h2>Nav example</h2>
+            <ul>
+              <li>
+                <a href="#">Store</a>
+              </li>
+              <li>
+                <a href="#">Help</a>
+              </li>
+              <li>
+                <a href="#">Logout</a>
+              </li>
+            </ul>
+          </div>
+          <div className="grid">
+            <div>1</div>
+            <div>2</div>
+            <div>2</div>
+          </div>
+        </section>
+      </div>
+    )
+  }
+}
+
+export default CssModules
diff --git a/examples/using-stylus/src/pages/index.styl b/examples/using-stylus/src/pages/index.styl
@@ -0,0 +1,71 @@
+// Variables don't need a dollar sign but it makes them easy to identify later
+// in code
+$color = pink
+
+borderRadius($radius = 5px)
+  -webkit-border-radius $radius
+  -moz-border-radius $radius
+  border-radius $radius
+
+.header
+  padding 20px
+  background thistle
+  h1
+    text-decoration none
+  .cta
+    display inline-block
+    color white
+    text-transform uppercase
+    text-decoration none
+    font-family sans-serif
+    padding 20px
+    background darken(thistle, 20%)
+
+  a
+    font-weight bold
+
+section
+  padding 20px
+
+.stylus-nav-example
+  ul
+    margin 0
+    padding 0
+    list-style none
+
+
+  li
+    display inline-block
+
+
+  a
+    borderRadius(3px)
+
+    background $color
+    display block
+    margin-right 6px
+    padding 3px 9px
+    text-decoration none
+
+
+
+.the-stylus-class
+  text-decoration underline
+
+
+.grid div
+  border 1px solid black
+  padding 0.5rem
+  margin-bottom 1rem
+  background #fafafa
+  border 1px solid #ddd
+
+
+@media (min-width: 400px)
+  .grid div
+    background transparentify(blue, 0.4)
+
+@media (min-width: 900px)
+  .grid div
+    background transparentify(pink, 0.1)
+