Format style[lang="css"] (#6875)

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

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

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"]

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