Add support for HTML

hudochenkov · hudochenkov · commit 6d6c8b6c7ad4 · 2019-03-02T23:52:44.000+01:00
diff --git a/jest-setup.js b/jest-setup.js
@@ -3,6 +3,7 @@ const path = require('path');
 const plugin = require('./');
 const postcss = require('postcss');
 const jsx = require('postcss-jsx');
+const html = require('postcss-html');
 
 global.groupTest = function(testGroups) {
 	testGroups.forEach(group => {
@@ -51,10 +52,20 @@ global.runTest = function(input, opts, dirname) {
 		fs.writeFileSync(expectPath, expectCSS);
 	}
 
+	let syntax;
+
+	if (inputExt === 'js') {
+		syntax = jsx;
+	}
+
+	if (inputExt === 'html') {
+		syntax = html;
+	}
+
 	return postcss([plugin(opts)])
 		.process(inputCSS, {
 			from: inputPath,
-			syntax: inputExt === 'js' ? jsx : undefined,
+			syntax,
 		})
 		.then(result => {
 			const actualCSS = result.css;
diff --git a/lib/properties-order/__tests__/fixtures/properties-style-attribute.expected.html b/lib/properties-order/__tests__/fixtures/properties-style-attribute.expected.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+	<div style="position: absolute;top: 0;display: block;z-index: 2;"></div>
+</body>
+</html>
diff --git a/lib/properties-order/__tests__/fixtures/properties-style-attribute.html b/lib/properties-order/__tests__/fixtures/properties-style-attribute.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+	<div style="z-index: 2;top: 0;position: absolute;display: block;"></div>
+</body>
+</html>
diff --git a/lib/properties-order/__tests__/fixtures/properties-style-tag.expected.html b/lib/properties-order/__tests__/fixtures/properties-style-tag.expected.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<style>
+		a {
+			position: absolute;
+			top: 0;
+			display: block;
+			z-index: 2;
+		}
+	</style>
+</head>
+<body>
+</body>
+</html>
diff --git a/lib/properties-order/__tests__/fixtures/properties-style-tag.html b/lib/properties-order/__tests__/fixtures/properties-style-tag.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<style>
+		a {
+			z-index: 2;
+			top: 0;
+			position: absolute;
+			display: block;
+		}
+	</style>
+</head>
+<body>
+</body>
+</html>
diff --git a/lib/properties-order/__tests__/properties-order.js b/lib/properties-order/__tests__/properties-order.js
@@ -207,3 +207,21 @@ test('Ignore template literals in nested components (styled)', () =>
 		},
 		__dirname
 	));
+
+test('Should sort properties (html, <style> tag)', () =>
+	runTest(
+		'properties-style-tag.html',
+		{
+			'properties-order': ['position', 'top', 'display', 'z-index'],
+		},
+		__dirname
+	));
+
+test('Should sort properties (html, style attribute)', () =>
+	runTest(
+		'properties-style-attribute.html',
+		{
+			'properties-order': ['position', 'top', 'display', 'z-index'],
+		},
+		__dirname
+	));
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "jest": "^23.4.1",
     "jest-watch-typeahead": "^0.2.1",
     "lint-staged": "^8.0.4",
+    "postcss-html": "^0.36.0",
     "postcss-jsx": "^0.36.0",
     "postcss-syntax": "^0.36.2",
     "prettier": "~1.16.4"

-Original file line number
+Diff line change
@@ @@ -0,0 +1,6 @@ @@
 +<!DOCTYPE html>
 +<html>
 +<body>
 +	<div style="position: absolute;top: 0;display: block;z-index: 2;"></div>
 +</body>
 +</html>