use webpack css loader for code page

6 files changed, 22 insertions, 8 deletions

diff --git a/server/sonar-web/gulp/styles.js b/server/sonar-web/gulp/styles.js
index 9f4c4c35d3c..be8bf35fb3e 100644
--- a/server/sonar-web/gulp/styles.js
+++ b/server/sonar-web/gulp/styles.js
@@ -22,6 +22,8 @@ var autoprefixerOptions = {
 };
 
 
+module.exports.autoprefixerOptions = autoprefixerOptions;
+
 module.exports.styles = function (output, production) {
   return gulp.src(['src/main/less/sonar.less'])
       .pipe(less())
diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json
index 51ce13d71d5..ebaf78ddb3c 100644
--- a/server/sonar-web/package.json
+++ b/server/sonar-web/package.json
@@ -5,6 +5,7 @@
   "repository": "SonarSource/sonarqube",
   "license": "LGPL-3.0",
   "devDependencies": {
+    "autoprefixer": "6.2.2",
     "babel-cli": "6.3.17",
     "babel-core": "6.3.17",
     "babel-eslint": "4.1.6",
@@ -20,6 +21,7 @@
     "chai": "3.3.0",
     "classnames": "2.2.0",
     "clipboard": "1.5.5",
+    "css-loader": "0.23.1",
     "d3": "3.5.6",
     "del": "2.0.2",
     "enzyme": "1.2.0",
@@ -48,6 +50,7 @@
     "mocha": "2.3.4",
     "moment": "2.10.6",
     "numeral": "1.5.3",
+    "postcss-loader": "0.8.0",
     "react": "0.14.2",
     "react-addons-test-utils": "0.14.2",
     "react-dom": "0.14.2",
@@ -61,6 +64,7 @@
     "script-loader": "0.6.1",
     "sinon": "1.15.4",
     "sinon-chai": "2.8.0",
+    "style-loader": "0.13.0",
     "underscore": "1.8.3",
     "vinyl-buffer": "1.0.0",
     "vinyl-source-stream": "1.1.0",
diff --git a/server/sonar-web/src/main/js/apps/code/app.js b/server/sonar-web/src/main/js/apps/code/app.js
index ce973644f69..8cf48e308e3 100644
--- a/server/sonar-web/src/main/js/apps/code/app.js
+++ b/server/sonar-web/src/main/js/apps/code/app.js
@@ -8,6 +8,8 @@ import { syncReduxAndRouter } from 'redux-simple-router';
 import Code from './components/Code';
 import configureStore from './store/configureStore';
 
+import './styles/code.css';
+
 
 const store = configureStore();
 const history = createHashHistory({
diff --git a/server/sonar-web/src/main/less/pages/code.less b/server/sonar-web/src/main/js/apps/code/styles/code.css
index 99bb42ba39d..4df9d26c78d 100644
--- a/server/sonar-web/src/main/less/pages/code.less
+++ b/server/sonar-web/src/main/js/apps/code/styles/code.css
@@ -1,8 +1,3 @@
-@import (reference) "../mixins";
-@import (reference) "../variables";
-@import (reference) "../init/type";
-
-
 .code-breadcrumbs {
   display: flex;
   flex-wrap: wrap;
@@ -20,7 +15,7 @@
   position: relative;
   top: -1px;
   padding-left: 10px;
-  color: @secondFontColor;
+  color: #777;
   font-size: 11px;
   content: ">";
 }
@@ -37,7 +32,9 @@
   display: inline-block;
   vertical-align: text-top;
   max-width: 50vw;
-  .text-ellipsis;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .code-name-cell {
diff --git a/server/sonar-web/src/main/less/sonar.less b/server/sonar-web/src/main/less/sonar.less
index 292f72533e2..3f2bd9dc299 100644
--- a/server/sonar-web/src/main/less/sonar.less
+++ b/server/sonar-web/src/main/less/sonar.less
@@ -48,7 +48,6 @@
 @import "pages/login";
 @import "pages/api-documentation";
 @import "pages/overview";
-@import "pages/code";
 
 @import 'style';
 @import 'deprecated';
diff --git a/server/sonar-web/webpack.config.js b/server/sonar-web/webpack.config.js
index 5c0de151c47..eb1df2916a9 100644
--- a/server/sonar-web/webpack.config.js
+++ b/server/sonar-web/webpack.config.js
@@ -1,5 +1,8 @@
 var path = require('path');
 var webpack = require('webpack');
+var autoprefixer = require('autoprefixer');
+
+var autoprefixerOptions = require('./gulp/styles').autoprefixerOptions;
 
 var baseOutput = process.env.OUTPUT || path.join(__dirname, 'src/main/webapp');
 var output = path.join(baseOutput, 'js/bundles');
@@ -90,7 +93,14 @@ module.exports = {
       {
         test: require.resolve('d3'),
         loader: 'expose?d3'
+      },
+      {
+        test: /\.css/,
+        loader: 'style-loader!css-loader!postcss-loader'
       }
     ]
+  },
+  postcss: function () {
+    return [autoprefixer(autoprefixerOptions)];
   }
 };