Compacted CSS to reduce script length.

In order to prioritize code readability and ease of external auditing, we have compacted the CSS section of the userscript. This has significantly reduced the script length by 400 lines, allowing for quicker skimming and easier focus on the most important parts of the code. Despite the compacting, the CSS remains fully readable and unobfuscated.
victornpb · Mar 5, 2023 · 19c01ed · 19c01ed
1 parent e14cd1b
commit 19c01ed
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 26 deletions.
diff --git a/build/strings-plugin.mjs b/build/strings-plugin.mjs
@@ -12,6 +12,7 @@ export function string(opts = {}) {
 
  transform(code, id) {
  if (filter(id)) {
+ if (opts.transform) code = opts.transform(code, id, opts);
  return {
  code: 'export default (`\n'+ code + '\n`);',
  map: { mappings: '' }

diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -91,10 +91,25 @@ const config = [
  json(),
  resolve(),
  commonjs(),
+
  banner(userScriptMetadataBlock),
+
+ // import html as string
+ string({
+ include: ['**/*.html'],
+ }),
+
+ // import css as string
  string({
- // Required to be specified
- include: ['**/*.html', '**/*.css'],
+ include: ['**/*.css'],
+ transform(code, id) {
+ // compact CSS
+ return code
+ .replace(/^\s*\n/gm, '') // remove empty lines
+ .replace(/\{\n */g, '{ ') // remove line break after {
+ .replace(/;\n */g, '; ') // remove line breaks after ;
+ .replace(/;\s(\/\*.+\*\/)\n/g,'; $1 '); // remove line break after comments on properties
+ }
  }),
  ]
  },

diff --git a/src/ui/main.css b/src/ui/main.css
@@ -21,6 +21,7 @@
 #undicord-btn.running {
  color: var(--button-danger-background) !important;
 }
+
 #undicord-btn.running progress {
  display: block;
 }
@@ -33,7 +34,7 @@
  right: 10px;
  display: flex;
  flex-direction: column;
- width:800px;
+ width: 800px;
  height: 80vh;
  min-width: 610px;
  max-width: 100vw;
@@ -81,13 +82,14 @@
 #undiscord.hide-sidebar .sidebar {
  display: none;
 }
+
 #undiscord.hide-sidebar .main {
  max-width: 100%;
 }
 
 #undiscord #logArea {
  font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;
- font-size: .75rem;
+ font-size: 0.75rem;
  overflow: auto;
  padding: 10px;
  user-select: text;
@@ -125,12 +127,11 @@
  width: 30px;
  height: 30px;
  transform: rotate(-45deg);
- background: repeating-linear-gradient( 0, var(--background-modifier-accent), var(--background-modifier-accent) 1px, transparent 2px, transparent 4px);
+ background: repeating-linear-gradient(0, var(--background-modifier-accent), var(--background-modifier-accent) 1px, transparent 2px, transparent 4px);
  cursor: nwse-resize;
 }
 
 /**** Elements ****/
-
 #undiscord summary {
  font-size: 16px;
  font-weight: 500;
@@ -151,7 +152,6 @@
  padding-left: 8px;
 }
 
-/* help link */
 #undiscord legend a {
  float: right;
  text-transform: initial;
@@ -161,14 +161,8 @@
  height: 8px;
  margin-top: 4px;
  flex-grow: 1;
- /* background-color: var(--background-primary);
- border-radius: 3px; */
 }
 
-/* #undiscord progress::-webkit-progress-value{
- background-color: var(--brand-experiment);
-} */
-
 #undiscord .importJson {
  display: flex;
  flex-direction: row;
@@ -177,4 +171,4 @@
 #undiscord .importJson button {
  margin-left: 5px;
  width: fit-content;
-}
+}
diff --git a/src/ui/theme.css b/src/ui/theme.css
@@ -100,7 +100,6 @@
  background-color: var(--input-background);
  border: none;
  transition: border-color 0.2s ease-in-out 0s;
-
  padding: 10px;
  height: 40px;
 }
@@ -127,8 +126,7 @@
 #undiscord input[type="password"],
 #undiscord input[type="datetime-local"],
 #undiscord input[type="number"],
-#undiscord input[type="range"]
-{
+#undiscord input[type="range"] {
  font-size: 16px;
  box-sizing: border-box;
  width: 100%;
@@ -197,6 +195,7 @@
  min-width: 96px;
  min-height: 38px;
 }
+
 #undiscord .sizeMedium.icon {
  width: 38px;
  min-width: 38px;
@@ -219,7 +218,6 @@
  background-color: var(--button-positive-background);
 }
 
-
 #undiscord .info {
  font-size: 12px;
  line-height: 16px;
@@ -262,9 +260,7 @@
  visibility: visible;
 }
 
-
 /**** functional classes ****/
-
 #undiscord.redact .priv {
  display: none !important;
 }
@@ -274,9 +270,11 @@
  background-color: var(--primary-700) !important;
  cursor: default;
 }
+
 #undiscord.redact x:hover {
  position: relative;
 }
+
 #undiscord.redact x:hover::after {
  content: "Redacted information (Streamer mode: ON)";
  position: absolute;
@@ -329,21 +327,27 @@
 #undiscord .log {
  margin-bottom: 0.25em;
 }
+
 #undiscord .log-debug {
  color: inherit;
 }
+
 #undiscord .log-info {
- color:#00b0f4;
+ color: #00b0f4;
 }
+
 #undiscord .log-verb {
- color:#72767d;
+ color: #72767d;
 }
+
 #undiscord .log-warn {
- color:#faa61a;
+ color: #faa61a;
 }
+
 #undiscord .log-error {
- color:#f04747;
+ color: #f04747;
 }
+
 #undiscord .log-success {
- color:#43b581;
-}
+ color: #43b581;
+}