From 27fc314b5563e0a82bb5d0993dc7c1268bb727b6 Mon Sep 17 00:00:00 2001
From: Ismail El Korchi <ismail.elkorchi@gmail.com>
Date: Sun, 10 May 2020 00:58:16 +0000
Subject: [PATCH] Add a SASS watcher command (#1427)

* Add a SASS watcher command

* Simplify the compile:css command
---
 .gitignore    | 1 +
 README.md     | 1 +
 bin/bundle.js | 1 +
 package.json  | 3 ++-
 4 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index fff7c8f..aa42ccb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 /vendor
 package-lock.json
 composer.lock
+style.css.map
\ No newline at end of file
diff --git a/README.md b/README.md
index d2beab0..0702a92 100644
--- a/README.md
+++ b/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.
diff --git a/bin/bundle.js b/bin/bundle.js
index 8ba5311..8c10a28 100644
--- a/bin/bundle.js
+++ b/bin/bundle.js
@@ -24,6 +24,7 @@ const excludes = [
 	'.travis.yml',
 	'phpcs.xml.dist',
 	'sass',
+	'style.css.map',
 ];
 
 // The path of the zip file.
diff --git a/package.json b/package.json
index c632f65..50bcaaa 100644
--- a/package.json
+++ b/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'",