Replace Stylus with SCSS, update watch and compile tasks

[MAILPOET-1813]

README.md

@@ -53,7 +53,7 @@ $ ./do compile:all
 - [Docker](https://www.docker.com/), [Docker Compose](https://docs.docker.com/compose/) and [Selenium](https://www.seleniumhq.org/) to run acceptance tests.
 - [React](https://reactjs.org/) is used to create most of UIs.
 - [Marionette](https://marionettejs.com/) is used to build the newsletters editor.
-- [Stylus](http://stylus-lang.com/) is used to write styles.
+- [SCSS](http://sass-lang.com/) is used to write styles.
 - [Mocha](https://mochajs.org/), [Chai](https://www.chaijs.com/) and [Sinon](https://sinonjs.org/) are used to write Javascript tests.
 - [ESLint](https://eslint.org/) is used to lint JS files.
 - [Webpack](https://webpack.js.org/) is used to bundle assets.
@@ -64,7 +64,7 @@ $ ./do compile:all
 $ ./do install             # install PHP and JS dependencies
 $ ./do update              # update PHP and JS dependencies
 
-$ ./do compile:css         # compiles Stylus files into CSS.
+$ ./do compile:css         # compiles SCSS files into CSS.
 $ ./do compile:js          # bundles JS files for the browser.
 $ ./do compile:all         # compiles CSS and JS files.
 

RoboFile.php

@@ -43,7 +43,7 @@ class RoboFile extends \Robo\Tasks {
   }
 
   function watch() {
-    $css_files = $this->rsearch('assets/css/src/', array('styl'));
+    $css_files = $this->rsearch('assets/css/src/', array('scss'));
     $js_files = $this->rsearch('assets/js/src/', array('js', 'jsx'));
 
     $this->taskWatch()
@@ -57,7 +57,7 @@ class RoboFile extends \Robo\Tasks {
   }
 
   function watchCss() {
-    $css_files = $this->rsearch('assets/css/src/', array('styl'));
+    $css_files = $this->rsearch('assets/css/src/', array('scss'));
     $this->taskWatch()
       ->monitor($css_files, function() {
         $this->compileCss();
@@ -97,23 +97,23 @@ class RoboFile extends \Robo\Tasks {
     // Clean up folder from previous files
     array_map('unlink', glob("assets/dist/css/*.*"));
 
-    $css_files = array(
-      'assets/css/src/admin.styl',
-      'assets/css/src/admin-global.styl',
-      'assets/css/src/newsletter_editor/newsletter_editor.styl',
-      'assets/css/src/public.styl',
-      'assets/css/src/rtl.styl',
-      'assets/css/src/importExport.styl'
+    $scss_files = array(
+      'assets/css/src/admin.scss',
+      'assets/css/src/adminGlobal.scss',
+      'assets/css/src/newsletterEditor.scss',
+      'assets/css/src/public.scss',
+      'assets/css/src/rtl.scss',
+      'assets/css/src/importExport.scss',
     );
 
+    foreach ($scss_files as $file) {
       $compilation_result = $this->_exec(join(' ', array(
-      './node_modules/stylus/bin/stylus',
-      '--include ./node_modules',
-      '--include-css',
-      '-u nib',
-      join(' ', $css_files),
-      '-o assets/dist/css/'
+        './node_modules/node-sass/bin/node-sass',
+        $file,
+        '--output assets/dist/css/',
+        '--output-style compact',
       )));
+    }
 
     // Create manifest file
     $manifest = [];

lib/Config/Capabilities.php

@@ -61,7 +61,7 @@ class Capabilities {
   function enqueueMembersStyles() {
     wp_enqueue_style(
       'mailpoet-admin-global',
-      Env::$assets_url . '/dist/css/' . $this->renderer->getCssAsset('admin-global.css')
+      Env::$assets_url . '/dist/css/' . $this->renderer->getCssAsset('adminGlobal.css')
     );
   }
 

package.json

@@ -83,10 +83,9 @@
     "jsdom": "^11.12.0",
     "json-loader": "^0.5.7",
     "mocha": "^5.2.0",
-    "nib": "~1.1.2",
+    "node-sass": "^4.11.0",
     "sinon": "1.14.1",
     "sinon-chai": "2.7.0",
-    "stylus": "~0.54.5",
     "terser-webpack-plugin": "^1.2.2",
     "webpack": "^4.28.1",
     "webpack-cli": "^3.2.1",

views/newsletter/editor.html

@@ -377,7 +377,7 @@
 
 <% block after_css %>
   <%= stylesheet(
-    'newsletter_editor.css'
+    'newsletterEditor.css'
   ) %>
 <% endblock %>