styled-components

MicheleBertoli · Oct 14, 2016 · 59ace82 · 59ace82
1 parent 4597255
commit 59ace82
Show file tree

Hide file tree

Showing 5 changed files with 79 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
 | [stile](https://github.com/bloodyowl/stile) + [react-media-queries](https://github.com/bloodyowl/react-media-queries) | 2.0.0 | x | | x | x | | |
 | [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 | | |
 | [styling](https://github.com/andreypopp/styling) | 0.2.0 | | x | | x | x |
 
 ## Testimonials

diff --git a/styled-components/button.js b/styled-components/button.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { render } from 'react-dom';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  textAlign: center;
+`;
+
+const Button = styled.button`
+  backgroundColor: #ff0000;
+  width: 320px;
+  padding: 20px;
+  borderRadius: 5px;
+  border: none;
+  outline: none;
+  &:hover {
+    color: #fff;
+  }
+  &:active {
+    position: relative;
+    top: 2px;
+  }
+  @media (max-width: 480px) {
+    width: 160px;
+  }
+`;
+
+const App = () => (
+  <Container>
+    <Button>Click me!</Button>
+  </Container>
+);
+
+render(<App />, document.getElementById('content'));
diff --git a/styled-components/index.html b/styled-components/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>styled-components - CSS in JS</title>
+  </head>
+  <body>
+    <div id="content"></div>
+    <script src="bundle.js"></script>
+  </body>
+</html>
diff --git a/styled-components/package.json b/styled-components/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "styled-components-css-in-js",
+  "version": "1.0.0",
+  "description": "styled-components - 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-components": "^1.0.3"
+  },
+  "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-components/webpack.config.js b/styled-components/webpack.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      exclude: /(node_modules|bower_components)/,
+      loader: 'babel',
+      query: {
+        presets: ['es2015', 'react']
+      }
+    }]
+  }
+}