use SASS instead of precss

allure-generator/build.gradle

@@ -8,7 +8,7 @@ apply plugin: 'maven'
 apply plugin: 'com.moowork.node'
 
 node {
-    version = '7.10.0'
+    version = '8.1.3'
     yarnVersion = '0.24.6'
     download = true
 }

allure-generator/package.json

@@ -37,10 +37,9 @@
     "jest": "^20.0.4",
     "jsdom": "^11.0.0",
     "json-loader": "^0.5.4",
-    "postcss-import": "^10.0.0",
-    "postcss-loader": "^1.3.2",
-    "postcss-nesting": "^4.0.1",
-    "precss": "^1.4.0",
+    "node-sass": "^4.5.3",
+    "postcss-loader": "^2.0.6",
+    "sass-loader": "^6.0.6",
     "style-loader": "^0.18.1",
     "underscore.string": "^3.3.4",
     "url-loader": "^0.5.8",
@@ -86,7 +85,7 @@
       "^.+\\.js$": "babel-jest"
     },
     "moduleNameMapper": {
-      "\\.css$": "<rootDir>/src/test/javascript/stubs/css.js"
+      "\\.s?css$": "<rootDir>/src/test/javascript/stubs/css.js"
     }
   }
 }

allure-generator/src/main/javascript/app.js

@@ -1,6 +1,6 @@
 import 'font-awesome/css/font-awesome.css';
-import './styles.css';
-import './blocks/table/styles.css';
+import './styles.scss';
+import './blocks/table/styles.scss';
 import {Application, Behaviors} from 'backbone.marionette';
 import {history} from 'backbone';
 import router from './router';

allure-generator/src/main/javascript/blocks/alert/styles.css → allure-generator/src/main/javascript/blocks/alert/styles.scss

@@ -1,10 +1,10 @@
-@import "../../mixins.css";
+@import "../../mixins.scss";
 
 .alert {
   padding: $gap-size;
   &__code {
     margin: 0;
     word-break: break-word;
   }
-  @mixin status-bg;
+  @include status-bg();
 }

allure-generator/src/main/javascript/blocks/attachment-row/styles.css → allure-generator/src/main/javascript/blocks/attachment-row/styles.scss

@@ -1,4 +1,4 @@
-@import "../../variables.css";
+@import "../../variables.scss";
 
 .attachment-row {
   padding: 5px $gap-size 5px 25px;

allure-generator/src/main/javascript/blocks/bar/styles.css → allure-generator/src/main/javascript/blocks/bar/styles.scss

@@ -1,5 +1,5 @@
-@import "../../variables.css";
-@import "../../mixins.css";
+@import "../../variables.scss";
+@import "../../mixins.scss";
 
 .bar {
   height: 18px;
@@ -16,6 +16,6 @@
     color: #fff;
     font-size: 12px;
     line-height: 18px;
-    @mixin status-bg-bright;
+    @include status-bg-bright();
   }
 }

allure-generator/src/main/javascript/blocks/button/styles.css → allure-generator/src/main/javascript/blocks/button/styles.scss

@@ -1,4 +1,4 @@
-@import "../../variables.css";
+@import "../../variables.scss";
 
 $button-border-radius: 3px;
 $button-border-color: rgba(0, 0, 0, 0.2);

allure-generator/src/main/javascript/blocks/island/styles.css → allure-generator/src/main/javascript/blocks/island/styles.scss

@@ -1,4 +1,4 @@
-@import "../../variables.css";
+@import "../../variables.scss";
 
 .island {
   background: $content-bg;

allure-generator/src/main/javascript/blocks/label/styles.css → allure-generator/src/main/javascript/blocks/label/styles.scss

@@ -1,4 +1,4 @@
-@import "../../mixins.css";
+@import "../../mixins.scss";
 
 .label {
   vertical-align: baseline;
@@ -7,7 +7,7 @@
   padding: 2px 4px 2px 5px;
   font-size: 80%;
   border-radius: 3px;
-  @mixin status-bg-bright;
+  @include status-bg-bright();
 
   &__info {
     background: #3c58e4;

allure-generator/src/main/javascript/blocks/link/styles.css → allure-generator/src/main/javascript/blocks/link/styles.scss

@@ -1,4 +1,4 @@
-@import "../../variables.css";
+@import "../../variables.scss";
 
 .link {
   color: $link-color;

allure-generator/src/main/javascript/blocks/splash/styles.css → allure-generator/src/main/javascript/blocks/splash/styles.scss

@@ -1,4 +1,4 @@
-@import "../../variables.css";
+@import "../../variables.scss";
 
 .splash {
     margin: auto;

allure-generator/src/main/javascript/blocks/step-stats/styles.css → allure-generator/src/main/javascript/blocks/step-stats/styles.scss

@@ -1,4 +1,4 @@
-@import "../../variables.css";
+@import "../../variables.scss";
 
 .step-stats {
   &__info {

allure-generator/src/main/javascript/blocks/table/styles.css → allure-generator/src/main/javascript/blocks/table/styles.scss

@@ -1,4 +1,4 @@
-@import '../../variables.css';
+@import "../../variables.scss";
 
 .table {
   &__row, &__head {

allure-generator/src/main/javascript/blocks/text/styles.scss

@@ -0,0 +1,5 @@
+@import "../../mixins.scss";
+
+.text {
+  @include status-text();
+}

allure-generator/src/main/javascript/blocks/widget/styles.css → allure-generator/src/main/javascript/blocks/widget/styles.scss

@@ -1,4 +1,4 @@
-@import "../../variables.css";
+@import "../../variables.scss";
 
 .widget {
   margin-bottom: $gap-size;

allure-generator/src/main/javascript/components/attachment/AttachmentView.js

@@ -1,4 +1,4 @@
-import './styles.css';
+import './styles.scss';
 import highlight from '../../util/highlight';
 import {View} from 'backbone.marionette';
 import $ from 'jquery';

allure-generator/src/main/javascript/components/attachment/styles.css → allure-generator/src/main/javascript/components/attachment/styles.scss

@@ -1,4 +1,4 @@
-@import "../../variables.css";
+@import "../../variables.scss";
 
 .attachment {
   display: flex;

allure-generator/src/main/javascript/components/back-panel/BackPanelView.js

@@ -1,4 +1,4 @@
-import './styles.css';
+import './styles.scss';
 import {View} from 'backbone.marionette';
 import {className} from '../../decorators';
 import template from './BackPanelView.hbs';

allure-generator/src/main/javascript/components/error-splash/ErrorSplashView.js

@@ -1,4 +1,4 @@
-import './styles.css';
+import './styles.scss';
 import {View} from 'backbone.marionette';
 import {className} from '../../decorators';
 import template from './ErrorSplashView.hbs';

allure-generator/src/main/javascript/components/execution/ExecutionView.js

@@ -1,4 +1,4 @@
-import './styles.css';
+import './styles.scss';
 import {View} from 'backbone.marionette';
 import template from './ExecutionView.hbs';
 import {className} from '../../decorators';

allure-generator/src/main/javascript/components/execution/styles.css → allure-generator/src/main/javascript/components/execution/styles.scss

@@ -1,4 +1,4 @@
-@import "../../variables.css";
+@import "../../variables.scss";
 
 .execution {
   &__title {

allure-generator/src/main/javascript/components/graph-base/BaseChartView.js

@@ -1,4 +1,4 @@
-import './styles.css';
+import './styles.scss';
 import {View} from 'backbone';
 import {axisLeft, axisBottom} from 'd3-axis';
 import {select, event as currentEvent} from 'd3-selection';

allure-generator/src/main/javascript/components/graph-base/styles.css → allure-generator/src/main/javascript/components/graph-base/styles.scss

@@ -1,4 +1,4 @@
-@import "../../mixins.css";
+@import "../../mixins.scss";
 
 .chart {
   margin-right: $gap-size;
@@ -41,7 +41,7 @@
     width: 20px;
     height: 16px;
     margin-right: 5px;
-    @mixin status-bg-bright;
+    @include status-bg-bright();
   }
 
   &__bar {
@@ -53,7 +53,7 @@
     stop-opacity: 0;
   }
   &__fill {
-    @mixin status-fill;
+    @include status-fill();
   }
   &__axis {
     path, line {

allure-generator/src/main/javascript/components/graph-trend-chart/TrendChartView.js

@@ -1,4 +1,4 @@
-import './styles.css';
+import './styles.scss';
 import {scaleLinear, scalePoint} from 'd3-scale';
 import {max} from 'd3-array';
 import {area, stack} from 'd3-shape';

allure-generator/src/main/javascript/components/graph-trend-chart/styles.css → allure-generator/src/main/javascript/components/graph-trend-chart/styles.scss

@@ -1,8 +1,8 @@
-@import "../../mixins.css";
+@import "../../mixins.scss";
 
 .trend {
   &__area {
-    @mixin status-fill;
+    @include status-fill();
   }
   &__tooltip {
     display: block;

allure-generator/src/main/javascript/components/language-select/LanguageSelectView.js

@@ -1,4 +1,4 @@
-import './styles.css';
+import './styles.scss';
 import PopoverView from '../popover/PopoverView';
 import {className, on} from '../../decorators';
 import template from './LanguageSelectView.hbs';

allure-generator/src/main/javascript/components/language-select/styles.css → allure-generator/src/main/javascript/components/language-select/styles.scss

@@ -1,4 +1,4 @@
-@import "../../variables.css";
+@import "../../variables.scss";
 
 .language-select {
   z-index: 1;

allure-generator/src/main/javascript/components/loader/LoaderView.js

@@ -1,4 +1,4 @@
-import './styles.css';
+import './styles.scss';
 import {View} from 'backbone.marionette';
 import {options} from '../../decorators';
 import template from './LoaderView.hbs';

allure-generator/src/main/javascript/components/loader/styles.css → allure-generator/src/main/javascript/components/loader/styles.scss

@@ -1,4 +1,4 @@
-@import "../../variables.css";
+@import "../../variables.scss";
 
 .loader {
   margin: auto;

allure-generator/src/main/javascript/components/node-sorter/NodeSorterView.js

@@ -1,4 +1,4 @@
-import './styles.css';
+import './styles.scss';
 import {on, className} from '../../decorators';
 import settings from '../../util/settings';
 import template from './NodeSorterView.hbs';

allure-generator/src/main/javascript/components/node-sorter/styles.css → allure-generator/src/main/javascript/components/node-sorter/styles.scss

@@ -1,4 +1,4 @@
-@import "../../variables.css";
+@import "../../variables.scss";
 
 .sorter {
   overflow: hidden;

allure-generator/src/main/javascript/components/pane-set/PaneSetView.js

@@ -1,4 +1,4 @@
-import './styles.css';
+import './styles.scss';
 import {View} from 'backbone.marionette';
 import $ from 'jquery';
 import {className} from '../../decorators';

allure-generator/src/main/javascript/components/pane-set/styles.css → allure-generator/src/main/javascript/components/pane-set/styles.scss

@@ -1,4 +1,4 @@
-@import "../../variables.css";
+@import "../../variables.scss";
 
 .pane {
   position: absolute;

allure-generator/src/main/javascript/components/popover/PopoverView.js

@@ -1,4 +1,4 @@
-import './styles.css';
+import './styles.scss';
 import TooltipView from '../tooltip/TooltipView';
 import {className} from '../../decorators';
 

allure-generator/src/main/javascript/components/popover/styles.css → allure-generator/src/main/javascript/components/popover/styles.scss

@@ -1,4 +1,4 @@
-@import "../../variables.css";
+@import "../../variables.scss";
 
 .popover {
   position: absolute;

allure-generator/src/main/javascript/components/side-nav/SideNavView.js

@@ -1,4 +1,4 @@
-import './styles.css';
+import './styles.scss';
 import {className, on} from '../../decorators';
 import {findWhere} from 'underscore';
 import {View} from 'backbone.marionette';

allure-generator/src/main/javascript/components/side-nav/styles.css → allure-generator/src/main/javascript/components/side-nav/styles.scss

@@ -1,4 +1,4 @@
-@import "../../variables.css";
+@import "../../variables.scss";
 
 .side-nav {
   background: $app-nav-bg;

allure-generator/src/main/javascript/components/status-toggle/StatusToggleView.js

@@ -1,4 +1,4 @@
-import './styles.css';
+import './styles.scss';
 import {on, className} from '../../decorators';
 import settings from '../../util/settings';
 import template from './StatusToggleView.hbs';

allure-generator/src/main/javascript/components/status-toggle/styles.css → allure-generator/src/main/javascript/components/status-toggle/styles.scss

@@ -1,4 +1,4 @@
-@import "../../mixins.css";
+@import "../../mixins.scss";
 
 .status-toggle {
   &__items {
@@ -20,7 +20,7 @@
   color: #fff;
   padding: 2px 4px 2px 5px;
   border-radius: 3px;
-  @mixin status-bg-bright;
+  @include status-bg-bright();
 }
 
 .n-label {
@@ -30,7 +30,7 @@
   border-radius: 3px;
   border: 1px solid;
   font-weight: bold;
-  @mixin status-text;
-  @mixin status-border;
+  @include status-text();
+  @include status-border();
 }
 

allure-generator/src/main/javascript/components/testresult/TestResultView.js

@@ -1,4 +1,4 @@
-import './styles.css';
+import './styles.scss';
 import {View} from 'backbone.marionette';
 import {on, regions, behavior} from '../../decorators';
 import pluginsRegistry from '../../util/pluginsRegistry';

allure-generator/src/main/javascript/components/testresult/styles.css → allure-generator/src/main/javascript/components/testresult/styles.scss

@@ -1,5 +1,5 @@
-@import "../../variables.css";
-@import "../../mixins.css";
+@import "../../variables.scss";
+@import "../../mixins.scss";
 
 .testresult {
   &__trace {
@@ -34,7 +34,7 @@
 
 .message {
   border-bottom: 3px solid;
-  @mixin status-border;
+  @include status-border();
 }
 
 .fullname__copy {

allure-generator/src/main/javascript/components/tooltip/TooltipView.js

@@ -1,4 +1,4 @@
-import './styles.css';
+import './styles.scss';
 import {View} from 'backbone';
 import {className} from '../../decorators';
 import bem from 'b_';

allure-generator/src/main/javascript/components/tree/TreeView.js

@@ -1,4 +1,4 @@
-import './styles.css';
+import './styles.scss';
 import {View} from 'backbone.marionette';
 import router from '../../router';
 import settings from '../../util/settings';

allure-generator/src/main/javascript/components/tree/styles.css → allure-generator/src/main/javascript/components/tree/styles.scss

@@ -1,4 +1,4 @@
-@import "../../variables.css";
+@import "../../variables.scss";
 
 .node {
   margin-left: 0;

allure-generator/src/main/javascript/components/widgets-grid/WidgetsGridView.js

@@ -1,4 +1,4 @@
-import './styles.css';
+import './styles.scss';
 import {View} from 'backbone.marionette';
 import $ from 'jquery';
 import Sortable from 'sortablejs';

allure-generator/src/main/javascript/components/widgets-grid/styles.css → allure-generator/src/main/javascript/components/widgets-grid/styles.scss

@@ -1,4 +1,4 @@
-@import "../../variables.css";
+@import "../../variables.scss";
 
 .widgets-grid {
   position: absolute;

allure-generator/src/main/javascript/index.js

@@ -3,8 +3,8 @@ import $ from 'jquery';
 
 import 'file-loader?name=favicon.ico!./favicon.ico';
 
-import './blocks/arrow/styles.css';
-import './blocks/executor-icon/styles.css';
+import './blocks/arrow/styles.scss';
+import './blocks/executor-icon/styles.scss';
 
 import './pluginApi';