Wp

.eslintignore

@@ -3,4 +3,6 @@ coverage
 node_modules
 
 generate-tests.js
+test/cases/webpack/*
 test/common-test-cases.js
+webpack.config.js

.npmignore

@@ -7,3 +7,4 @@ generate-tests.js
 src/
 test/
 utils/
+webpack.config.js

package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "debug": "^2.2.0",
-    "generic-names": "^1.0.0",
+    "generic-names": "^1.0.1",
     "icss-replace-symbols": "^1.0.2",
     "lodash.foreach": "^3.0.3",
     "lodash.identity": "^3.0.0",
@@ -19,21 +19,26 @@
   "devDependencies": {
     "babel": "^5.8.20",
     "babel-eslint": "^4.0.5",
+    "css-loader": "^0.21.0",
     "css-modules-loader-core": "^1.0.0",
     "eslint": "^1.0.0",
     "eslint-config-airbnb": "0.0.7",
     "eslint-config-airbnb-lite": "^1.0.3",
     "eslint-watch": "^1.2.4",
+    "extract-text-webpack-plugin": "^0.8.2",
     "in-publish": "^2.0.0",
     "isparta": "^3.0.3",
     "lodash": "^3.10.1",
     "mocha": "^2.2.5",
     "postcss": "^5.0.10",
+    "postcss-loader": "^0.7.0",
     "postcss-modules-extract-imports": "^1.0.0",
     "postcss-modules-local-by-default": "^1.0.0",
     "postcss-modules-scope": "^1.0.0",
     "postcss-modules-values": "^1.1.0",
-    "precommit-hook": "^3.0.0"
+    "precommit-hook": "^3.0.0",
+    "style-loader": "^0.13.0",
+    "webpack": "^1.12.2"
   },
   "peerDependencies": {
     "postcss": "^5.x",
@@ -43,6 +48,7 @@
     "postcss-modules-values": "^1.1.0"
   },
   "scripts": {
+    "fixture": "webpack",
     "start": "esw -w .",
     "lint": "eslint .",
     "test": "mocha --compilers js:babel/register",

test/cases/webpack/.gitignore

@@ -0,0 +1 @@
+result*

test/cases/webpack/source.css

@@ -0,0 +1,4 @@
+.local
+{
+  color: white;
+}

test/cases/webpack/source.js

@@ -0,0 +1 @@
+var css = require('./source.css');

test/extractor.js

@@ -0,0 +1,21 @@
+import { equal } from 'assert';
+import { execSync } from 'child_process';
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+import hook from '../src';
+
+describe('extractor', () => {
+  let selector;
+
+  before(() => {
+    hook({generateScopedName: '[name]__[local]___[hash:base64:5]'});
+    execSync('npm run fixture', {cwd: process.cwd()});
+    selector = readFileSync(resolve('test/cases/webpack/result.css'), 'utf8')
+      .split('\n').shift().replace(/^\./, '');
+  });
+
+  it('should generate the same selectors as the webpack does', () => {
+    const tokens = require('./cases/webpack/source.css');
+    equal(selector, tokens.local);
+  });
+});

webpack.config.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var path = require('path');
+
+module.exports = {
+  entry: path.resolve('test/cases/webpack/source.js'),
+
+  output: {
+    filename: 'result.js',
+    path: path.resolve('test/cases/webpack')
+  },
+
+  module: {
+    loaders: [
+      {
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract('style-loader',
+          'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader')
+      }
+    ]
+  },
+
+  plugins: [
+    new ExtractTextPlugin('result.css', {
+      allChunks: true
+    })
+  ]
+};