Add SASS compilation and sync the CSS files

.stylelintrc.json

@@ -8,6 +8,8 @@
     "rules": {
         "font-family-no-missing-generic-family-keyword": null,
         "no-descending-specificity": null,
-        "block-no-empty": null
+        "block-no-empty": null,
+        "no-duplicate-selectors": null,
+        "font-family-no-duplicate-names": null
     }
 }

package.json

@@ -17,10 +17,12 @@
       "url": "https://github.com/Automattic/_s/issues"
     },
     "devDependencies": {
-      "@wordpress/scripts": "^7.2.0"
+        "node-sass": "^4.13.1",
+        "@wordpress/scripts": "^7.2.0"
     },
     "scripts": {
-      "lint:scss": "wp-scripts lint-style 'sass/**/*.scss'",
-      "lint:js": "wp-scripts lint-js 'js/*.js'"
+        "compile:css": "node-sass sass/style.scss style.css && node-sass sass/woocommerce.scss woocommerce.css && stylelint '*.css' --fix || true && stylelint '*.css' --fix",
+        "lint:scss": "wp-scripts lint-style 'sass/**/*.scss'",
+        "lint:js": "wp-scripts lint-js 'js/*.js'"
     }
 }

rtl.css

@@ -1,8 +1,8 @@
 /*
 Theme Name: _s
 
-Adding support for languages written in a Right To Left (RTL) direction is easy -
-it's just a matter of overwriting all the horizontal positioning attributes
+Adding support for languages written in a Right To Left (RTL) direction is easy.
+It's just a matter of overwriting all the horizontal positioning attributes
 of your CSS stylesheet in a separate stylesheet file named rtl.css.
 
 https://codex.wordpress.org/Right-to-Left_Language_Support

sass/_normalize.scss

@@ -9,8 +9,8 @@
  */
 
 html {
-	line-height: 1.15; /* 1 */
-	-webkit-text-size-adjust: 100%; /* 2 */
+	line-height: 1.15;
+	-webkit-text-size-adjust: 100%;
 }
 
 /* Sections
@@ -43,9 +43,9 @@ h1 {
  */
 
 hr {
-	box-sizing: content-box; /* 1 */
-	height: 0; /* 1 */
-	overflow: visible; /* 2 */
+	box-sizing: content-box;
+	height: 0;
+	overflow: visible;
 }
 
 /**
@@ -54,8 +54,8 @@ hr {
  */
 
 pre {
-	font-family: monospace, monospace; /* 1 */
-	font-size: 1em; /* 2 */
+	font-family: monospace, monospace;
+	font-size: 1em;
 }
 
 /* Text-level semantics
@@ -75,9 +75,9 @@ a {
  */
 
 abbr[title] {
-	border-bottom: none; /* 1 */
-	text-decoration: underline; /* 2 */
-	text-decoration: underline dotted; /* 2 */
+	border-bottom: none;
+	text-decoration: underline;
+	text-decoration: underline dotted;
 }
 
 /**
@@ -97,8 +97,8 @@ strong {
 code,
 kbd,
 samp {
-	font-family: monospace, monospace; /* 1 */
-	font-size: 1em; /* 2 */
+	font-family: monospace, monospace;
+	font-size: 1em;
 }
 
 /**
@@ -154,10 +154,10 @@ input,
 optgroup,
 select,
 textarea {
-	font-family: inherit; /* 1 */
-	font-size: 100%; /* 1 */
-	line-height: 1.15; /* 1 */
-	margin: 0; /* 2 */
+	font-family: inherit;
+	font-size: 100%;
+	line-height: 1.15;
+	margin: 0;
 }
 
 /**
@@ -166,7 +166,7 @@ textarea {
  */
 
 button,
-input { /* 1 */
+input {
 	overflow: visible;
 }
 
@@ -176,7 +176,7 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
+select {
 	text-transform: none;
 }
 
@@ -230,12 +230,12 @@ fieldset {
  */
 
 legend {
-	box-sizing: border-box; /* 1 */
-	color: inherit; /* 2 */
-	display: table; /* 1 */
-	max-width: 100%; /* 1 */
-	padding: 0; /* 3 */
-	white-space: normal; /* 1 */
+	box-sizing: border-box;
+	color: inherit;
+	display: table;
+	max-width: 100%;
+	padding: 0;
+	white-space: normal;
 }
 
 /**
@@ -261,8 +261,8 @@ textarea {
 
 [type="checkbox"],
 [type="radio"] {
-	box-sizing: border-box; /* 1 */
-	padding: 0; /* 2 */
+	box-sizing: border-box;
+	padding: 0;
 }
 
 /**
@@ -280,8 +280,8 @@ textarea {
  */
 
 [type="search"] {
-	-webkit-appearance: textfield; /* 1 */
-	outline-offset: -2px; /* 2 */
+	-webkit-appearance: textfield;
+	outline-offset: -2px;
 }
 
 /**
@@ -298,8 +298,8 @@ textarea {
  */
 
 ::-webkit-file-upload-button {
-	-webkit-appearance: button; /* 1 */
-	font: inherit; /* 2 */
+	-webkit-appearance: button;
+	font: inherit;
 }
 
 /* Interactive

sass/elements/_elements.scss

@@ -11,7 +11,7 @@ html {
 }
 
 body {
-	background: $color__background-body; /* Fallback for when there is no custom background color defined. */
+	background: $color__background-body; // Fallback for when there is no custom background color defined.
 }
 
 hr {
@@ -24,12 +24,12 @@ hr {
 @import "lists";
 
 img {
-	height: auto; /* Make sure images are scaled correctly. */
-	max-width: 100%; /* Adhere to container width. */
+	height: auto; // Make sure images are scaled correctly.
+	max-width: 100%; // Adhere to container width.
 }
 
 figure {
-	margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */
+	margin: 1em 0; // Extra wide images within figure tags don't overflow the content area.
 }
 
 @import "tables";

sass/modules/_accessibility.scss

@@ -9,7 +9,7 @@
 	padding: 0;
 	position: absolute !important;
 	width: 1px;
-	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+	word-wrap: normal !important; // Many screen reader and browser combinations announce broken words as they would appear visually.
 
 	&:focus {
 		background-color: $color__background-screen;
@@ -30,7 +30,7 @@
 		text-decoration: none;
 		top: 5px;
 		width: auto;
-		z-index: 100000; /* Above WP toolbar. */
+		z-index: 100000; // Above WP toolbar.
 	}
 }
 

sass/modules/_infinite-scroll.scss

@@ -1,6 +1,5 @@
-/* Hide the Older / Newer Posts Navigation when Infinite Scroll is in use. */
+/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
 .infinite-scroll .posts-navigation,
-/* Hide the Theme Footer (when set to scrolling) */
 .infinite-scroll.neverending .site-footer {
 	display: none;
 }

sass/shop/_checkout.scss

@@ -1,6 +1,3 @@
-/**
- * Checkout
- */
 @media screen and (min-width: 768px) {
 
 	.col2-set {

sass/shop/_products.scss

@@ -1,6 +1,3 @@
-/**
- * Products
- */
 ul.products {
 
 	@include clearfix;

sass/shop/_single-product.scss

@@ -1,6 +1,3 @@
-/**
- * Single Product
- */
 .single-product {
 
 	div.product {

sass/shop/_tables.scss

@@ -1,6 +1,3 @@
-/**
- * Shop tables
- */
 table.shop_table_responsive {
 
 	thead {

sass/site/secondary/_widgets.scss

@@ -1,7 +1,7 @@
 .widget {
 	margin: 0 0 1.5em;
 
-	/* Make sure select elements fit in widgets. */
+	// Make sure select elements fit in widgets.
 	select {
 		max-width: 100%;
 	}

sass/woocommerce.scss

@@ -4,16 +4,12 @@ Theme Name: _s
 WooCommerce styles override
 */
 
-/**
- * WooCommerce color variables
- */
+// WooCommerce color variables
 $woocommerce__color-error: #e2401c;
 $woocommerce__color-success: #0f834d;
 $woocommerce__color-info: #3d9cd2;
 
-/**
- * Imports
- */
+// Imports
 @import "variables-site/variables-site";
 @import "mixins/mixins-master";