Add support for relative or infer indent level in CSS blocks

stylelint · Aug 17, 2018 · e53f6af · e53f6af
1 parent 2301a48
commit e53f6af
Show file tree

Hide file tree

Showing 4 changed files with 552 additions and 77 deletions.
diff --git a/lib/rules/indentation/README.md b/lib/rules/indentation/README.md
@@ -135,6 +135,25 @@ a {
 
 ## Optional secondary options
 
+### `baseIndentLevel: int|"auto"`
+
+By default, the indent level of the CSS code block in non-CSS-like files is determined by the shortest non-empty line indented. The setting `baseIndentLevel` allows you to define a relative indent level based on CSS code block opening or closing line.
+
+For example, with `[ 2, { baseIndentLevel: 1 } ]`, CSS should be indented 1 levels higher than `<style>` tag:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <style>
+    a {
+      display: block;
+    }
+  </style>
+</head>
+</html>
+```
+
 ### `indentInsideParens: "twice"|"once-at-root-twice-in-block"`
 
 By default, *one extra* indentation (of your specified type) is expected after newlines inside parentheses, and the closing parenthesis is expected to have no extra indentation.

diff --git a/lib/rules/indentation/__tests__/html.js b/lib/rules/indentation/__tests__/html.js
@@ -25,6 +25,16 @@ a {
 \tdisplay:block;
 }
 </style>`
+    },
+    {
+      code: `
+<style>a {
+\tdisplay:block;
+}
+</style>`
+    },
+    {
+      code: '<a style="display:block; color:red;"></a>'
     }
   ],
 
@@ -48,6 +58,23 @@ a {
     },
     {
       code: `
+<style>
+  a {
+      display:block;
+    }
+</style>`,
+      fixed: `
+<style>
+\ta {
+\t\tdisplay:block;
+\t}
+</style>`,
+      message: messages.expected("1 tab"),
+      line: 3,
+      column: 3
+    },
+    {
+      code: `
 <style>
 a {
 display:block;
@@ -83,23 +110,203 @@ a {
     {
       code: `
 \t<style>
-\t a {
-\t display:block;
-\t }
-\t</style>
+    a {
+        display:block;
+    }
+    b {
+      display:block;
+    }
+\t</style>`,
+      fixed: `
+\t<style>
+\ta {
+\t\tdisplay:block;
+\t}
+\tb {
+\t\tdisplay:block;
+\t}
+\t</style>`,
+      message: messages.expected("1 tab"),
+      line: 3,
+      column: 5
+    }
+  ]
+});
+
+testRule(rule, {
+  ruleName,
+  config: [2],
+  syntax: "html",
+  fix: true,
+
+  accept: [
+    {
+      code: `
+<style>
+  a {
+    display:block;
+  }
+</style>`
+    },
+    {
+      code: `
+<style>
+a {
+  display:block;
+}
+</style>`
+    },
+    {
+      code: `
+<style>a {
+  display:block;
+}
+</style>`
+    }
+  ],
+  reject: [
+    {
+      code: `
+<style>a {
+ display:block;
+}
+</style>`,
+      fixed: `
+<style>a {
+  display:block;
+}
+</style>`,
+      message: messages.expected("2 spaces"),
+      line: 3,
+      column: 2
+    }
+  ]
+});
+
+testRule(rule, {
+  ruleName,
+  config: [
+    "tab",
+    {
+      baseIndentLevel: 1
+    }
+  ],
+  syntax: "html",
+  fix: true,
+
+  accept: [
+    {
+      code: `
+<style>
+\ta {
+\t\tdisplay:block;
+\t}
+</style>`
+    },
+    {
+      code: `
+\t<style>
+\t\ta {
+\t\t\tdisplay:block;
+\t\t}
+\t</style>`
+    }
+  ],
+  reject: [
+    {
+      code: `
+<style>
+a {
+\tdisplay:block;
+}
+</style>`,
+      fixed: `
+<style>
+\ta {
+\t\tdisplay:block;
+\t}
+</style>`,
+      message: messages.expected("1 tab"),
+      line: 3,
+      column: 1
+    },
+    {
+      code: `
 \t<style>
-\t b {
-\t display:block;
-\t }
+\ta {
+\t\tdisplay:block;
+\t}
 \t</style>`,
       fixed: `
 \t<style>
+\t\ta {
+\t\t\tdisplay:block;
+\t\t}
+\t</style>`,
+      message: messages.expected("2 tabs"),
+      line: 3,
+      column: 2
+    }
+  ]
+});
+
+testRule(rule, {
+  ruleName,
+  config: [
+    "tab",
+    {
+      baseIndentLevel: 0
+    }
+  ],
+  syntax: "html",
+  fix: true,
+
+  accept: [
+    {
+      code: `
+<style>
+a {
+\tdisplay:block;
+}
+</style>`
+    },
+    {
+      code: `
+\t<style>
+\ta {
+\t\tdisplay:block;
+\t}
+\t</style>`
+    }
+  ],
+  reject: [
+    {
+      code: `
+<style>
 \ta {
 \t\tdisplay:block;
 \t}
-\t</style>
+</style>`,
+      fixed: `
+<style>
+a {
+\tdisplay:block;
+}
+</style>`,
+      message: messages.expected("0 tabs"),
+      line: 3,
+      column: 2
+    },
+    {
+      code: `
 \t<style>
-\tb {
+\t\ta {
+\t\t\tdisplay:block;
+\t\t}
+\t</style>`,
+      fixed: `
+\t<style>
+\ta {
 \t\tdisplay:block;
 \t}
 \t</style>`,