From 7d0175ca90a79051e5713758e6c5295635b634d0 Mon Sep 17 00:00:00 2001
From: kamilic <jeflic10@gmail.com>
Date: Thu, 1 Aug 2019 17:06:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20implement=20--vue-indent-script-and-sty?=
 =?UTF-8?q?le=20mentioned=20at=20pr-#=E2=80=A6=20(#6157)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: implement --vue-indent-script-and-style mentioned at pr-#6077

* docs: --vue-indent-script-and-style

* update new test case

* feat: playground for --vue-indent-script-and-style

* chores: Revert package.json version

* Remove noisy snapshots
---
 docs/options.md                               |  15 ++
 src/language-html/options.js                  |   7 +
 src/language-html/printer-html.js             |   3 +-
 .../__snapshots__/jsfmt.spec.js.snap          | 229 ++++++++++++++++++
 tests/html_vue_indent/inside-template.vue     |  22 ++
 tests/html_vue_indent/jsfmt.spec.js           |   2 +
 tests/html_vue_indent/vue-tag-indent.vue      |  22 ++
 .../__snapshots__/early-exit.js.snap          |   6 +
 .../__snapshots__/help-options.js.snap        |  13 +
 website/playground/Playground.js              |   3 +-
 10 files changed, 320 insertions(+), 2 deletions(-)
 create mode 100644 tests/html_vue_indent/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/html_vue_indent/inside-template.vue
 create mode 100644 tests/html_vue_indent/jsfmt.spec.js
 create mode 100644 tests/html_vue_indent/vue-tag-indent.vue

diff --git a/docs/options.md b/docs/options.md
index 46450310..00f64710 100644
--- a/docs/options.md
+++ b/docs/options.md
@@ -307,6 +307,21 @@ Valid options:
 | ------- | ------------------------------------------------------------------------ | ----------------------------------------------------------------------- |
 | `"css"` | <code>--html-whitespace-sensitivity <css&#124;strict&#124;ignore></code> | <code>htmlWhitespaceSensitivity: "<css&#124;strict&#124;ignore>"</code> |
 
+## Vue files script and style tags indentation
+
+_First available in v1.19.0_
+
+Whether or not to indent the code inside `<script>` and `<style>` tags in Vue files. Some people (like [the creator of Vue](https://github.com/prettier/prettier/issues/3888#issuecomment-459521863)) don’t indent to save an indentation level, but this might break code folding in your editor.
+
+Valid options:
+
+- `"false"` - Do not indent script and style tags in Vue files.
+- `"true"` - Indent script and style tags in Vue files.
+
+| Default | CLI Override                    | API Override                      |
+| ------- | ------------------------------- | --------------------------------- |
+| `false` | `--vue-indent-script-and-style` | `vueIndentScriptAndStyle: <bool>` |
+
 ## End of Line
 
 _First available in 1.15.0_
diff --git a/src/language-html/options.js b/src/language-html/options.js
index ee8d6c05..62362c6b 100644
--- a/src/language-html/options.js
+++ b/src/language-html/options.js
@@ -24,5 +24,12 @@ module.exports = {
         description: "Whitespaces are considered insensitive."
       }
     ]
+  },
+  vueIndentScriptAndStyle: {
+    since: "1.19.0",
+    category: CATEGORY_HTML,
+    type: "boolean",
+    default: false,
+    description: "Indent script and style tags in Vue files."
   }
 };
diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index 115f015b..358a76e3 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -229,7 +229,8 @@ function genericPrint(path, options, print) {
                         })
                       : isScriptLikeTag(node) &&
                         node.parent.type === "root" &&
-                        options.parser === "vue"
+                        options.parser === "vue" &&
+                        !options.vueIndentScriptAndStyle
                       ? childrenDoc
                       : indent(childrenDoc))(
                     concat([
diff --git a/tests/html_vue_indent/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue_indent/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 00000000..f9bcc919
--- /dev/null
+++ b/tests/html_vue_indent/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,229 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`inside-template.vue 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+vueIndentScriptAndStyle: true
+                                                                                | printWidth
+=====================================input======================================
+<template>
+    <style>
+        br {
+            background: #00abc9;
+        }
+
+    div {
+        background: #00abc9;
+    }
+    </style>
+
+    <script>
+        console.log('hello');
+    console.log('hello');
+    </script>
+
+    <br />
+    <footer>
+        foo
+        <br/>
+    </footer>
+</template>
+
+=====================================output=====================================
+<template>
+  <style>
+    br {
+      background: #00abc9;
+    }
+
+    div {
+      background: #00abc9;
+    }
+  </style>
+
+  <script>
+    console.log("hello");
+    console.log("hello");
+  </script>
+
+  <br />
+  <footer>
+    foo
+    <br />
+  </footer>
+</template>
+
+================================================================================
+`;
+
+exports[`inside-template.vue 2`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+vueIndentScriptAndStyle: false
+                                                                                | printWidth
+=====================================input======================================
+<template>
+    <style>
+        br {
+            background: #00abc9;
+        }
+
+    div {
+        background: #00abc9;
+    }
+    </style>
+
+    <script>
+        console.log('hello');
+    console.log('hello');
+    </script>
+
+    <br />
+    <footer>
+        foo
+        <br/>
+    </footer>
+</template>
+
+=====================================output=====================================
+<template>
+  <style>
+    br {
+      background: #00abc9;
+    }
+
+    div {
+      background: #00abc9;
+    }
+  </style>
+
+  <script>
+    console.log("hello");
+    console.log("hello");
+  </script>
+
+  <br />
+  <footer>
+    foo
+    <br />
+  </footer>
+</template>
+
+================================================================================
+`;
+
+exports[`vue-tag-indent.vue 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+vueIndentScriptAndStyle: true
+                                                                                | printWidth
+=====================================input======================================
+<script>
+  console.log('hello');
+console.log('hello');
+</script>
+
+<style lang="scss">
+  footer {
+    background: #00abc9;
+  }
+
+footer {
+  background: #00abc9;
+}
+</style>
+
+<template>
+  <br />
+  <footer>
+    foo
+    <br/>
+  </footer>
+</template>
+
+=====================================output=====================================
+<script>
+  console.log("hello");
+  console.log("hello");
+</script>
+
+<style lang="scss">
+  footer {
+    background: #00abc9;
+  }
+
+  footer {
+    background: #00abc9;
+  }
+</style>
+
+<template>
+  <br />
+  <footer>
+    foo
+    <br />
+  </footer>
+</template>
+
+================================================================================
+`;
+
+exports[`vue-tag-indent.vue 2`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+vueIndentScriptAndStyle: false
+                                                                                | printWidth
+=====================================input======================================
+<script>
+  console.log('hello');
+console.log('hello');
+</script>
+
+<style lang="scss">
+  footer {
+    background: #00abc9;
+  }
+
+footer {
+  background: #00abc9;
+}
+</style>
+
+<template>
+  <br />
+  <footer>
+    foo
+    <br/>
+  </footer>
+</template>
+
+=====================================output=====================================
+<script>
+console.log("hello");
+console.log("hello");
+</script>
+
+<style lang="scss">
+footer {
+  background: #00abc9;
+}
+
+footer {
+  background: #00abc9;
+}
+</style>
+
+<template>
+  <br />
+  <footer>
+    foo
+    <br />
+  </footer>
+</template>
+
+================================================================================
+`;
diff --git a/tests/html_vue_indent/inside-template.vue b/tests/html_vue_indent/inside-template.vue
new file mode 100644
index 00000000..3966a06e
--- /dev/null
+++ b/tests/html_vue_indent/inside-template.vue
@@ -0,0 +1,22 @@
+<template>
+    <style>
+        br {
+            background: #00abc9;
+        }
+
+    div {
+        background: #00abc9;
+    }
+    </style>
+
+    <script>
+        console.log('hello');
+    console.log('hello');
+    </script>
+
+    <br />
+    <footer>
+        foo
+        <br/>
+    </footer>
+</template>
diff --git a/tests/html_vue_indent/jsfmt.spec.js b/tests/html_vue_indent/jsfmt.spec.js
new file mode 100644
index 00000000..7f407e46
--- /dev/null
+++ b/tests/html_vue_indent/jsfmt.spec.js
@@ -0,0 +1,2 @@
+run_spec(__dirname, ["vue"], { vueIndentScriptAndStyle: true });
+run_spec(__dirname, ["vue"], { vueIndentScriptAndStyle: false });
diff --git a/tests/html_vue_indent/vue-tag-indent.vue b/tests/html_vue_indent/vue-tag-indent.vue
new file mode 100644
index 00000000..62a729e9
--- /dev/null
+++ b/tests/html_vue_indent/vue-tag-indent.vue
@@ -0,0 +1,22 @@
+<script>
+  console.log('hello');
+console.log('hello');
+</script>
+
+<style lang="scss">
+  footer {
+    background: #00abc9;
+  }
+
+footer {
+  background: #00abc9;
+}
+</style>
+
+<template>
+  <br />
+  <footer>
+    foo
+    <br/>
+  </footer>
+</template>
diff --git a/tests_integration/__tests__/__snapshots__/early-exit.js.snap b/tests_integration/__tests__/__snapshots__/early-exit.js.snap
index 785f2e91..06e24930 100644
--- a/tests_integration/__tests__/__snapshots__/early-exit.js.snap
+++ b/tests_integration/__tests__/__snapshots__/early-exit.js.snap
@@ -92,6 +92,9 @@ Format options:
                            Defaults to none.
   --use-tabs               Indent with tabs instead of spaces.
                            Defaults to false.
+  --vue-indent-script-and-style
+                           Indent script and style tags in Vue files.
+                           Defaults to false.
 
 Config options:
 
@@ -246,6 +249,9 @@ Format options:
                            Defaults to none.
   --use-tabs               Indent with tabs instead of spaces.
                            Defaults to false.
+  --vue-indent-script-and-style
+                           Indent script and style tags in Vue files.
+                           Defaults to false.
 
 Config options:
 
diff --git a/tests_integration/__tests__/__snapshots__/help-options.js.snap b/tests_integration/__tests__/__snapshots__/help-options.js.snap
index 29aaeaea..e412d98c 100644
--- a/tests_integration/__tests__/__snapshots__/help-options.js.snap
+++ b/tests_integration/__tests__/__snapshots__/help-options.js.snap
@@ -610,6 +610,19 @@ exports[`show detailed usage with --help version (stdout) 1`] = `
 
 exports[`show detailed usage with --help version (write) 1`] = `Array []`;
 
+exports[`show detailed usage with --help vue-indent-script-and-style (stderr) 1`] = `""`;
+
+exports[`show detailed usage with --help vue-indent-script-and-style (stdout) 1`] = `
+"--vue-indent-script-and-style
+
+  Indent script and style tags in Vue files.
+
+Default: false
+"
+`;
+
+exports[`show detailed usage with --help vue-indent-script-and-style (write) 1`] = `Array []`;
+
 exports[`show detailed usage with --help with-node-modules (stderr) 1`] = `""`;
 
 exports[`show detailed usage with --help with-node-modules (stdout) 1`] = `
diff --git a/website/playground/Playground.js b/website/playground/Playground.js
index 1a79bcf0..c948684f 100644
--- a/website/playground/Playground.js
+++ b/website/playground/Playground.js
@@ -39,7 +39,8 @@ const ENABLED_OPTIONS = [
   "proseWrap",
   "htmlWhitespaceSensitivity",
   "insertPragma",
-  "requirePragma"
+  "requirePragma",
+  "vueIndentScriptAndStyle"
 ];
 
 class Playground extends React.Component {