Use cssnano for removing whitespace

Author: MadLittleMods

gulpfile.js

@@ -22,16 +22,14 @@
     "bluebird": "^3.5.0",
     "chai": "^4.1.1",
     "chai-as-promised": "^7.1.1",
-    "clean-css": "^4.1.7",
+    "cssnano": "^4.0.0",
     "eslint": "^4.4.1",
     "eslint-plugin-react": "^7.1.0",
-    "gulp": "^3.8.11",
-    "gulp-eslint": "^4.0.0",
-    "gulp-mocha": "^4.3.1",
-    "mocha": "^3.5.0"
+    "mocha": "^3.5.0",
+    "postcss-normalize-whitespace": "^4.0.0"
   },
   "scripts": {
-    "test": "gulp",
+    "test": "mocha",
     "lint": "eslint ."
   }
 }

package.json

@@ -1,13 +1,13 @@
 :root {
-    --width: 100px;
+	--width: 100px;
 }
 
 @media (max-width: 1000px) {
-    :root {
-        --width: 200px;
-    }
+	:root {
+		--width: 200px;
+	}
 }
 
 .box {
-    width: var(--width);
+	width: var(--width);
 }

test/fixtures/preserve-variables-in-media.css

@@ -1,22 +1,21 @@
 :root {
-    --width: 100px;
+	--width: 100px;
 }
 
 @media (max-width: 1000px) {
-    :root {
-        --width: 200px;
-    }
+	:root {
+		--width: 200px;
+	}
 }
 
 .box {
-    width: 100px;
-    width: var(--width);
+	width: 100px;
+	width: var(--width);
 }
 
 @media (max-width: 1000px) {
-
-    .box {
-        width: 200px;
-        width: var(--width);
-    }
+	.box {
+		width: 200px;
+		width: var(--width);
+	}
 }

test/fixtures/preserve-variables-in-media.expected.css

@@ -9,8 +9,8 @@ chai.use(chaiAsPromised);
 
 var postcss = require('postcss');
 var cssvariables = require('../');
-
-var CleanCSS = require('clean-css');
+var cssnano = require('cssnano');
+var normalizeWhitespace = require('postcss-normalize-whitespace');
 
 var MOCK_JS_VARIABLES =  {
 	'--js-defined1': '75px',
@@ -23,31 +23,33 @@ var MOCK_JS_VARIABLES =  {
 
 var testPlugin = function(filePath, expectedFilePath, options) {
 	options = options || {};
-	return fs.readFileAsync(filePath)
-		.then(function(buffer) {
-			var contents = String(buffer);
-			var actual = postcss(cssvariables(options)).process(contents);
-
-			return actual.css;
+	return Promise.props({
+		actualBuffer: fs.readFileAsync(filePath),
+		expectedBuffer: fs.readFileAsync(expectedFilePath)
+	})
+		.then(function({ actualBuffer, expectedBuffer }) {
+			var actualResult = postcss([
+				cssvariables(options),
+				cssnano({
+					preset: { plugins: [normalizeWhitespace] }
+				})
+			])
+				.process(String(actualBuffer));
+
+			var expectedResult = postcss([
+				cssnano({
+					preset: { plugins: [normalizeWhitespace] }
+				})
+			])
+				.process(String(expectedBuffer));
+
+			return Promise.props({
+				actualResult: actualResult,
+				expectedResult: expectedResult
+			});
 		})
-		.then(function(actual) {
-			return fs.readFileAsync(expectedFilePath)
-				.then(function(buffer) {
-					var contents = String(buffer);
-
-					var cleanCss = new CleanCSS({
-						advanced: false,
-						aggressiveMerging: false,
-						mediaMerging: false,
-						restructuring: false,
-						shorthandCompacting: false,
-						//keepBreaks: true,
-						compatibility: '-properties.merging'
-					});
-
-					expect(cleanCss.minify(actual).styles).to.equal(cleanCss.minify(contents).styles);
-					//expect(actual).to.equal(contents);
-				});
+		.then(({ actualResult, expectedResult }) => {
+			expect(actualResult.css.replace(/\r?\n/g, '')).to.equal(expectedResult.css.replace(/\r?\n/g, ''));
 		});
 };