Moved from less to postcss

Author: anton-lunev

package.json

@@ -32,8 +32,10 @@
     "fs": "0.0.2",
     "html-loader": "^0.4.3",
     "html-webpack-plugin": "^2.10.0",
-    "less": "^2.6.1",
-    "less-loader": "^2.2.2",
+    "postcss": "^5.0.19",
+    "postcss-cssnext": "^2.5.1",
+    "postcss-csso": "^1.0.0",
+    "postcss-loader": "^0.8.2",
     "style-loader": "^0.13.0",
     "svg-sprite-loader": "0.0.18",
     "url-loader": "^0.5.7",

src/app/app.less src/app/app.css

@@ -82,7 +82,7 @@ input, button, select, textarea {
     }
 }
 
-//TODO refactor buttons
+/*TODO refactor buttons*/
 .btn {
     background-color: transparent;
     color: #556473;
@@ -100,7 +100,7 @@ input, button, select, textarea {
         padding: 0;
         vertical-align: middle;
 
-        .icon {
+        & .icon {
             width: 20px;
             height: 20px;
         }
@@ -114,11 +114,11 @@ input, button, select, textarea {
 
         &:hover {
             border-color: darken(#15cc35, 10%);
-            .icon {
+            & .icon {
                 fill: darken(#15cc35, 10%);
             }
         }
-        .icon {
+        & .icon {
             fill: #15cc35
         }
     }
@@ -130,11 +130,11 @@ input, button, select, textarea {
         color: #22b8eb;
         &:hover {
             border-color: darken(#22b8eb, 10%);
-            .icon {
+            & .icon {
                 fill: darken(#22b8eb, 10%);
             }
         }
-        .icon {
+        & .icon {
             fill: #22b8eb
         }
     }

src/app/app.js

@@ -1,4 +1,4 @@
-import './app.less';
+import './app.css';
 import 'images/app-icon.svg';
 
 import angular from 'angular';

src/app/list/list-form/list-form.less src/app/list/list-form/list-form.css

@@ -1,6 +1,6 @@
 'use strict';
 
-import './list-form.less';
+import './list-form.css';
 import angular from 'angular';
 import listForm from './list-form.component';
 import googleTranslate from 'common/google-translate/google-translate.service';

src/app/list/list-form/list-form.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import './list.less';
+import './list.css';
 import angular from 'angular';
 import ListController from './list.ctrl';
 import listService from './list.service';

src/app/list/list.less src/app/list/list.css

@@ -16,7 +16,7 @@
             border: 1px solid #129ac8;
         }
     }
-    input {
+    & input {
         padding-right: 0;
         width: 40px;
         padding-left: 41px;

src/app/list/list.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import './timer-input.less'
+import './timer-input.css'
 import angular from 'angular';
 import timer from 'common/timer/timer.service';
 import timerInput from './timer-input.component';

src/app/list/timer-input/timer-input.less src/app/list/timer-input/timer-input.css

@@ -1,7 +1,7 @@
 'use strict';
 
 import 'svg/plus.svg'
-import './sidebar-header.less';
+import './sidebar-header.css';
 
 import angular from 'angular';
 import sidebarHeader from './sidebar-header.component';

src/app/list/timer-input/timer-input.js

@@ -52,7 +52,7 @@
         right: 15px;
         top: 10px;
 
-        .btn-collection {
+        & .btn-collection {
             width: 26px;
             height: 26px;
             box-sizing: border-box;
@@ -77,14 +77,14 @@
     }
 
     &:hover &__action {
-        .btn-collection {
+        & .btn-collection {
             opacity: 1;
             visibility: visible;
         }
     }
 
     &--active &__action {
-        .btn-collection {
+        & .btn-collection {
             border: 1px solid white;
             &__icon {
                 fill: #fff;

src/app/sidebar/header/sidebar-header.less src/app/sidebar/header/sidebar-header.css

@@ -1,7 +1,7 @@
 'use strict';
 
 import 'svg/close.svg';
-import './sidebar-list.less';
+import './sidebar-list.css';
 
 import angular from 'angular';
 import sidebarList from './sidebar-list.component';

src/app/sidebar/header/sidebar-header.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import './sidebar.less';
+import './sidebar.css';
 import angular from 'angular';
 import SidebarController from './sidebar.ctrl';
 import windowControls from './window-controls/window-controls';

src/app/sidebar/list/sidebar-list.less src/app/sidebar/list/sidebar-list.css

@@ -1,6 +1,6 @@
 'use strict';
 
-import './window-controls.less';
+import './window-controls.css';
 import angular from 'angular';
 
 import windowControls from './window-controls.component';

src/app/sidebar/list/sidebar-list.js

@@ -1,4 +1,5 @@
 'use strict';
+/* eslint-env node */
 
 const app = require('app');
 const BrowserWindow = require('browser-window');

src/app/sidebar/sidebar.less src/app/sidebar/sidebar.css

@@ -1,4 +1,5 @@
 'use strict';
+/* eslint-env node */
 
 const path = require('path');
 
@@ -7,7 +8,8 @@ const CleanWebpackPlugin = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
-
+const cssnext = require('postcss-cssnext');
+const csso = require('postcss-csso');
 const ENV = process.env.NODE_ENV || 'dev';
 const isProd = ENV === 'production';
 
@@ -99,7 +101,7 @@ const config = {
             },
             {
                 test: /\.(less|css)$/,
-                loader: ExtractTextPlugin.extract('style-loader', 'css?root=~images&sourceMap!less?sourceMap')
+                loader: ExtractTextPlugin.extract('style-loader', 'css?root=~images&sourceMap!postcss?sourceMap')
             },
             {
                 test: /\.svg$/,
@@ -109,6 +111,10 @@ const config = {
                 })}`
             }
         ]
+    },
+
+    postcss: () => {
+        return [cssnext, csso];
     }
 };