styled-jsx

MicheleBertoli · Dec 7, 2016 · 9d559a0 · 9d559a0
1 parent 850605d
commit 9d559a0
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -59,6 +59,7 @@ For example, if a package supports the css file extraction you can run the autop
 | [stilr](https://github.com/kodyl/stilr) | 1.1.0 | | x | x | x | x |
 | [style-it](https://github.com/buildbreakdo/style-it) | 1.2.9 | | x | x | | |
 | [styled-components](https://github.com/styled-components/styled-components) | 1.0.3 | x | x | x | | |
+| [styled-jsx](https://github.com/zeit/styled-jsx) | 0.0.7 | x | x | x | | |
 | [styletron-react](https://github.com/rtsao/styletron) | 2.1.2 | x | x | x | x | x |
 | [styling](https://github.com/andreypopp/styling) | 0.2.0 | | x | | x | x |
 | [uranium](https://github.com/tuckerconnelly/uranium) | 0.1.2 | | | x | x | |

diff --git a/styled-jsx/button.js b/styled-jsx/button.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+const Container = ({ children }) => (
+  <div>
+    <div className="container">{children}</div>
+    <style jsx>{`
+      .container {
+        text-align: center;
+      }
+    `}</style>
+  </div>
+)
+
+const Button = () => (
+  <div>
+    <button className="button">Click me!</button>
+    <style jsx>{`
+      .button {
+        background-color: #ff0000;
+        width: 320px;
+        padding: 20px;
+        border-radius: 5px;
+        border: none;
+        outline: none;
+      }
+
+      .button:hover {
+        color: #fff;
+      }
+
+      .button:active {
+        position: relative;
+        top: 2px;
+      }
+
+      @media (max-width: 480px) {
+        .button {
+          width: 160px
+        }
+      }
+    `}</style>
+  </div>
+);
+
+const App = () => (
+  <Container>
+    <Button>Click me!</Button>
+  </Container>
+);
+
+render(<App />, document.getElementById('content'));
diff --git a/styled-jsx/index.html b/styled-jsx/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>styled-jsx - CSS in JS</title>
+  </head>
+  <body>
+    <div id="content"></div>
+    <script src="bundle.js"></script>
+  </body>
+</html>
diff --git a/styled-jsx/package.json b/styled-jsx/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "styled-jsx-css-in-js",
+  "version": "1.0.0",
+  "description": "styled-jsx - CSS in JS",
+  "scripts": {
+    "build": "webpack ./button.js bundle.js"
+  },
+  "author": "Michele Bertoli",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^15.3.0",
+    "react-dom": "^15.3.0",
+    "styled-jsx": "0.0.7"
+  },
+  "devDependencies": {
+    "babel-core": "^6.11.4",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.11.1",
+    "webpack": "^1.13.1"
+  }
+}
diff --git a/styled-jsx/webpack.config.js b/styled-jsx/webpack.config.js
@@ -0,0 +1,13 @@
+module.exports = {
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      exclude: /(node_modules|bower_components)/,
+      loader: 'babel',
+      query: {
+        presets: ['es2015', 'react'],
+        plugins: ['styled-jsx/babel']
+      }
+    }]
+  }
+}