Add styled-jsx-plugin-sass example (vercel#3104)

timneutkens · arunoda · commit ae44109f6dd8 · 2017-10-16T12:08:24.000+05:30
* Upgrade dependency on next

* Add styled-jsx-plugin-sass example

* Update readme
diff --git a/examples/with-styled-jsx-plugins/package.json b/examples/with-styled-jsx-plugins/package.json
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "lost": "8.2.0",
-    "next": "4.0.4",
+    "next": "4.1.0",
     "postcss-nested": "2.1.2",
     "react": "16.0.0",
     "react-dom": "16.0.0",
diff --git a/examples/with-styled-jsx-scss/.babelrc b/examples/with-styled-jsx-scss/.babelrc
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "styled-jsx": {
+          "plugins": [
+            "styled-jsx-plugin-sass"
+          ]
+        }
+      }
+    ]
+  ]
+}
diff --git a/examples/with-styled-jsx-scss/README.md b/examples/with-styled-jsx-scss/README.md
@@ -0,0 +1,35 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-styled-jsx-scss)
+
+# With styled-jsx SASS / SCSS
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-styled-jsx-scss
+cd with-styled-jsx-scss
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+Next.js ships with [styled-jsx](https://github.com/zeit/styled-jsx) allowing you
+to write scope styled components with full css support. This is important for
+the modularity and code size of your bundles and also for the learning curve of the framework. If you know css you can write styled-jsx right away.
+
+This example shows how to configure styled-jsx to use external plugins to modify the output. Using this you can use PostCSS, SASS (SCSS), LESS, or any other pre-processor with styled-jsx. You can define plugins in `.babelrc`. This example shows how to implement the SASS plugin.
+
+More details about how plugins work can be found in the [styled-jsx readme](https://github.com/zeit/styled-jsx#css-preprocessing-via-plugins)
diff --git a/examples/with-styled-jsx-scss/package.json b/examples/with-styled-jsx-scss/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "basic-css",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "4.1.0",
+    "node-sass": "4.5.3",
+    "react": "16.0.0",
+    "react-dom": "16.0.0",
+    "styled-jsx-plugin-sass": "0.1.0"
+  },
+  "license": "ISC"
+}
diff --git a/examples/with-styled-jsx-scss/pages/index.js b/examples/with-styled-jsx-scss/pages/index.js
@@ -0,0 +1,22 @@
+export default () => (
+  <div className='hello'>
+    <p>Hello World</p>
+    <style jsx>{`
+      $color: red;
+
+      .hello {
+        background: #eee;
+        padding: 100px;
+        text-align: center;
+        transition: 100ms ease-in background;
+        &:hover {
+          color: $color;
+        }
+
+        @media only screen and (max-width: 480px) {
+          font-size: 20px;
+        }
+      }
+    `}</style>
+  </div>
+)
