Add a SASS watcher command (#1427)

* Add a SASS watcher command

* Simplify the compile:css command

.gitignore

@@ -2,3 +2,4 @@
 /vendor
 package-lock.json
 composer.lock
+style.css.map

README.md

@@ -60,6 +60,7 @@ $ npm install
 - `composer make-pot` : generates a .pot file in the `language/` directory.
 - `npm run compile:css` : compiles SASS files to css.
 - `npm run compile:rtl` : generates an RTL stylesheet.
+- `npm run watch` : watches all SASS files and recompiles them to css when they change.
 - `npm run lint:scss` : checks all SASS files against [CSS Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/).
 - `npm run lint:js` : checks all JavaScript files against [JavaScript Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/).
 - `npm run bundle` : generates a .zip archive for distribution, excluding development and system files.

bin/bundle.js

@@ -24,6 +24,7 @@ const excludes = [
 	'.travis.yml',
 	'phpcs.xml.dist',
 	'sass',
+	'style.css.map',
 ];
 
 // The path of the zip file.

package.json

@@ -36,7 +36,8 @@
     "map": false
   },
   "scripts": {
-    "compile:css": "node-sass sass/style.scss style.css && node-sass sass/woocommerce.scss woocommerce.css && stylelint '*.css' --fix || true && stylelint '*.css' --fix",
+    "watch": "node-sass sass/ -o ./ --source-map true --output-style expanded --indent-type tab --indent-width 1 -w",
+    "compile:css": "node-sass sass/ -o ./ && stylelint '*.css' --fix || true && stylelint '*.css' --fix",
     "compile:rtl": "rtlcss style.css style-rtl.css",
     "lint:scss": "wp-scripts lint-style 'sass/**/*.scss'",
     "lint:js": "wp-scripts lint-js 'js/*.js'",