Sass (#34)

* rename css to scss

* add sass

Author: codeBelt

.stylelintrc

@@ -6,6 +6,7 @@
   "rules": {
     "indentation": 4,
     "color-hex-length": "long",
-    "order/properties-alphabetical-order": true
+    "order/properties-alphabetical-order": true,
+    "at-rule-no-unknown": null
   }
 }

package.json

@@ -77,13 +77,11 @@
     "extract-text-webpack-plugin": "3.0.2",
     "html-webpack-harddisk-plugin": "0.2.0",
     "html-webpack-plugin": "3.0.6",
+    "node-sass": "4.8.1",
     "nodemon": "1.17.2",
-    "postcss-apply": "0.9.0",
-    "postcss-cssnext": "3.1.0",
-    "postcss-import": "11.1.0",
-    "postcss-loader": "2.1.1",
     "rimraf": "2.6.2",
     "robotstxt-webpack-plugin": "4.0.1",
+    "sass-loader": "6.0.7",
     "style-loader": "0.20.3",
     "stylelint": "9.1.3",
     "stylelint-config-standard": "18.2.0",
@@ -95,7 +93,7 @@
   },
   "dependencies": {
     "babel-polyfill": "6.26.0",
-    "bootstrap": "next",
+    "bootstrap": "4.0.0",
     "classnames": "2.2.5",
     "fetch-everywhere": "1.0.5",
     "form2js": "1.0.0",

postcss.config.js

@@ -1,4 +1,4 @@
 form:not(.u-validate) input:invalid {
     background-color: #fafad2;
-    border: 1px solid var(--COLOR_BRAND_PRIMARY);
+    border: 1px solid $COLOR_BRAND_PRIMARY;
 }

src/assets/styles/base/elements.css src/assets/styles/base/elements.scss

@@ -6,21 +6,21 @@
 .inputField-input {
     appearance: none;
     background-color: #ffffff;
-    border: 1px solid var(--COLOR_DARKGRAY_MEDIUM);
-    box-shadow: inset 0 0 0 1px color(var(--COLOR_PRIMARY) alpha(0%));
+    border: 1px solid $COLOR_DARKGRAY_MEDIUM;
+    box-shadow: inset 0 0 0 1px rgba($COLOR_PRIMARY, 0);
     font-size: 16px;
     max-width: 100%;
     padding: 9px;
     transition:
-        border-color 300ms var(--EASE_IN_QUAD),
-        box-shadow 300ms var(--EASE_IN_QUAD);
+        border-color 300ms $EASE_IN_QUAD,
+        box-shadow 300ms $EASE_IN_QUAD;
 
     &:focus {
-        border-color: var(--COLOR_PRIMARY);
-        box-shadow: inset 0 0 0 1px color(var(--COLOR_PRIMARY) alpha(100%));
+        border-color: $COLOR_PRIMARY;
+        box-shadow: inset 0 0 0 1px rgba($COLOR_PRIMARY, 100%);
         transition:
-            border-color 250ms var(--EASE_OUT_QUAD),
-            box-shadow 250ms var(--EASE_OUT_QUAD);
+            border-color 250ms $EASE_OUT_QUAD,
+            box-shadow 250ms $EASE_OUT_QUAD;
     }
 }
 
@@ -36,5 +36,5 @@
 }
 
 .inputField_noLabel .inputField-label {
-    @apply --isVisuallyHidden;
+    @include isVisuallyHidden;
 }

src/assets/styles/components/inputField.css src/assets/styles/components/inputField.scss

@@ -6,15 +6,7 @@
     position: fixed;
     right: 0;
     top: 0;
-    z-index: var(--Z_INDEX_MODAL);
-
-    @media (--SM) {
-        padding-top: 50px;
-    }
-
-    @media (--MD) {
-        padding-top: 100px;
-    }
+    z-index: 6;
 }
 
 .modal-overlay {
@@ -23,11 +15,10 @@
     bottom: 0;
     cursor: pointer;
     left: 0;
-    opacity: 0;
     position: fixed;
     right: 0;
     top: 0;
-    z-index: var(--Z_INDEX_MODAL_OVERLAY);
+    z-index: 7;
 }
 
 .modal-overlay_required {
@@ -46,23 +37,12 @@
     margin: auto auto 5px;
     max-width: 800px;
     min-height: 250px;
-    opacity: 0;
     overflow: hidden;
     padding: 20px;
     position: relative;
     transform: translateY(-5px);
     width: calc(100% - 10px);
-    z-index: var(--Z_INDEX_MODAL_CONTENT);
-
-    @media (--SM) {
-        margin-bottom: 20px;
-        transform: translateY(-50px);
-    }
-
-    @media (--MD) {
-        margin-bottom: 20px;
-        transform: translateY(-100px);
-    }
+    z-index: 8;
 }
 
 .modal-content_sm {
@@ -148,11 +128,6 @@
 .modal-footer_stack {
     display: block;
 
-    @media (--XS) {
-        display: flex;
-        justify-content: flex-end;
-    }
-
     & > * {
         margin-bottom: 10px;
         width: 100%;

src/assets/styles/components/modal.css src/assets/styles/components/modal.scss

@@ -0,0 +1,4 @@
+/* stylelint-disable number-no-trailing-zeros */
+$EASE_IN_QUAD: cubic-bezier(0.550, 0.085, 0.680, 0.530);
+$EASE_OUT_QUAD: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+$EASE_OUT_CUBIC: cubic-bezier(0.215, 0.610, 0.355, 1.000);

src/assets/styles/components/modalForm.css src/assets/styles/components/modalForm.scss

@@ -0,0 +1,20 @@
+/* utils
+------------------------------------------------- */
+@mixin isVisuallyHidden() {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+.u-isHidden {
+    display: none !important;
+}
+
+.u-isVisuallyHidden {
+    @include isVisuallyHidden;
+}

src/assets/styles/helpers/easing.css

@@ -0,0 +1,10 @@
+/* vars
+------------------------------------------------- */
+$COLOR_PRIMARY: rgb(0, 200, 230);
+$COLOR_SECONDARY: rgb(0, 60, 230);
+$COLOR_BRAND_PRIMARY: rgb(255, 0, 0);
+$COLOR_DARKGRAY_MEDIUM: rgb(112, 112, 112);
+
+$XS: 32.5rem;
+$SM: 48rem;
+$MD: 60rem;

src/assets/styles/helpers/easing.scss

@@ -1,17 +1,8 @@
-@import "styles";
-
-/* base
-------------------------------------------------- */
-@import "base/elements";
-
-/* helpers
-------------------------------------------------- */
-@import "helpers/easing";
 @import "helpers/vars";
 @import "helpers/utils";
-
-/* components
-------------------------------------------------- */
+@import "helpers/easing";
+@import "base/elements";
 @import "components/inputField";
 @import "components/modal";
 @import "components/modalForm";
+@import "styles";

src/assets/styles/helpers/utils.css

@@ -1,5 +1,5 @@
 import 'bootstrap/dist/css/bootstrap.css';
-import './assets/styles/screen.css';
+import './assets/styles/screen.scss';
 
 import 'fetch-everywhere';
 import React from 'react';

src/assets/styles/helpers/utils.scss

@@ -46,7 +46,7 @@ const webpackConfig = {
     module: {
         rules: [
             {
-                test: /\.css$/,
+                test: /\.s?css$/,
                 use: ['css-hot-loader'].concat(
                     ExtractTextPlugin.extract({
                         fallback: 'style-loader',
@@ -59,13 +59,10 @@ const webpackConfig = {
                                 },
                             },
                             {
-                                loader: 'postcss-loader',
+                                loader: 'sass-loader',
                                 options: {
-                                    sourceMap: !isProduction,
-                                    config: {
-                                        path: './postcss.config.js',
-                                    },
-                                },
+                                    sourceMap: !isProduction
+                                }
                             },
                         ],
                     })