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

Co-authored-by: Keanu Hie <[email protected]>

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)
 	}
 }
 

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\\-\\:\\/]*)`)"
 }

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;
+}

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;
+}

test/mocks/css/no_duplicate_unknown_formatted.css

@@ -0,0 +1,3 @@
+a {
+	@apply unknown;
+}

test/mocks/css/no_duplicate_unknown_unformatted.css

@@ -0,0 +1,3 @@
+a {
+	@apply unknown;
+}

test/mocks/css/no_remove_duplicate_formatted.css

@@ -0,0 +1,3 @@
+a {
+	@apply dupplicate dupplicate;
+}

test/mocks/css/no_remove_duplicate_unformatted.css

@@ -0,0 +1,3 @@
+a {
+	@apply dupplicate dupplicate;
+}

test/mocks/css/remove_duplicate_formatted.css

@@ -0,0 +1,3 @@
+a {
+	@apply dupplicate;
+}

test/mocks/css/remove_duplicate_unformatted.css

@@ -0,0 +1,3 @@
+a {
+	@apply dupplicate dupplicate;
+}

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;
+	}
+}

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;
+	}
+}

test/mocks/less/no_duplicate_unknown_formatted.less

@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply unknown;
+	}
+}

test/mocks/less/no_duplicate_unknown_unformatted.less

@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply unknown;
+	}
+}

test/mocks/less/no_remove_duplicate_formatted.less

@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply dupplicate dupplicate;
+	}
+}

test/mocks/less/no_remove_duplicate_unformatted.less

@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply dupplicate dupplicate;
+	}
+}

test/mocks/less/remove_duplicate_formatted.less

@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply dupplicate;
+	}
+}

test/mocks/less/remove_duplicate_unformatted.less

@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply dupplicate dupplicate;
+	}
+}

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;
+	}
+}

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;
+	}
+}

test/mocks/scss/no_duplicate_unknown_formatted.scss

@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply unknown;
+	}
+}

test/mocks/scss/no_duplicate_unknown_unformatted.scss

@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply unknown;
+	}
+}

test/mocks/scss/no_remove_duplicate_formatted.scss

@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply dupplicate dupplicate;
+	}
+}

test/mocks/scss/no_remove_duplicate_unformatted.scss

@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply dupplicate dupplicate;
+	}
+}

test/mocks/scss/remove_duplicate_formatted.scss

@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply dupplicate;
+	}
+}

test/mocks/scss/remove_duplicate_unformatted.scss

@@ -0,0 +1,5 @@
+div {
+	a {
+		@apply dupplicate dupplicate;
+	}
+}

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', () => {