migrate from sass to PostCSS (#142)

closes #135

web/app/components/comment/_editing/comment_editing.scss

@@ -12,7 +12,7 @@
     right: 0;
   }
 
-  // it isn't mobile first, but it's fine here
+  /* it isn't mobile first, but it's fine here */
   @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) {
     border: 8px solid #eee;
     padding-bottom: 0;

web/app/components/comment/_level/comment_level.scss

@@ -1,14 +1,14 @@
 $step: 24px;
 
-@for $i from 1 through 5 {
+@for $i from 1 to 5 {
   .comment_level {
-    &_#{$i} {
-      padding-left: $i * $step;
+    &_$(i) {
+      padding-left: calc($i * $step);
 
       &.comment_replying {
         .comment__input {
           @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) {
-            margin-left: -$i * $step;
+            margin-left: calc(-$i * $step);
           }
         }
       }

web/app/components/comment/_replying/comment_replying.scss

@@ -8,7 +8,7 @@
     right: 0;
   }
 
-  // it isn't mobile first, but it's fine here
+  /* it isn't mobile first, but it's fine here */
   @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) {
     border: 8px solid #eee;
     padding-bottom: 0;

web/app/components/input/__field/input__field.scss

@@ -3,7 +3,7 @@
   $fontSize: 16px;
   $paddingVrt: 10px;
   $lines: 3;
-  $height: $fontSize * $lineHeight * $lines + $paddingVrt * 2;
+  $height: calc($fontSize * $lineHeight * $lines+$paddingVrt * 2);
 
   box-sizing: border-box;
   width: 100%;
@@ -17,8 +17,8 @@
   background: #fff;
   border: 0;
   resize: none;
-  backface-visibility: hidden; // let's try to fix blinking in Safari
-  transform: translateZ(0); // let's try to fix blinking in Safari, again
+  backface-visibility: hidden; /* let's try to fix blinking in Safari */
+  transform: translateZ(0); /* let's try to fix blinking in Safari, again */
 
   &:focus {
     box-shadow: inset 0 0 0 2px #259c9a;

web/app/components/input/input.scss

@@ -4,5 +4,5 @@
   font-size: 0;
   border: 12px solid #eee;
   border-radius: 2px;
-  background: #fff; // try to fix textarea blinking in Safari
+  background: #fff; /* try to fix textarea blinking in Safari */
 }

web/app/components/raw-content/raw-content.scss

@@ -8,7 +8,7 @@
       margin-top: 8px;
     }
 
-    // imported comments have br instead of p
+    /* imported comments have br instead of p */
     br {
       content: '';
       display: block;
@@ -125,7 +125,7 @@
   sub {
     sup,
     sub {
-      vertical-align: middle; // to prevent some visual cheats
+      vertical-align: middle; /* to prevent some visual cheats */
     }
   }
 }

web/package.json

@@ -34,8 +34,8 @@
     "cross-env": "^5.2.0",
     "css-loader": "^0.28.11",
     "eslint": "^4.19.1",
-    "eslint-plugin-jsx-a11y": "^6.1.0",
     "eslint-config-prettier": "^2.9.0",
+    "eslint-plugin-jsx-a11y": "^6.1.0",
     "eslint-plugin-prettier": "^2.6.1",
     "eslint-plugin-react": "^7.10.0",
     "extract-text-webpack-plugin": "^3.0.2",
@@ -44,13 +44,15 @@
     "husky": "^0.14.3",
     "jest": "^23.1.0",
     "lint-staged": "^7.2.0",
-    "node-sass": "sass/node-sass#v5",
+    "postcss-calc": "^6.0.1",
     "postcss-csso": "^2.0.0",
+    "postcss-for": "^2.1.1",
     "postcss-loader": "^2.1.5",
+    "postcss-nested": "^3.0.0",
+    "postcss-simple-vars": "^4.1.0",
     "postcss-url": "^6.3.1",
     "postcss-wrap": "0.0.4",
     "prettier": "^1.13.7",
-    "sass-loader": "^6.0.7",
     "style-loader": "^0.19.1",
     "webpack": "^3.12.0",
     "webpack-bundle-analyzer": "^2.13.1",

web/webpack.config.js

@@ -24,6 +24,10 @@ const commonStyleLoaders = [
     loader: 'postcss-loader',
     options: {
       plugins: [
+        require('postcss-for'),
+        require('postcss-simple-vars'),
+        require('postcss-nested'),
+        require('postcss-calc'),
         require('autoprefixer')({ browsers: ['> 1%'] }),
         require('postcss-url')({ url: 'inline', maxSize: 5 }),
         require('postcss-wrap')({ selector: `#${NODE_ID}` }),
@@ -31,12 +35,6 @@ const commonStyleLoaders = [
       ],
     },
   },
-  {
-    loader: 'sass-loader',
-    options: {
-      includePaths: [path.resolve(__dirname, 'app')],
-    },
-  },
 ];
 
 module.exports = {