Edit

Newline Between Rules

Config Key: newline_between_rules

Description: Add a newline between CSS rules

Available since version: 0.7.0 (Current: )

Type: boolean

Default: true

Support

Edit Beautifiers

Languages: CSS, Less, SCSS, Titanium Style Sheets

Beautifiers: JS-Beautify, Pretty Diff

Comparison Table

Language	JS-Beautify	Pretty Diff
CSS	✅	✅
Less	❌	✅
SCSS	❌	✅
Titanium Style Sheets	❌	✅

Examples

Select Language:

CSS * Less * SCSS * Titanium Style Sheets

Invisible characters are shown with the following symbols:

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

Edit CSS Example

🚧 Original Code

.selector-1,␊
.selector-2·{␊
····color:·green;·background-color:·blue;␊
}␊
␊
.selector-1,·.selector-2·{␊
····color:·green;·background-color:·blue;␊
}␊

🔧 true

Using JS-Beautify beautifier:

.selector-1,␊
.selector-2·{␊
··color:·green;␊
··background-color:·blue;␊
}␊
␊
.selector-1,␊
.selector-2·{␊
··color:·green;␊
··background-color:·blue;␊
}

How to configure

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

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,8 +1,11 @@
 .selector-1,␊
 .selector-2·{␊
-····color:·green;·background-color:·blue;␊
+··color:·green;␊
+··background-color:·blue;␊
 }␊
 ␊
-.selector-1,·.selector-2·{␊
-····color:·green;·background-color:·blue;␊
-}␊
+.selector-1,␊
+.selector-2·{␊
+··color:·green;␊
+··background-color:·blue;␊
+}
\ No newline at end of file

🔧 false

Using JS-Beautify beautifier:

.selector-1,␊
.selector-2·{␊
··color:·green;␊
··background-color:·blue;␊
}␊
␊
.selector-1,␊
.selector-2·{␊
··color:·green;␊
··background-color:·blue;␊
}

How to configure

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

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

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,8 +1,11 @@
 .selector-1,␊
 .selector-2·{␊
-····color:·green;·background-color:·blue;␊
+··color:·green;␊
+··background-color:·blue;␊
 }␊
 ␊
-.selector-1,·.selector-2·{␊
-····color:·green;·background-color:·blue;␊
-}␊
+.selector-1,␊
+.selector-2·{␊
+··color:·green;␊
+··background-color:·blue;␊
+}
\ No newline at end of file

Edit Less Example

🚧 Original Code

.selector-1,␊
.selector-2·{␊
····color:·green;·background-color:·blue;␊
}␊
␊
.selector-1,·.selector-2·{␊
····color:·green;·background-color:·blue;␊
}␊

🔧 true

Using Pretty Diff beautifier:

.selector-1,␊
.selector-2·{␊
··color:·green;␊
··background-color:·blue;␊
}␊
␊
.selector-1,␊
.selector-2·{␊
··color:·green;␊
··background-color:·blue;␊
}␊

How to configure

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

{
  "Less": {
    "indent_size": 2,
    "indent_char": " ",
    "newline_between_rules": true,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,8 +1,11 @@
 .selector-1,␊
 .selector-2·{␊
-····color:·green;·background-color:·blue;␊
+··color:·green;␊
+··background-color:·blue;␊
 }␊
 ␊
-.selector-1,·.selector-2·{␊
-····color:·green;·background-color:·blue;␊
+.selector-1,␊
+.selector-2·{␊
+··color:·green;␊
+··background-color:·blue;␊
 }␊

🔧 false

Using Pretty Diff beautifier:

.selector-1,␊
.selector-2·{␊
··color:·green;␊
··background-color:·blue;␊
}␊
␊
.selector-1,␊
.selector-2·{␊
··color:·green;␊
··background-color:·blue;␊
}␊

How to configure

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

{
  "Less": {
    "indent_size": 2,
    "indent_char": " ",
    "newline_between_rules": false,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,8 +1,11 @@
 .selector-1,␊
 .selector-2·{␊
-····color:·green;·background-color:·blue;␊
+··color:·green;␊
+··background-color:·blue;␊
 }␊
 ␊
-.selector-1,·.selector-2·{␊
-····color:·green;·background-color:·blue;␊
+.selector-1,␊
+.selector-2·{␊
+··color:·green;␊
+··background-color:·blue;␊
 }␊

Edit SCSS Example

🚧 Original Code

.selector-1,␊
.selector-2·{␊
····color:·green;·background-color:·blue;␊
}␊
␊
.selector-1,·.selector-2·{␊
····color:·green;·background-color:·blue;␊
}␊

🔧 true

Using Pretty Diff beautifier:

.selector-1,␊
.selector-2·{␊
··color:·green;␊
··background-color:·blue;␊
}␊
␊
.selector-1,␊
.selector-2·{␊
··color:·green;␊
··background-color:·blue;␊
}␊

How to configure

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

{
  "SCSS": {
    "indent_size": 2,
    "indent_char": " ",
    "newline_between_rules": true,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,8 +1,11 @@
 .selector-1,␊
 .selector-2·{␊
-····color:·green;·background-color:·blue;␊
+··color:·green;␊
+··background-color:·blue;␊
 }␊
 ␊
-.selector-1,·.selector-2·{␊
-····color:·green;·background-color:·blue;␊
+.selector-1,␊
+.selector-2·{␊
+··color:·green;␊
+··background-color:·blue;␊
 }␊

🔧 false

Using Pretty Diff beautifier:

.selector-1,␊
.selector-2·{␊
··color:·green;␊
··background-color:·blue;␊
}␊
␊
.selector-1,␊
.selector-2·{␊
··color:·green;␊
··background-color:·blue;␊
}␊

How to configure

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

{
  "SCSS": {
    "indent_size": 2,
    "indent_char": " ",
    "newline_between_rules": false,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,8 +1,11 @@
 .selector-1,␊
 .selector-2·{␊
-····color:·green;·background-color:·blue;␊
+··color:·green;␊
+··background-color:·blue;␊
 }␊
 ␊
-.selector-1,·.selector-2·{␊
-····color:·green;·background-color:·blue;␊
+.selector-1,␊
+.selector-2·{␊
+··color:·green;␊
+··background-color:·blue;␊
 }␊

Add Titanium Style Sheets Example

No example found. Please submit a Pull Request!