Merge branch 'babel-plugin-pre-style'

MicheleBertoli · Jul 22, 2017 · c2f9614 · c2f9614
2 parents 6cae34b + 079e353
commit c2f9614
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -20,6 +20,7 @@ For example, if a package supports the css file extraction you can run the autop
 |---------|:-------:|:--------------------------:|:--------------:|:-------------:|:-------------------------:|:----------------:|
 | [aphrodite](https://github.com/Khan/aphrodite) | 0.1.2 | ✓ | ✓ | ✓ | ✓ | ✓ |
 | [babel-plugin-css-in-js](https://github.com/martinandert/babel-plugin-css-in-js) | 1.2.2 | ✓ | ✓ | ✓ | ✓ | ✓ |
+| [babel-plugin-pre-style](https://github.com/soluml/babel-plugin-pre-style) | 1.0.9-alpha | | ✓ | ✓ | ✓ | ✓ |
 | [bloody-react-styled](https://github.com/bloodyowl/react-styled) | 3.0.0 | | ✓ | ✓ | | |
 | [classy](https://github.com/inturn/classy) | 0.3.0 | | ✓ | ✓ | ✓ | |
 | [csjs](https://github.com/rtsao/csjs) | 1.0.0 | | ✓ | ✓ | | |

diff --git a/babel-plugin-pre-style/PreStyleConfig.js b/babel-plugin-pre-style/PreStyleConfig.js
@@ -0,0 +1,5 @@
+module.exports = {
+  destination: './',
+  outputFile: 'atomic.css',
+  nameSpaces: ['styled'],
+};
diff --git a/babel-plugin-pre-style/atomic.css b/babel-plugin-pre-style/atomic.css
diff --git a/babel-plugin-pre-style/atomic.css.classNames.js b/babel-plugin-pre-style/atomic.css.classNames.js
@@ -0,0 +1,11 @@
+module.exports = { '.✨PLACEHOLDER✨{text-align:center;}': 'A',
+  '.✨PLACEHOLDER✨{background-color:red;}': 'B',
+  '.✨PLACEHOLDER✨{width:320px;}': 'C',
+  '.✨PLACEHOLDER✨{padding:20px;}': 'D',
+  '.✨PLACEHOLDER✨{border-radius:5px;}': 'E',
+  '.✨PLACEHOLDER✨{border:none;}': 'F',
+  '.✨PLACEHOLDER✨{outline:none;}': 'G',
+  '.✨PLACEHOLDER✨:hover{color:#fff;}': 'H',
+  '.✨PLACEHOLDER✨:active{position:relative;}': 'I',
+  '.✨PLACEHOLDER✨:active{top:2px;}': 'J',
+  '@media (max-width:480px){.✨PLACEHOLDER✨{width:160px;}}': 'K' };
diff --git a/babel-plugin-pre-style/button.js b/babel-plugin-pre-style/button.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+class App extends React.Component {
+  render() {
+    const attrs = {
+      container: {
+        className: PreStyle`
+          text-align: center;
+        `
+      },
+      button: {
+        className: PreStyle`
+          background-color: #ff0000;
+          width: 320px;
+          padding: 20px;
+          border-radius: 5px;
+          border: none;
+          outline: none;
+
+          &:hover {
+            color: #fff;
+          }
+
+          &:active {
+            position: relative;
+            top: 2px;
+          }
+
+          @media (max-width: 480px) {
+            width: 160px;
+          }
+        `
+      },
+    };
+    return (
+      <div {...attrs.container}>
+        <button {...attrs.button}>Click me!</button>
+      </div>
+    );
+  }
+}
+
+render(<App />, document.getElementById('content'));
diff --git a/babel-plugin-pre-style/index.html b/babel-plugin-pre-style/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>pre-style - CSS in JS</title>
+    <link rel="stylesheet" href="atomic.css">
+  </head>
+  <body>
+    <div id="content"></div>
+    <script src="bundle.js"></script>
+  </body>
+</html>
diff --git a/babel-plugin-pre-style/package.json b/babel-plugin-pre-style/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "pre-style-css-in-js",
+  "version": "1.0.0",
+  "description": "pre-style - css-in-js",
+  "scripts": {
+    "build": "webpack ./button.js bundle.js"
+  },
+  "author": "Michele Bertoli",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.25.0",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-pre-style": "^1.0.9-alpha",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.4",
+    "style-loader": "^0.18.2",
+    "webpack": "^3.3.0"
+  }
+}
diff --git a/babel-plugin-pre-style/webpack.config.js b/babel-plugin-pre-style/webpack.config.js
@@ -0,0 +1,19 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['env', 'react'],
+            plugins: [
+              ['pre-style', { 'config': './PreStyleConfig.js' }]
+            ]
+          }
+        }
+      },
+    ]
+  }
+}