Fix blank lines collapsing (#111)

* Prevent blank lines from collapsing

* Fix typo

MIGRATING.md

@@ -4,7 +4,7 @@
 
 ### Line highlighting is visible without custom CSS.
 
-Previously, the default line highlight background color was `transparent`, which meant a color had to be set with a CSS variable by the user. The reason for this limitation was that there is no sensible default that works for both light themes and dark themes, as a light highlight would be invisible on white, and a dark highlight would be invisible on black. As of v3, the plugin the luminance of each theme’s background color and selects a translucent white or translucent black highlight color as a default.
+Previously, the default line highlight background color was `transparent`, which meant a color had to be set with a CSS variable by the user. The reason for this limitation was that there is no sensible default that works for both light themes and dark themes, as a light highlight would be invisible on white, and a dark highlight would be invisible on black. As of v3, the plugin computes the luminance of each theme’s background color and selects a translucent white or translucent black highlight color as a default.
 
 This is unlikely to break existing sites, as the CSS variables continue to work as a customization. However, as part of upgrading to v3, you may be able to remove the variables you set if you’re happy with the new defaults. If, for some reason, you were relying on the old behavior of an invisible default, sorry, don’t do that 🤷🏻‍♂️
 

styles.css

@@ -52,6 +52,13 @@
   padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
 }
 
+.grvsc-source:empty::after {
+  content: ' ';
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
 .grvsc-gutter + .grvsc-source {
   padding-left: 0.75rem;
   padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);

test/__snapshots__/index.js.snap

@@ -1,5 +1,226 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`GraphQL resolvers blank-lines 1`] = `
+Object {
+  "data": Object {
+    "markdownRemark": Object {
+      "grvscCodeBlocks": Array [
+        Object {
+          "codeClassName": "grvsc-code",
+          "defaultTheme": Object {
+            "conditions": Array [
+              Object {
+                "condition": "default",
+                "value": null,
+              },
+            ],
+            "identifier": "Default Dark+",
+          },
+          "html": "<pre class=\\"grvsc-container default-dark\\" data-language=\\"ts\\" data-index=\\"0\\"><code class=\\"grvsc-code\\"><span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"><span class=\\"mtk3\\">// You have to make sure</span></span></span>
+<span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"></span></span>
+<span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"><span class=\\"mtk3\\">// blank lines</span></span></span>
+<span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"></span></span>
+<span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"><span class=\\"mtk3\\">// don’t disappear</span></span></span></code></pre>",
+          "index": 0,
+          "language": "ts",
+          "meta": Object {},
+          "preClassName": "grvsc-container default-dark",
+          "text": "// You have to make sure
+
+// blank lines
+
+// don’t disappear",
+          "tokenizedLines": Array [
+            Object {
+              "attrs": Object {},
+              "className": "grvsc-line",
+              "data": Object {},
+              "diff": null,
+              "html": "<span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"><span class=\\"mtk3\\">// You have to make sure</span></span></span>",
+              "isHighlighted": null,
+              "lineNumber": null,
+              "text": "// You have to make sure",
+              "tokens": Array [
+                Object {
+                  "additionalThemeTokenData": Array [],
+                  "className": "mtk3",
+                  "defaultThemeTokenData": Object {
+                    "bold": false,
+                    "className": "mtk3",
+                    "color": "#6A9955",
+                    "italic": false,
+                    "themeIdentifier": "Default Dark+",
+                    "underline": false,
+                  },
+                  "endIndex": 2,
+                  "html": "<span class=\\"mtk3\\">//</span>",
+                  "scopes": Array [
+                    "source.ts",
+                    "comment.line.double-slash.ts",
+                    "punctuation.definition.comment.ts",
+                  ],
+                  "startIndex": 0,
+                  "text": "//",
+                },
+                Object {
+                  "additionalThemeTokenData": Array [],
+                  "className": "mtk3",
+                  "defaultThemeTokenData": Object {
+                    "bold": false,
+                    "className": "mtk3",
+                    "color": "#6A9955",
+                    "italic": false,
+                    "themeIdentifier": "Default Dark+",
+                    "underline": false,
+                  },
+                  "endIndex": 24,
+                  "html": "<span class=\\"mtk3\\"> You have to make sure</span>",
+                  "scopes": Array [
+                    "source.ts",
+                    "comment.line.double-slash.ts",
+                  ],
+                  "startIndex": 2,
+                  "text": " You have to make sure",
+                },
+              ],
+            },
+            Object {
+              "attrs": Object {},
+              "className": "grvsc-line",
+              "data": Object {},
+              "diff": null,
+              "html": "<span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"></span></span>",
+              "isHighlighted": null,
+              "lineNumber": null,
+              "text": "",
+              "tokens": Array [],
+            },
+            Object {
+              "attrs": Object {},
+              "className": "grvsc-line",
+              "data": Object {},
+              "diff": null,
+              "html": "<span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"><span class=\\"mtk3\\">// blank lines</span></span></span>",
+              "isHighlighted": null,
+              "lineNumber": null,
+              "text": "// blank lines",
+              "tokens": Array [
+                Object {
+                  "additionalThemeTokenData": Array [],
+                  "className": "mtk3",
+                  "defaultThemeTokenData": Object {
+                    "bold": false,
+                    "className": "mtk3",
+                    "color": "#6A9955",
+                    "italic": false,
+                    "themeIdentifier": "Default Dark+",
+                    "underline": false,
+                  },
+                  "endIndex": 2,
+                  "html": "<span class=\\"mtk3\\">//</span>",
+                  "scopes": Array [
+                    "source.ts",
+                    "comment.line.double-slash.ts",
+                    "punctuation.definition.comment.ts",
+                  ],
+                  "startIndex": 0,
+                  "text": "//",
+                },
+                Object {
+                  "additionalThemeTokenData": Array [],
+                  "className": "mtk3",
+                  "defaultThemeTokenData": Object {
+                    "bold": false,
+                    "className": "mtk3",
+                    "color": "#6A9955",
+                    "italic": false,
+                    "themeIdentifier": "Default Dark+",
+                    "underline": false,
+                  },
+                  "endIndex": 14,
+                  "html": "<span class=\\"mtk3\\"> blank lines</span>",
+                  "scopes": Array [
+                    "source.ts",
+                    "comment.line.double-slash.ts",
+                  ],
+                  "startIndex": 2,
+                  "text": " blank lines",
+                },
+              ],
+            },
+            Object {
+              "attrs": Object {},
+              "className": "grvsc-line",
+              "data": Object {},
+              "diff": null,
+              "html": "<span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"></span></span>",
+              "isHighlighted": null,
+              "lineNumber": null,
+              "text": "",
+              "tokens": Array [],
+            },
+            Object {
+              "attrs": Object {},
+              "className": "grvsc-line",
+              "data": Object {},
+              "diff": null,
+              "html": "<span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"><span class=\\"mtk3\\">// don’t disappear</span></span></span>",
+              "isHighlighted": null,
+              "lineNumber": null,
+              "text": "// don’t disappear",
+              "tokens": Array [
+                Object {
+                  "additionalThemeTokenData": Array [],
+                  "className": "mtk3",
+                  "defaultThemeTokenData": Object {
+                    "bold": false,
+                    "className": "mtk3",
+                    "color": "#6A9955",
+                    "italic": false,
+                    "themeIdentifier": "Default Dark+",
+                    "underline": false,
+                  },
+                  "endIndex": 2,
+                  "html": "<span class=\\"mtk3\\">//</span>",
+                  "scopes": Array [
+                    "source.ts",
+                    "comment.line.double-slash.ts",
+                    "punctuation.definition.comment.ts",
+                  ],
+                  "startIndex": 0,
+                  "text": "//",
+                },
+                Object {
+                  "additionalThemeTokenData": Array [],
+                  "className": "mtk3",
+                  "defaultThemeTokenData": Object {
+                    "bold": false,
+                    "className": "mtk3",
+                    "color": "#6A9955",
+                    "italic": false,
+                    "themeIdentifier": "Default Dark+",
+                    "underline": false,
+                  },
+                  "endIndex": 18,
+                  "html": "<span class=\\"mtk3\\"> don’t disappear</span>",
+                  "scopes": Array [
+                    "source.ts",
+                    "comment.line.double-slash.ts",
+                  ],
+                  "startIndex": 2,
+                  "text": " don’t disappear",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      "grvscCodeSpans": Array [],
+    },
+  },
+}
+`;
+
 exports[`GraphQL resolvers bug-37 1`] = `
 Object {
   "data": Object {

test/cases/blank-lines/test.md

@@ -0,0 +1,9 @@
+# Blank lines
+
+```ts
+// You have to make sure
+
+// blank lines
+
+// don’t disappear
+```

test/html/baselines/blank-lines.html

@@ -0,0 +1,105 @@
+<h1>Blank lines</h1>
+<pre class="grvsc-container default-dark" data-language="ts" data-index="0"><code class="grvsc-code"><span class="grvsc-line"><span class="grvsc-source"><span class="mtk3">// You have to make sure</span></span></span>
+<span class="grvsc-line"><span class="grvsc-source"></span></span>
+<span class="grvsc-line"><span class="grvsc-source"><span class="mtk3">// blank lines</span></span></span>
+<span class="grvsc-line"><span class="grvsc-source"></span></span>
+<span class="grvsc-line"><span class="grvsc-source"><span class="mtk3">// don’t disappear</span></span></span></code></pre>
+<style class="grvsc-styles">
+  .grvsc-container {
+    overflow: auto;
+    position: relative;
+    -webkit-overflow-scrolling: touch;
+    padding-top: 1rem;
+    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
+    padding-bottom: 1rem;
+    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
+    border-radius: 8px;
+    border-radius: var(--grvsc-border-radius, 8px);
+    font-feature-settings: normal;
+    line-height: 1.4;
+  }
+
+  .grvsc-code {
+    display: table;
+  }
+
+  .grvsc-line {
+    display: table-row;
+    box-sizing: border-box;
+    width: 100%;
+    position: relative;
+  }
+
+  .grvsc-line > * {
+    position: relative;
+  }
+
+  .grvsc-gutter-pad {
+    display: table-cell;
+    padding-left: 0.75rem;
+    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
+  }
+
+  .grvsc-gutter {
+    display: table-cell;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+  }
+
+  .grvsc-gutter::before {
+    content: attr(data-content);
+  }
+
+  .grvsc-source {
+    display: table-cell;
+    padding-left: 1.5rem;
+    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
+    padding-right: 1.5rem;
+    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
+  }
+
+  .grvsc-source:empty::after {
+    content: ' ';
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+  }
+
+  .grvsc-gutter + .grvsc-source {
+    padding-left: 0.75rem;
+    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
+  }
+
+  /* Line transformer styles */
+
+  .grvsc-has-line-highlighting > .grvsc-code > .grvsc-line::before {
+    content: ' ';
+    position: absolute;
+    width: 100%;
+  }
+
+  .grvsc-line-diff-add::before {
+    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));
+  }
+
+  .grvsc-line-diff-del::before {
+    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));
+  }
+
+  .grvsc-line-number {
+    padding: 0 2px;
+    text-align: right;
+    opacity: 0.7;
+  }
+
+  .default-dark {
+    background-color: #1E1E1E;
+    color: #D4D4D4;
+  }
+  .default-dark .mtk3 { color: #6A9955; }
+  .default-dark .grvsc-line-highlighted::before {
+    background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));
+    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));
+  }
+</style>

test/html/baselines/bug-37.html

@@ -64,6 +64,13 @@
     padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
   }
 
+  .grvsc-source:empty::after {
+    content: ' ';
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+  }
+
   .grvsc-gutter + .grvsc-source {
     padding-left: 0.75rem;
     padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);

test/html/baselines/bug-93.html

@@ -63,6 +63,13 @@ <h1>TypeError: Cannot read property 'marker' of undefined</h1>
     padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
   }
 
+  .grvsc-source:empty::after {
+    content: ' ';
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+  }
+
   .grvsc-gutter + .grvsc-source {
     padding-left: 0.75rem;
     padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);