Setup box sizing (#138)

* Add postcss box-sizing plugin

* Remove unnecessary box-sizing declarations

* Formatting fixes

* Bump version to 1.0.0-beta.23

Author: librowski

packages/ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@synergycodes/overflow-ui",
   "type": "module",
-  "version": "1.0.0-beta.22",
+  "version": "1.0.0-beta.23",
   "description": "A React library for creating node-based UIs and diagram-driven applications. Perfect for React Flow users, providing ready-to-use node templates and components that work seamlessly with React Flow's ecosystem.",
   "keywords": [
     "react",
@@ -66,6 +66,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "postcss": "^8.5.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "^5.6.3",

packages/ui/postcss-box-sizing.mts

@@ -0,0 +1,42 @@
+import type { Plugin } from 'postcss';
+
+/**
+ * PostCSS plugin that adds `box-sizing: border-box` to every rule
+ * in CSS Module files (*.module.css). This ensures all library
+ * components use border-box sizing without leaking styles to users.
+ */
+export function boxSizingPlugin(): Plugin {
+  return {
+    postcssPlugin: 'postcss-box-sizing',
+    prepare() {
+      return {
+        OnceExit(root) {
+          const file = root.source?.input?.file ?? '';
+          if (!file.endsWith('.module.css')) return;
+
+          root.walkRules((rule) => {
+            if (rule.selector === ':root') return;
+
+            const hasDeclarations = rule.nodes?.some(
+              (node) => node.type === 'decl',
+            );
+
+            // Skip rules that only contain nested rules (no declarations).
+            // Adding box-sizing to such container rules would leak to unintended elements
+            if (!hasDeclarations) return;
+
+            const hasBoxSizing = rule.nodes?.some(
+              (node) => node.type === 'decl' && node.prop === 'box-sizing',
+            );
+
+            if (!hasBoxSizing) {
+              rule.prepend({ prop: 'box-sizing', value: 'border-box' });
+            }
+          });
+        },
+      };
+    },
+  };
+}
+
+boxSizingPlugin.postcss = true;

packages/ui/src/components/avatar/avatar.module.css

@@ -19,23 +19,23 @@
   justify-content: center;
 
   &.extra-large {
-    width: 2.5rem;
-    height: 2.5rem;
+    width: calc(2.5rem + 2 * var(--ax-public-avatar-border-size));
+    height: calc(2.5rem + 2 * var(--ax-public-avatar-border-size));
   }
 
   &.large {
-    width: 2rem;
-    height: 2rem;
+    width: calc(2rem + 2 * var(--ax-public-avatar-border-size));
+    height: calc(2rem + 2 * var(--ax-public-avatar-border-size));
   }
 
   &.medium {
-    width: 1.5rem;
-    height: 1.5rem;
+    width: calc(1.5rem + 2 * var(--ax-public-avatar-border-size));
+    height: calc(1.5rem + 2 * var(--ax-public-avatar-border-size));
   }
 
   &.small {
-    width: 1.125rem;
-    height: 1.125rem;
+    width: calc(1.125rem + 2 * var(--ax-public-avatar-border-size));
+    height: calc(1.125rem + 2 * var(--ax-public-avatar-border-size));
   }
 
   img {

packages/ui/src/components/collapsible/collapsible.module.css

@@ -22,7 +22,6 @@
   overflow: hidden;
   transition: grid-template-rows
     var(--ax-public-collapsible-transition-duration) ease;
-  box-sizing: border-box;
 
   &.expanded {
     overflow: unset;

packages/ui/src/components/modal/modal.module.css

@@ -63,7 +63,6 @@
     align-items: center;
     justify-content: center;
     height: 100vh;
-    box-sizing: border-box;
     padding: 1.5rem;
     overflow: auto;
   }

packages/ui/src/components/segment-picker/segment-picker.module.css

@@ -22,7 +22,6 @@
 
     &:not(.circle) {
       width: 100%;
-      box-sizing: border-box;
     }
   }
 }

packages/ui/src/components/snackbar/snackbar.module.css

@@ -72,7 +72,11 @@
 
 .container {
   display: flex;
-  width: var(--ax-public-snackbar-width);
+  width: calc(
+    var(--ax-public-snackbar-width) + 2 *
+      var(--ax-token-spacing-snackbar-h-pad-1) + 2 *
+      var(--ax-public-snackbar-border-size)
+  );
   border: var(--ax-public-snackbar-border-size) solid
     var(--ax-public-snackbar-default-border);
   border-radius: var(--ax-public-snackbar-border-radius);

packages/ui/src/components/switch/switch.module.css

@@ -33,7 +33,6 @@
     border-radius: 100px;
     border: var(--ax-public-switch-border-size) solid
       var(--ax-public-switch-outline-color);
-    box-sizing: border-box;
 
     &:not(:hover) {
       transition: background-color var(--ax-public-transition);

packages/ui/src/components/tooltip/tooltip.module.css

@@ -11,7 +11,6 @@
 .container {
   padding: var(--ax-public-tooltip-padding);
   border-radius: var(--ax-public-tooltip-radius-size);
-  box-sizing: border-box;
   width: max-content;
   max-width: 33vw;
   z-index: 100;

packages/ui/src/shared/styles/list-item.module.css

@@ -31,7 +31,6 @@
     border-radius: var(--ax-public-list-border-radius);
     width: max-content;
     min-width: 100%;
-    box-sizing: border-box;
     cursor: pointer;
     color: var(--ax-public-list-item-color);