From f6f6b8f52196ea36c180d70d1728b22b68e52422 Mon Sep 17 00:00:00 2001
From: Ramon Saccilotto <tikiatua@gmail.com>
Date: Thu, 27 Oct 2016 21:43:39 +0200
Subject: [PATCH] Update Readme.md with webpack example code

---
 README.md | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)

diff --git a/README.md b/README.md
index 29f27562..039d151e 100644
--- a/README.md
+++ b/README.md
@@ -36,6 +36,95 @@ The API is documented in Sass, but we've worked hard to make the API *very* simi
 
 Explore [Official Integrations](docs/integrations) to see some community-backed plugins to your favorite frameworks and libraries.
 
+#### Webpack Users
+
+Please find an example of a working webpack configuration for stylus below. Make sure to **NOT** include `@import "jeet"` in your .styl-files with this setup.
+
+```javascript
+// file: example.styl
+// note that you should NOT include jeet with @import "jeet"
+body {
+  div {
+    color: tint(#000, 42%);
+  }
+}
+```
+
+```javascript
+// file: package.json
+{
+  "name": "stylus-test",
+  "version": "1.0.0",
+  "description": "",
+  "main": "webpack.config.js",
+  "scripts": {
+    "build": "webpack --progress -config webpack.config.js"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "jeet": "^7.0.0",
+    "webpack": "^1.13.2",
+    "style-loader": "^0.13.1",
+    "css-loader": "^0.25.0",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^2.3.1",
+    "extract-text-webpack-plugin": "^1.0.1"
+  }
+}
+```
+
+```javascript
+// file: webpack.config.js
+var path = require('path');
+var webpack = require('webpack');
+
+// extract text into separate files
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+// include the jeet stylus plugin
+var jeet = require('jeet');
+
+// define the app directory to include in compilation
+var app_directory = path.resolve(__dirname);
+
+module.exports = {
+	entry: path.resolve(__dirname, 'example.styl'),
+	output: {
+		path: path.resolve(__dirname),
+		filename: 'example.css.js'
+	},
+	module: {
+		loaders: [{
+				// parse stylus styles
+				test: /\.styl$/,
+				// use some stylus plugins
+				use: [jeet()],
+				// extract the style into separate files
+				// IMPORTANT: style and css!stylus must be separated, it will not
+				// work otherwise
+				loader: ExtractTextPlugin.extract('style', 'css!stylus'),
+				// specify with directories to include
+				include: [app_directory]
+			}
+		]
+	},
+	plugins: [
+    // the extract-text-webpack-plugin is used to pull the css into
+    // a separate file
+		new ExtractTextPlugin('example.css'),
+		new webpack.optimize.UglifyJsPlugin({
+			compress: {
+				warnings: false
+			}
+		}),
+		new webpack.optimize.OccurenceOrderPlugin()
+	]
+};
+```
+The files can then be processed by running `npm run build`.
+
+
 #### Browser Support
 
 - IE9+ without help. IE8+ with Selectivizr. Obviously always use Autoprefixer.