feat: add CSS, SCSS and LESS support (#23)

kihayu · Keanu Hie · web-flow · commit 2c7ff0f0bc1d · 2021-02-09T09:57:16.000+01:00
Co-authored-by: Keanu Hie &lt;keanu.hie@strg.at&gt;
diff --git a/src/index.js b/src/index.js
@@ -2,6 +2,7 @@ import prettierParserHTML from 'prettier/parser-html'
 import prettierParserFlow from 'prettier/parser-flow'
 import prettierParserTypescript from 'prettier/parser-typescript'
 import prettierParserBabel from 'prettier/parser-babel'
+import prettierParserPostCss from 'prettier/parser-postcss'
 import { getParse } from './parser'
 import { options } from './options'
 
@@ -25,6 +26,21 @@ const languages = [
 		name: 'Tailwind Vue',
 		extensions: ['.vue'],
 		parsers: ['vue']
+	},
+	{
+		name: 'Tailwind CSS',
+		extensions: ['.css'],
+		parsers: ['css']
+	},
+	{
+		name: 'Tailwind SCSS',
+		extensions: ['.scss'],
+		parsers: ['scss']
+	},
+	{
+		name: 'Tailwind Less',
+		extensions: ['.less'],
+		parsers: ['less']
 	}
 ]
 const parsers = {
@@ -47,6 +63,18 @@ const parsers = {
 	vue: {
 		...prettierParserHTML.parsers.vue,
 		parse: getParse('html', prettierParserHTML.parsers.vue.parse)
+	},
+	css: {
+		...prettierParserPostCss.parsers.css,
+		parse: getParse('css', prettierParserPostCss.parsers.css.parse)
+	},
+	scss: {
+		...prettierParserPostCss.parsers.scss,
+		parse: getParse('scss', prettierParserPostCss.parsers.scss.parse)
+	},
+	less: {
+		...prettierParserPostCss.parsers.less,
+		parse: getParse('less', prettierParserPostCss.parsers.less.parse)
 	}
 }
 
diff --git a/src/regex.json b/src/regex.json
@@ -1,6 +1,9 @@
 {
 	"vue": "\\bclass\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\']",
 	"html": "\\bclass\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\']",
+	"css": "@apply\\s*([_a-zA-Z0-9\\s\\-\\:\\/]+)",
+	"scss": "@apply\\s*([_a-zA-Z0-9\\s\\-\\:\\/]+)",
+	"less": "@apply\\s*([_a-zA-Z0-9\\s\\-\\:\\/]+)",
 	"javascriptreact": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw\\s*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)",
 	"typescriptreact": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw\\s*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)"
 }
diff --git a/test/mocks/css/default_behaviour_formatted.css b/test/mocks/css/default_behaviour_formatted.css
@@ -0,0 +1,3 @@
+a {
+	@apply flex items-center justify-between h-16 max-w-6xl mx-auto;
+}
diff --git a/test/mocks/css/default_behaviour_unformatted.css b/test/mocks/css/default_behaviour_unformatted.css
@@ -0,0 +1,3 @@
+a {
+	@apply mx-auto flex justify-between items-center max-w-6xl h-16;
+}
diff --git a/test/mocks/css/no_duplicate_unknown_formatted.css b/test/mocks/css/no_duplicate_unknown_formatted.css
@@ -0,0 +1,3 @@
+a {
+	@apply unknown;
+}
diff --git a/test/mocks/css/no_duplicate_unknown_unformatted.css b/test/mocks/css/no_duplicate_unknown_unformatted.css
@@ -0,0 +1,3 @@
+a {
+	@apply unknown;
+}
diff --git a/test/mocks/css/no_remove_duplicate_formatted.css b/test/mocks/css/no_remove_duplicate_formatted.css
@@ -0,0 +1,3 @@
+a {
+	@apply dupplicate dupplicate;
+}
diff --git a/test/mocks/css/no_remove_duplicate_unformatted.css b/test/mocks/css/no_remove_duplicate_unformatted.css
@@ -0,0 +1,3 @@
+a {
+	@apply dupplicate dupplicate;
+}
diff --git a/test/mocks/css/remove_duplicate_formatted.css b/test/mocks/css/remove_duplicate_formatted.css
@@ -0,0 +1,3 @@
+a {
+	@apply dupplicate;
+}
diff --git a/test/mocks/css/remove_duplicate_unformatted.css b/test/mocks/css/remove_duplicate_unformatted.css
@@ -0,0 +1,3 @@
+a {
+	@apply dupplicate dupplicate;
+}
diff --git a/test/mocks/less/default_behaviour_formatted.less b/test/mocks/less/default_behaviour_formatted.less
@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply flex items-center justify-between h-16 max-w-6xl mx-auto;
+	}
+}
diff --git a/test/mocks/less/default_behaviour_unformatted.less b/test/mocks/less/default_behaviour_unformatted.less
@@ -0,0 +1,5 @@
+div {
+  	a {
+		@apply mx-auto flex justify-between items-center max-w-6xl h-16;
+	}
+}
diff --git a/test/mocks/less/no_duplicate_unknown_formatted.less b/test/mocks/less/no_duplicate_unknown_formatted.less
@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply unknown;
+	}
+}
diff --git a/test/mocks/less/no_duplicate_unknown_unformatted.less b/test/mocks/less/no_duplicate_unknown_unformatted.less
@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply unknown;
+	}
+}
diff --git a/test/mocks/less/no_remove_duplicate_formatted.less b/test/mocks/less/no_remove_duplicate_formatted.less
@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply dupplicate dupplicate;
+	}
+}
diff --git a/test/mocks/less/no_remove_duplicate_unformatted.less b/test/mocks/less/no_remove_duplicate_unformatted.less
@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply dupplicate dupplicate;
+	}
+}
diff --git a/test/mocks/less/remove_duplicate_formatted.less b/test/mocks/less/remove_duplicate_formatted.less
@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply dupplicate;
+	}
+}
diff --git a/test/mocks/less/remove_duplicate_unformatted.less b/test/mocks/less/remove_duplicate_unformatted.less
@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply dupplicate dupplicate;
+	}
+}
diff --git a/test/mocks/scss/default_behaviour_formatted.scss b/test/mocks/scss/default_behaviour_formatted.scss
@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply flex items-center justify-between h-16 max-w-6xl mx-auto;
+	}
+}
diff --git a/test/mocks/scss/default_behaviour_unformatted.scss b/test/mocks/scss/default_behaviour_unformatted.scss
@@ -0,0 +1,5 @@
+div {
+  	a {
+		@apply mx-auto flex justify-between items-center max-w-6xl h-16;
+	}
+}
diff --git a/test/mocks/scss/no_duplicate_unknown_formatted.scss b/test/mocks/scss/no_duplicate_unknown_formatted.scss
@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply unknown;
+	}
+}
diff --git a/test/mocks/scss/no_duplicate_unknown_unformatted.scss b/test/mocks/scss/no_duplicate_unknown_unformatted.scss
@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply unknown;
+	}
+}
diff --git a/test/mocks/scss/no_remove_duplicate_formatted.scss b/test/mocks/scss/no_remove_duplicate_formatted.scss
@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply dupplicate dupplicate;
+	}
+}
diff --git a/test/mocks/scss/no_remove_duplicate_unformatted.scss b/test/mocks/scss/no_remove_duplicate_unformatted.scss
@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply dupplicate dupplicate;
+	}
+}
diff --git a/test/mocks/scss/remove_duplicate_formatted.scss b/test/mocks/scss/remove_duplicate_formatted.scss
@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply dupplicate;
+	}
+}
diff --git a/test/mocks/scss/remove_duplicate_unformatted.scss b/test/mocks/scss/remove_duplicate_unformatted.scss
@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply dupplicate dupplicate;
+	}
+}
diff --git a/test/plugin.js b/test/plugin.js
@@ -15,26 +15,35 @@ function testOnLanguage(identifier, language, parser, options = {}) {
 	expect(output).toEqual(formatted)
 }
 
-it('should sort classes correcly', () => {
+it('should sort classes correctly', () => {
 	testOnLanguage('default_behaviour', 'html', 'html')
 	testOnLanguage('default_behaviour', 'js', 'babel')
 	testOnLanguage('default_behaviour', 'js', 'flow')
 	testOnLanguage('default_behaviour', 'tsx', 'typescript')
 	testOnLanguage('default_behaviour', 'vue', 'vue')
+	testOnLanguage('default_behaviour', 'css', 'css')
+	testOnLanguage('default_behaviour', 'scss', 'scss')
+	testOnLanguage('default_behaviour', 'less', 'less')
 })
 
 it('should remove duplicate classes by default', () => {
 	testOnLanguage('remove_duplicate', 'html', 'html')
 	testOnLanguage('remove_duplicate', 'js', 'babel')
 	testOnLanguage('remove_duplicate', 'js', 'flow')
 	testOnLanguage('remove_duplicate', 'tsx', 'typescript')
+	testOnLanguage('remove_duplicate', 'css', 'css')
+	testOnLanguage('remove_duplicate', 'scss', 'scss')
+	testOnLanguage('remove_duplicate', 'less', 'less')
 })
 
 it('should not duplicate classes when are unknown', () => {
 	testOnLanguage('no_duplicate_unknown', 'html', 'html')
 	testOnLanguage('no_duplicate_unknown', 'js', 'babel')
 	testOnLanguage('no_duplicate_unknown', 'js', 'flow')
 	testOnLanguage('no_duplicate_unknown', 'tsx', 'typescript')
+	testOnLanguage('no_duplicate_unknown', 'css', 'css')
+	testOnLanguage('no_duplicate_unknown', 'scss', 'scss')
+	testOnLanguage('no_duplicate_unknown', 'less', 'less')
 })
 
 it('should not remove duplicates if options i set to false', () => {
@@ -50,6 +59,15 @@ it('should not remove duplicates if options i set to false', () => {
 	testOnLanguage('no_remove_duplicate', 'tsx', 'typescript', {
 		removeDuplicatesClasses: false
 	})
+	testOnLanguage('no_remove_duplicate', 'css', 'css', {
+		removeDuplicatesClasses: false
+	})
+	testOnLanguage('no_remove_duplicate', 'scss', 'scss', {
+		removeDuplicatesClasses: false
+	})
+	testOnLanguage('no_remove_duplicate', 'less', 'less', {
+		removeDuplicatesClasses: false
+	})
 })
 
 it('should not throw error if regex are malformed', () => {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,9 @@`
`1`	`1`	`{`
`2`	`2`	`"vue": "\\bclass\\s=\\s[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\']",`
`3`	`3`	`"html": "\\bclass\\s=\\s[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\']",`
	`4`	`+ "css": "@apply\\s*([_a-zA-Z0-9\\s\\-\\:\\/]+)",`
	`5`	`+ "scss": "@apply\\s*([_a-zA-Z0-9\\s\\-\\:\\/]+)",`
	`6`	`+ "less": "@apply\\s*([_a-zA-Z0-9\\s\\-\\:\\/]+)",`
`4`	`7`	"javascriptreact": "(?:\\bclassName\\s=\\s[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])\|(?:\\btw\\s`([_a-zA-Z0-9\\s\\-\\:\\/])`)",
`5`	`8`	"typescriptreact": "(?:\\bclassName\\s=\\s[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])\|(?:\\btw\\s`([_a-zA-Z0-9\\s\\-\\:\\/])`)"
`6`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+a {`
	`2`	`+ @apply flex items-center justify-between h-16 max-w-6xl mx-auto;`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+a {`
	`2`	`+ @apply mx-auto flex justify-between items-center max-w-6xl h-16;`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+a {`
	`2`	`+ @apply dupplicate dupplicate;`
	`3`	`+}`