From cf0088a4ead1485789842f4e5fa7fda8a6689a81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Thu, 13 Jul 2023 12:53:47 +0200
Subject: [PATCH] add px unit in css string if missing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Fredrik Adelöw <freben@gmail.com>
---
 .../transformers/styles/rules/layout.test.ts  | 28 +++++++++++++++++++
 .../transformers/styles/rules/layout.ts       | 14 ++++++++--
 2 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 plugins/techdocs/src/reader/transformers/styles/rules/layout.test.ts

diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/layout.test.ts b/plugins/techdocs/src/reader/transformers/styles/rules/layout.test.ts
new file mode 100644
index 0000000000..49f7ee51a5
--- /dev/null
+++ b/plugins/techdocs/src/reader/transformers/styles/rules/layout.test.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ensurePxUnit } from './layout';
+
+describe('ensurePxUnit', () => {
+  it('only adds a unit when necessary', () => {
+    expect(ensurePxUnit('1px')).toBe('1px');
+    expect(ensurePxUnit('-1.3px')).toBe('-1.3px');
+    expect(ensurePxUnit('1')).toBe('1px');
+    expect(ensurePxUnit('-1.3')).toBe('-1.3px');
+    expect(ensurePxUnit(1)).toBe('1px');
+    expect(ensurePxUnit(-1.3)).toBe('-1.3px');
+  });
+});
diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts b/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts
index ef5992defc..b5e4da81a8 100644
--- a/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts
+++ b/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts
@@ -18,6 +18,16 @@ import { RuleOptions } from './types';
 
 const SIDEBAR_WIDTH = '224px';
 
+// NOTE(freben): Since different versions of Material UI have been inconsistent
+// with whether they returned a unit or not with the theme spacing function, we
+// ensure that one is always added here to be sure that we work with all
+// versions of the library.
+export function ensurePxUnit(value: string | number) {
+  return typeof value === 'number' || value.match(/^[\d.-]+$/)
+    ? `${value}px`
+    : value;
+}
+
 export default ({ theme, sidebar }: RuleOptions) => `
 /*==================  Layout  ==================*/
 
@@ -42,7 +52,7 @@ export default ({ theme, sidebar }: RuleOptions) => `
 .md-nav__icon {
   height: 20px !important;
   width: 20px !important;
-  margin-left: ${theme.spacing(1)};
+  margin-left: ${ensurePxUnit(theme.spacing(1))};
 }
 .md-nav__icon svg {
   margin: 0;
@@ -76,7 +86,7 @@ export default ({ theme, sidebar }: RuleOptions) => `
   width: calc(12.1rem);
 }
 .md-sidebar--secondary {
-  right: ${theme.spacing(3)};
+  right: ${ensurePxUnit(theme.spacing(3))};
 }
 .md-sidebar::-webkit-scrollbar {
   width: 5px;