Vue: fix format on blocks with src attribute (#9052)

prettier · Aug 25, 2020 · 073dfd9 · 073dfd9
1 parent 2a15e27
commit 073dfd9
Show file tree

Hide file tree

Showing 4 changed files with 193 additions and 1 deletion.
diff --git a/changelog_unreleased/vue/pr-9052.md b/changelog_unreleased/vue/pr-9052.md
@@ -0,0 +1,20 @@
+#### Fix format blocks with `src` attribute ([#9052](https://github.com/prettier/prettier/pull/9052) by [@fisker](https://github.com/fisker))
+
+<!-- prettier-ignore -->
+```vue
+<!-- Input -->
+<custom lang="markdown" src="./foo.md"></custom>
+<custom lang="markdown" src="./foo.md" />
+
+<!-- Prettier stable -->
+<custom lang="markdown" src="./foo.md">
+
+</custom>
+<custom lang="markdown" src="./foo.md"
+
+/>
+
+<!-- Prettier master -->
+<custom lang="markdown" src="./foo.md"></custom>
+<custom lang="markdown" src="./foo.md" />
+```
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
@@ -428,7 +428,7 @@ function inferScriptParser(node, options) {
     return (
       _inferScriptParser(node) ||
       inferStyleParser(node) ||
-      getParserName(node.attrMap.lang, options)
+      (!("src" in node.attrMap) && getParserName(node.attrMap.lang, options))
     );
   }
 }

diff --git a/tests/vue/with-plugins/__snapshots__/jsfmt.spec.js.snap b/tests/vue/with-plugins/__snapshots__/jsfmt.spec.js.snap
@@ -235,3 +235,146 @@ printWidth: 80
 
 ================================================================================
 `;
+
+exports[`with-src.vue - {"embeddedLanguageFormatting":"off"} format 1`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template lang="uppercase-rocks" src="foo.uppercase-rocks"></template>
+<style lang="uppercase-rocks" src="foo.uppercase-rocks"></style>
+<script lang="uppercase-rocks" src="foo.uppercase-rocks"></script>
+<custom lang="uppercase-rocks" src="foo.uppercase-rocks"></custom>
+<template lang="uppercase-rocks" src></template>
+<template lang="uppercase-rocks" src=""></template>
+<template lang="uppercase-rocks" src>PrEtTiEr</template>
+<template lang="uppercase-rocks" src="">PrEtTiEr</template>
+<template lang="uppercase-rocks" src>
+
+     </template>
+<template lang="uppercase-rocks" src="">
+
+     </template>
+
+<template lang="uppercase-rocks" src="foo.uppercase-rocks">
+PrEtTiEr
+</template>
+
+
+<template lang="uppercase-rocks" :src="">PrEtTiEr</template>
+<template lang="uppercase-rocks" @src="">PrEtTiEr</template>
+
+<template lang="uppercase-rocks" src="foo.uppercase-rocks"/>
+<style lang="uppercase-rocks" src="foo.uppercase-rocks"/>
+<script lang="uppercase-rocks" src="foo.uppercase-rocks"/>
+<custom lang="uppercase-rocks" src="foo.uppercase-rocks"/>
+<custom lang="uppercase-rocks" src/>
+<template lang="uppercase-rocks" src=""/>
+
+=====================================output=====================================
+<template lang="uppercase-rocks" src="foo.uppercase-rocks"></template>
+<style lang="uppercase-rocks" src="foo.uppercase-rocks"></style>
+<script lang="uppercase-rocks" src="foo.uppercase-rocks"></script>
+<custom lang="uppercase-rocks" src="foo.uppercase-rocks"></custom>
+<template lang="uppercase-rocks" src></template>
+<template lang="uppercase-rocks" src=""></template>
+<template lang="uppercase-rocks" src>PrEtTiEr</template>
+<template lang="uppercase-rocks" src="">PrEtTiEr</template>
+<template lang="uppercase-rocks" src>
+
+     </template>
+<template lang="uppercase-rocks" src="">
+
+     </template>
+
+<template lang="uppercase-rocks" src="foo.uppercase-rocks">
+PrEtTiEr
+</template>
+
+<template lang="uppercase-rocks" :src="">PrEtTiEr</template>
+<template lang="uppercase-rocks" @src="">PrEtTiEr</template>
+
+<template lang="uppercase-rocks" src="foo.uppercase-rocks" />
+<style lang="uppercase-rocks" src="foo.uppercase-rocks" />
+<script lang="uppercase-rocks" src="foo.uppercase-rocks" />
+<custom lang="uppercase-rocks" src="foo.uppercase-rocks" />
+<custom lang="uppercase-rocks" src />
+<template lang="uppercase-rocks" src="" />
+
+================================================================================
+`;
+
+exports[`with-src.vue format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template lang="uppercase-rocks" src="foo.uppercase-rocks"></template>
+<style lang="uppercase-rocks" src="foo.uppercase-rocks"></style>
+<script lang="uppercase-rocks" src="foo.uppercase-rocks"></script>
+<custom lang="uppercase-rocks" src="foo.uppercase-rocks"></custom>
+<template lang="uppercase-rocks" src></template>
+<template lang="uppercase-rocks" src=""></template>
+<template lang="uppercase-rocks" src>PrEtTiEr</template>
+<template lang="uppercase-rocks" src="">PrEtTiEr</template>
+<template lang="uppercase-rocks" src>
+
+     </template>
+<template lang="uppercase-rocks" src="">
+
+     </template>
+
+<template lang="uppercase-rocks" src="foo.uppercase-rocks">
+PrEtTiEr
+</template>
+
+
+<template lang="uppercase-rocks" :src="">PrEtTiEr</template>
+<template lang="uppercase-rocks" @src="">PrEtTiEr</template>
+
+<template lang="uppercase-rocks" src="foo.uppercase-rocks"/>
+<style lang="uppercase-rocks" src="foo.uppercase-rocks"/>
+<script lang="uppercase-rocks" src="foo.uppercase-rocks"/>
+<custom lang="uppercase-rocks" src="foo.uppercase-rocks"/>
+<custom lang="uppercase-rocks" src/>
+<template lang="uppercase-rocks" src=""/>
+
+=====================================output=====================================
+<template lang="uppercase-rocks" src="foo.uppercase-rocks"></template>
+<style lang="uppercase-rocks" src="foo.uppercase-rocks"></style>
+<script lang="uppercase-rocks" src="foo.uppercase-rocks"></script>
+<custom lang="uppercase-rocks" src="foo.uppercase-rocks"></custom>
+<template lang="uppercase-rocks" src></template>
+<template lang="uppercase-rocks" src=""></template>
+<template lang="uppercase-rocks" src>PrEtTiEr</template>
+<template lang="uppercase-rocks" src="">PrEtTiEr</template>
+<template lang="uppercase-rocks" src>
+
+     </template>
+<template lang="uppercase-rocks" src="">
+
+     </template>
+
+<template lang="uppercase-rocks" src="foo.uppercase-rocks">
+PrEtTiEr
+</template>
+
+<template lang="uppercase-rocks" :src="">
+PRETTIER
+</template>
+<template lang="uppercase-rocks" @src="">
+PRETTIER
+</template>
+
+<template lang="uppercase-rocks" src="foo.uppercase-rocks" />
+<style lang="uppercase-rocks" src="foo.uppercase-rocks" />
+<script lang="uppercase-rocks" src="foo.uppercase-rocks" />
+<custom lang="uppercase-rocks" src="foo.uppercase-rocks" />
+<custom lang="uppercase-rocks" src />
+<template lang="uppercase-rocks" src="" />
+
+================================================================================
+`;
diff --git a/tests/vue/with-plugins/with-src.vue b/tests/vue/with-plugins/with-src.vue
@@ -0,0 +1,29 @@
+<template lang="uppercase-rocks" src="foo.uppercase-rocks"></template>
+<style lang="uppercase-rocks" src="foo.uppercase-rocks"></style>
+<script lang="uppercase-rocks" src="foo.uppercase-rocks"></script>
+<custom lang="uppercase-rocks" src="foo.uppercase-rocks"></custom>
+<template lang="uppercase-rocks" src></template>
+<template lang="uppercase-rocks" src=""></template>
+<template lang="uppercase-rocks" src>PrEtTiEr</template>
+<template lang="uppercase-rocks" src="">PrEtTiEr</template>
+<template lang="uppercase-rocks" src>
+
+     </template>
+<template lang="uppercase-rocks" src="">
+
+     </template>
+
+<template lang="uppercase-rocks" src="foo.uppercase-rocks">
+PrEtTiEr
+</template>
+
+
+<template lang="uppercase-rocks" :src="">PrEtTiEr</template>
+<template lang="uppercase-rocks" @src="">PrEtTiEr</template>
+
+<template lang="uppercase-rocks" src="foo.uppercase-rocks"/>
+<style lang="uppercase-rocks" src="foo.uppercase-rocks"/>
+<script lang="uppercase-rocks" src="foo.uppercase-rocks"/>
+<custom lang="uppercase-rocks" src="foo.uppercase-rocks"/>
+<custom lang="uppercase-rocks" src/>
+<template lang="uppercase-rocks" src=""/>