Default to 4 characters where tab-size isn't set

source/features/show-whitespace.css

@@ -1,32 +1,3 @@
-/*
-Can't use this because attributes are strings and calc() won't cast them
-https://stackoverflow.com/a/40815884
-
-[data-tab-size] {
- --tab-size: attr(data-tab-size);
-}
-*/
-
-[data-tab-size='2'] {
- --tab-size: 2;
-}
-
-[data-tab-size='4'] {
- --tab-size: 4;
-}
-
-[data-tab-size='8'] {
- --tab-size: 8;
-}
-
-[data-tab-size='10'] {
- --tab-size: 10;
-}
-
-[data-tab-size='12'] {
- --tab-size: 12;
-}
-
 [data-rgh-whitespace] {
  line-height: 1em;
  background-clip: border-box;
@@ -36,7 +7,7 @@ https://stackoverflow.com/a/40815884
 
 [data-rgh-whitespace='tab'] {
  background-image: url('data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M9.5 10.44L6.62 8.12L7.32 7.26L12.04 11V11.44L7.28 14.9L6.62 13.9L9.48 11.78H0V10.44H9.5Z" fill="rgba(128, 128, 128, 50%25)"/%3E%3C/svg%3E');
- background-size: calc(var(--tab-size, 4) * 1ch) 1.25em;
+ background-size: calc(var(--tab-size) * 1ch) 1.25em;
 }
 
 [data-rgh-whitespace='space'] {

source/features/tab-size.css

@@ -0,0 +1,42 @@
+/* Make tab-indented code more readable on GitHub and Gist */
+
+* {
+ -moz-tab-size: var(--tab-size) !important;
+ tab-size: var(--tab-size) !important;
+}
+
+[data-tab-size='2'] {
+ --tab-size: 2;
+}
+
+:root, /* Changes the browser default */
+.comment-body [data-tab-size='8'], /* User setting is ignored in comments #4833 */
+[data-tab-size='4'] {
+ --tab-size: 4;
+}
+
+[data-tab-size='8'] {
+ --tab-size: 8;
+}
+
+[data-tab-size='10'] {
+ --tab-size: 10;
+}
+
+[data-tab-size='12'] {
+ --tab-size: 12;
+}
+
+/*
+Can't use this because attr() returns strings and casting isn't supported anywhere yet
+https://developer.mozilla.org/en-US/docs/Web/CSS/attr
+
+[data-tab-size] {
+ --tab-size: attr(data-tab-size);
+}
+*/
+
+/*
+Test URLs
+https://github.com/refined-github/sandbox/pull/19
+*/

source/refined-github.css

@@ -5,16 +5,6 @@
  --rgh-background: var(--color-canvas-default, var(--color-bg-canvas, #fff));
 }
 
-/* Make tab indented code more readable on GitHub and Gist */
-.comment-body [data-tab-size='8'] { /* User setting is ignored in comments #4833 */
- --tab-size: 4;
-}
-
-* {
- -moz-tab-size: var(--tab-size) !important;
- tab-size: var(--tab-size) !important;
-}
-
 /* For `open-all-selected` and `pr-filters`: set a reduced padding for all buttons for #1830 and #1904 */
 #js-issues-toolbar .table-list-header-toggle details {
  padding: 0 !important;

source/refined-github.ts

@@ -2,6 +2,7 @@ import './helpers/types.d.ts';
 
 import './refined-github.css';
 import './features/github-bugs.css';
+import './features/tab-size.css';
 import './features/scrollable-code-and-blockquote.css';
 import './features/center-reactions-popup.css';
 import './features/safer-destructive-actions.css';