From 460ea2f4594078884bc03cb5d768f0bf9f92334e Mon Sep 17 00:00:00 2001
From: fisker Cheung <lionkay@gmail.com>
Date: Sat, 9 Nov 2019 02:33:59 +0800
Subject: [PATCH] Format `style[lang="css"]` (#6875)

---
 CHANGELOG.unreleased.md                       |  28 ++
 src/language-html/utils.js                    |   6 +-
 .../html_vue/__snapshots__/jsfmt.spec.js.snap | 320 ++++++++++++++++++
 tests/html_vue/style.vue                      |  46 +++
 4 files changed, 399 insertions(+), 1 deletion(-)
 create mode 100644 tests/html_vue/style.vue

diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
index c6406f02f..8401fc0bb 100644
--- a/CHANGELOG.unreleased.md
+++ b/CHANGELOG.unreleased.md
@@ -1434,6 +1434,33 @@ Invalid configuration file `.invalid-config`: ...
 @FoO: bar;
 ```
 
+#### Vue: Format `style[lang="css"]` ([#6875] by [@fisker])
+
+Previously, `<style>` element with attribute `lang` equals to `css` is not formatted.
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<style lang="css">
+    a { 
+color: #F00
+}</style>
+
+<!-- Output (Prettier stable) -->
+<style lang="css">
+    a {
+color: #F00
+}
+</style>
+
+<!-- Output (Prettier master) -->
+<style lang="css">
+  a {
+    color: #f00;
+  }
+</style>
+```
+
 [#5682]: https://github.com/prettier/prettier/pull/5682
 [#6657]: https://github.com/prettier/prettier/pull/6657
 [#5910]: https://github.com/prettier/prettier/pull/5910
@@ -1486,6 +1513,7 @@ Invalid configuration file `.invalid-config`: ...
 [#6848]: https://github.com/prettier/prettier/pull/6848
 [#6856]: https://github.com/prettier/prettier/pull/6856
 [#6865]: https://github.com/prettier/prettier/pull/6865
+[#6875]: https://github.com/prettier/prettier/pull/6875
 [#6863]: https://github.com/prettier/prettier/pull/6863
 [@brainkim]: https://github.com/brainkim
 [@duailibe]: https://github.com/duailibe
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index b5417be12..d1a6ac919 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -385,7 +385,11 @@ function inferScriptParser(node) {
   }
 
   if (node.name === "style") {
-    if (!node.attrMap.lang || node.attrMap.lang === "postcss") {
+    if (
+      !node.attrMap.lang ||
+      node.attrMap.lang === "postcss" ||
+      node.attrMap.lang === "css"
+    ) {
       return "css";
     }
 
diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 648d73daf..88dc26011 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -2102,6 +2102,326 @@ semi: false
 ================================================================================
 `;
 
+exports[`style.vue 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script>
+</script>
+
+<style>
+#foo1{ color: #f00;
+}
+</style>
+<style scoped>
+#foo2{ color: #f00;
+}
+</style>
+
+<style lang="css">
+#foo3{ color: #f00;
+}
+</style>
+<style lang="css" scoped>
+#foo4{ color: #f00;
+}
+</style>
+
+<style lang="less">
+#foo5{ color: #f00;
+}
+</style>
+<style lang="less" scoped>
+#foo6{ 
+         @color: #f00;
+  color: @color;
+}
+</style>
+
+
+<style lang="scss">
+#foo8{ 
+         $color: #f00;
+  color: $color;
+}
+</style>
+<style lang="scss" scoped>
+#foo8{ 
+         $color: #f00;
+  color: $color;
+}
+</style>
+
+
+=====================================output=====================================
+<script></script>
+
+<style>
+#foo1 {
+  color: #f00;
+}
+</style>
+<style scoped>
+#foo2 {
+  color: #f00;
+}
+</style>
+
+<style lang="css">
+#foo3 {
+  color: #f00;
+}
+</style>
+<style lang="css" scoped>
+#foo4 {
+  color: #f00;
+}
+</style>
+
+<style lang="less">
+#foo5 {
+  color: #f00;
+}
+</style>
+<style lang="less" scoped>
+#foo6 {
+  @color: #f00;
+  color: @color;
+}
+</style>
+
+<style lang="scss">
+#foo8 {
+  $color: #f00;
+  color: $color;
+}
+</style>
+<style lang="scss" scoped>
+#foo8 {
+  $color: #f00;
+  color: $color;
+}
+</style>
+
+================================================================================
+`;
+
+exports[`style.vue 2`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+trailingComma: "es5"
+                                                                                | printWidth
+=====================================input======================================
+<script>
+</script>
+
+<style>
+#foo1{ color: #f00;
+}
+</style>
+<style scoped>
+#foo2{ color: #f00;
+}
+</style>
+
+<style lang="css">
+#foo3{ color: #f00;
+}
+</style>
+<style lang="css" scoped>
+#foo4{ color: #f00;
+}
+</style>
+
+<style lang="less">
+#foo5{ color: #f00;
+}
+</style>
+<style lang="less" scoped>
+#foo6{ 
+         @color: #f00;
+  color: @color;
+}
+</style>
+
+
+<style lang="scss">
+#foo8{ 
+         $color: #f00;
+  color: $color;
+}
+</style>
+<style lang="scss" scoped>
+#foo8{ 
+         $color: #f00;
+  color: $color;
+}
+</style>
+
+
+=====================================output=====================================
+<script></script>
+
+<style>
+#foo1 {
+  color: #f00;
+}
+</style>
+<style scoped>
+#foo2 {
+  color: #f00;
+}
+</style>
+
+<style lang="css">
+#foo3 {
+  color: #f00;
+}
+</style>
+<style lang="css" scoped>
+#foo4 {
+  color: #f00;
+}
+</style>
+
+<style lang="less">
+#foo5 {
+  color: #f00;
+}
+</style>
+<style lang="less" scoped>
+#foo6 {
+  @color: #f00;
+  color: @color;
+}
+</style>
+
+<style lang="scss">
+#foo8 {
+  $color: #f00;
+  color: $color;
+}
+</style>
+<style lang="scss" scoped>
+#foo8 {
+  $color: #f00;
+  color: $color;
+}
+</style>
+
+================================================================================
+`;
+
+exports[`style.vue 3`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+<script>
+</script>
+
+<style>
+#foo1{ color: #f00;
+}
+</style>
+<style scoped>
+#foo2{ color: #f00;
+}
+</style>
+
+<style lang="css">
+#foo3{ color: #f00;
+}
+</style>
+<style lang="css" scoped>
+#foo4{ color: #f00;
+}
+</style>
+
+<style lang="less">
+#foo5{ color: #f00;
+}
+</style>
+<style lang="less" scoped>
+#foo6{ 
+         @color: #f00;
+  color: @color;
+}
+</style>
+
+
+<style lang="scss">
+#foo8{ 
+         $color: #f00;
+  color: $color;
+}
+</style>
+<style lang="scss" scoped>
+#foo8{ 
+         $color: #f00;
+  color: $color;
+}
+</style>
+
+
+=====================================output=====================================
+<script></script>
+
+<style>
+#foo1 {
+  color: #f00;
+}
+</style>
+<style scoped>
+#foo2 {
+  color: #f00;
+}
+</style>
+
+<style lang="css">
+#foo3 {
+  color: #f00;
+}
+</style>
+<style lang="css" scoped>
+#foo4 {
+  color: #f00;
+}
+</style>
+
+<style lang="less">
+#foo5 {
+  color: #f00;
+}
+</style>
+<style lang="less" scoped>
+#foo6 {
+  @color: #f00;
+  color: @color;
+}
+</style>
+
+<style lang="scss">
+#foo8 {
+  $color: #f00;
+  color: $color;
+}
+</style>
+<style lang="scss" scoped>
+#foo8 {
+  $color: #f00;
+  color: $color;
+}
+</style>
+
+================================================================================
+`;
+
 exports[`tag-name.vue 1`] = `
 ====================================options=====================================
 parsers: ["vue"]
diff --git a/tests/html_vue/style.vue b/tests/html_vue/style.vue
new file mode 100644
index 000000000..96d75d5a2
--- /dev/null
+++ b/tests/html_vue/style.vue
@@ -0,0 +1,46 @@
+<script>
+</script>
+
+<style>
+#foo1{ color: #f00;
+}
+</style>
+<style scoped>
+#foo2{ color: #f00;
+}
+</style>
+
+<style lang="css">
+#foo3{ color: #f00;
+}
+</style>
+<style lang="css" scoped>
+#foo4{ color: #f00;
+}
+</style>
+
+<style lang="less">
+#foo5{ color: #f00;
+}
+</style>
+<style lang="less" scoped>
+#foo6{ 
+         @color: #f00;
+  color: @color;
+}
+</style>
+
+
+<style lang="scss">
+#foo8{ 
+         $color: #f00;
+  color: $color;
+}
+</style>
+<style lang="scss" scoped>
+#foo8{ 
+         $color: #f00;
+  color: $color;
+}
+</style>
+