Edit

Selector Separator Newline

Config Key: selector_separator_newline

Description: Add a newline between multiple selectors

Available since version: 0.7.0 (Current: )

Type: boolean

Default: false

Support

Edit Beautifiers

Languages: CSS

Beautifiers: JS-Beautify

Comparison Table

Language	JS-Beautify
CSS	✅

Examples

Select Language:

CSS *

Invisible characters are shown with the following symbols:

Carriage Return = ␍; Line Feed = ␊; Tab = ⇥; Whitespace = ·.

Edit CSS Example

🚧 Original Code

.selector-1,␊
.selector-2·{␊
··.nested-selector-1,·.nested-selector-2·{␊
····color:·red;␊
··}␊
}␊
␊
a:first-child,·a:first-child·{␊
··color:·red;␊
␊
··div:first-child,␊
··div:hover·{␊
····color:·black;␊
··}␊
}␊

🔧 true

Using JS-Beautify beautifier:

.selector-1,␊
.selector-2·{␊
␊
··.nested-selector-1,␊
··.nested-selector-2·{␊
····color:·red;␊
··}␊
}␊
␊
a:first-child,␊
a:first-child·{␊
··color:·red;␊
␊
··div:first-child,␊
··div:hover·{␊
····color:·black;␊
··}␊
}

How to configure

A .unibeautify.json file would look like the following:

{
  "CSS": {
    "indent_size": 2,
    "indent_char": " ",
    "selector_separator_newline": true,
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,15 +1,18 @@
 .selector-1,␊
 .selector-2·{␊
-··.nested-selector-1,·.nested-selector-2·{␊
+␊
+··.nested-selector-1,␊
+··.nested-selector-2·{␊
 ····color:·red;␊
 ··}␊
 }␊
 ␊
-a:first-child,·a:first-child·{␊
+a:first-child,␊
+a:first-child·{␊
 ··color:·red;␊
 ␊
 ··div:first-child,␊
 ··div:hover·{␊
 ····color:·black;␊
 ··}␊
-}␊
+}
\ No newline at end of file

🔧 false

Using JS-Beautify beautifier:

.selector-1,␊
.selector-2·{␊
··.nested-selector-1,·.nested-selector-2·{␊
····color:·red;␊
··}␊
}␊
␊
a:first-child,·a:first-child·{␊
··color:·red;␊
␊
··div:first-child,␊
··div:hover·{␊
····color:·black;␊
··}␊
}

How to configure

A .unibeautify.json file would look like the following:

{
  "CSS": {
    "indent_size": 2,
    "indent_char": " ",
    "selector_separator_newline": false,
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -11,5 +11,5 @@
 ··div:first-child,␊
 ··div:hover·{␊
 ····color:·black;␊
 ··}␊
-}␊
+}
\ No newline at end of file