add px unit in css string if missing

Signed-off-by: Fredrik Adelöw <freben@gmail.com>

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');
+  });
+});

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;