feat: vue integration (#5)

* feat: add vue support

fix #4

* doc: add quote

Author: marcosvega91

README.md

@@ -19,6 +19,10 @@
   <br/>
 </p>
 
+> "Make it work, make it right, make it fast"
+>
+> - [Kent Beck](https://en.wikipedia.org/wiki/Kent_Beck)
+
 ## Intro
 
 Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
@@ -29,7 +33,12 @@ This plugin adds support for the Tailwind CSS library.
 
 This plugin will sort tailwind classes as [headwind](https://github.com/heybourn/headwind) does and will also remove duplicates classes.
 
-Actually the plugin works for `html` language and `jsx` language.
+Actually the plugin works for the following languages:
+
+1. `html`
+2. `js`
+3. `jsx`
+4. `vue`
 
 ### Input
 

src/index.js

@@ -14,6 +14,11 @@ const languages = [
 		name: 'Tailwind HTML',
 		extensions: ['.html'],
 		parsers: ['html']
+	},
+	{
+		name: 'Tailwind Vue',
+		extensions: ['.vue'],
+		parsers: ['vue']
 	}
 ]
 const parsers = {
@@ -28,6 +33,10 @@ const parsers = {
 	babel: {
 		...prettierParserBabel.parsers.babel,
 		parse: getParse('javascriptreact', prettierParserBabel.parsers.babel.parse)
+	},
+	vue: {
+		...prettierParserHTML.parsers.vue,
+		parse: getParse('html', prettierParserHTML.parsers.vue.parse)
 	}
 }
 

src/regex.json

@@ -1,4 +1,5 @@
 {
+	"vue": "\\bclass\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\']",
 	"html": "\\bclass\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\']",
 	"javascriptreact": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw\\s*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)"
 }

test/mocks/vue/default_behaviour_formatted.vue

@@ -0,0 +1,16 @@
+<template>
+	<div class="xl:flex items-center py-12 -mx-6">
+		<div class="md:text-center xl:text-left md:max-w-3xl max-w-2xl px-6 mx-auto text-left">
+			<slot />
+		</div>
+		<div class="xl:mt-0 md:max-w-3xl flex-shrink-0 max-w-2xl px-6 mt-12">
+			<slot name="figure" />
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'prettier-tailwind'
+}
+</script>

test/mocks/vue/default_behaviour_unformatted.vue

@@ -0,0 +1,16 @@
+<template>
+	<div class="xl:flex py-12 items-center -mx-6">
+		<div class="px-6 text-left md:text-center xl:text-left max-w-2xl md:max-w-3xl mx-auto">
+			<slot />
+		</div>
+		<div class="mt-12 px-6 xl:mt-0 flex-shrink-0 max-w-2xl md:max-w-3xl">
+			<slot name="figure" />
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'prettier-tailwind'
+}
+</script>

test/mocks/vue/no_duplicate_unknown_formatted.vue

@@ -0,0 +1,9 @@
+<template>
+	<div class="unknown"></div>
+</template>
+
+<script>
+export default {
+	name: 'prettier-tailwind'
+}
+</script>

test/mocks/vue/no_duplicate_unknown_unformatted.vue

@@ -0,0 +1 @@
+<div class="unknown"></div>

test/mocks/vue/no_remove_duplicate_formatted.vue

@@ -0,0 +1,9 @@
+<template>
+	<div class="xl:flex xl:flex xl:flex items-center py-12 -mx-6"></div>
+</template>
+
+<script>
+export default {
+	name: 'prettier-tailwind'
+}
+</script>

test/mocks/vue/no_remove_duplicate_unformatted.vue

@@ -0,0 +1,9 @@
+<template>
+	<div class="xl:flex items-center py-12 -mx-6 xl:flex xl:flex"></div>
+</template>
+
+<script>
+export default {
+	name: 'prettier-tailwind'
+}
+</script>

test/mocks/vue/remove_duplicate_formatted.vue

@@ -0,0 +1,9 @@
+<template>
+	<div class="xl:flex items-center py-12 -mx-6"></div>
+</template>
+
+<script>
+export default {
+	name: 'prettier-tailwind'
+}
+</script>