Fixed support for css files. Added test case for css files.

Author: owais

tests/app/tests/test_webpack.py

@@ -23,6 +23,7 @@ def setUp(self):
  def clean_dir(self, directory):
  if os.path.exists(BUNDLE_PATH):
  [os.remove(os.path.join(BUNDLE_PATH, F)) for F in os.listdir(BUNDLE_PATH)]
+ os.remove(settings.WEBPACK_LOADER['STATS_FILE'])
 
  def compile_bundles(self, config, wait=None):
  if wait:
@@ -72,6 +73,7 @@ def test_simple(self):
 
  main = chunks['main']
  self.assertEqual(main[0]['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/main.js'))
+ self.assertEqual(main[1]['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/styles.css'))
 
  def test_multiple_files(self):
  self.compile_bundles('webpack.config.split.js')

tests/assets/js/index.jsx

@@ -1,4 +1,5 @@
 var React = require('react');
 var App = require('./app');
+var style = require('./style.css');
 
 React.render(<App/>, document.getElementById('react-app'));

tests/assets/js/style.css

@@ -0,0 +1,3 @@
+body {
+ background: #e3e2e1;
+}

tests/assets/webpack-stats.json

@@ -1 +1 @@
-{"status":"compiling"}
+{"status":"done","chunks":{"main":[{"name":"main.js","path":"/home/owais/Projects/django-webpack-loader/tests/assets/bundles/main.js"},{"name":"styles.css","path":"/home/owais/Projects/django-webpack-loader/tests/assets/bundles/styles.css"}]}}

tests/assets/webpack.config.simple.js

@@ -1,6 +1,7 @@
 var path = require("path");
 var webpack = require('webpack');
 var BundleTracker = require('webpack-bundle-tracker');
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
 
 
 module.exports = {
@@ -12,13 +13,15 @@ module.exports = {
  },
 
  plugins: [
+ new ExtractTextPlugin("styles.css"),
  new BundleTracker({filename: './assets/webpack-stats.json'}),
  ],
 
  module: {
  loaders: [
  // we pass the output from babel loader to react-hot loader
  { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel'], },
+ { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
  ],
  },
 

tests/assets/webpack.config.split.js

@@ -2,6 +2,7 @@ var path = require("path");
 var webpack = require('webpack');
 var BundleTracker = require('webpack-bundle-tracker');
 var SplitByPathPlugin = require('webpack-split-by-path');
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
 
 
 module.exports = {
@@ -14,6 +15,7 @@ module.exports = {
  },
 
  plugins: [
+ new ExtractTextPlugin("styles.css"),
  new BundleTracker({filename: './assets/webpack-stats.json'}),
  new SplitByPathPlugin([
  {
@@ -27,6 +29,7 @@ module.exports = {
  loaders: [
  // we pass the output from babel loader to react-hot loader
  { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel'], },
+ { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
  ],
  },
 

tests/package.json

@@ -9,8 +9,11 @@
  "babel": "^5.4.7",
  "babel-core": "^5.4.7",
  "babel-loader": "^5.1.3",
+ "css-loader": "^0.14.1",
+ "extract-text-webpack-plugin": "^0.8.0",
  "node-libs-browser": "^0.5.0",
  "react": "^0.13.3",
+ "style-loader": "^0.12.3",
  "webpack": "^1.9.8",
  "webpack-bundle-tracker": "0.0.5",
  "webpack-dev-server": "^1.9.0",

webpack_loader/templatetags/webpack_loader.py

@@ -12,8 +12,8 @@ def render_bundle(bundle_name):
  bundle = get_bundle(bundle_name)
  tags = []
  for chunk in bundle:
+ url = chunk.get('publicPath') or chunk['url']
  if chunk['name'].endswith('.js'):
- url = chunk.get('publicPath') or chunk['url']
  tags.append('<script type="text/javascript" src="{}"></script>'.format(url))
  elif chunk['name'].endswith('.css'):
  tags.append('<link type="text/css" href="{}" rel="stylesheet">'.format(url))