From 9e2aeee6a5c69862fb3cdbd2504715db2ffba3fc Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 16 Oct 2025 19:08:27 +0100
Subject: [PATCH] Fix @layer order

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/ui/css/styles.css                                | 4 ++--
 packages/ui/scripts/build-css.mjs                         | 8 +++++++-
 packages/ui/src/components/Avatar/Avatar.module.css       | 2 ++
 packages/ui/src/components/Box/Box.module.css             | 2 ++
 packages/ui/src/components/Button/Button.module.css       | 2 ++
 .../ui/src/components/ButtonIcon/ButtonIcon.module.css    | 2 ++
 packages/ui/src/components/Card/Card.module.css           | 2 ++
 packages/ui/src/components/Checkbox/Checkbox.module.css   | 2 ++
 .../ui/src/components/Collapsible/Collapsible.module.css  | 2 ++
 packages/ui/src/components/Container/Container.module.css | 2 ++
 packages/ui/src/components/Dialog/Dialog.module.css       | 2 ++
 .../ui/src/components/FieldError/FieldError.module.css    | 2 ++
 .../ui/src/components/FieldLabel/FieldLabel.module.css    | 2 ++
 packages/ui/src/components/Flex/Flex.module.css           | 2 ++
 packages/ui/src/components/Grid/Grid.module.css           | 2 ++
 packages/ui/src/components/Header/Header.module.css       | 2 ++
 .../ui/src/components/HeaderPage/HeaderPage.module.css    | 2 ++
 packages/ui/src/components/Link/Link.module.css           | 2 ++
 packages/ui/src/components/Menu/Menu.module.css           | 2 ++
 .../src/components/PasswordField/PasswordField.module.css | 2 ++
 packages/ui/src/components/Popover/Popover.module.css     | 2 ++
 .../ui/src/components/RadioGroup/RadioGroup.module.css    | 2 ++
 .../ui/src/components/SearchField/SearchField.module.css  | 2 ++
 packages/ui/src/components/Select/Select.module.css       | 2 ++
 packages/ui/src/components/Skeleton/Skeleton.module.css   | 2 ++
 packages/ui/src/components/Switch/Switch.module.css       | 2 ++
 packages/ui/src/components/Table/Table.module.css         | 2 ++
 .../components/TablePagination/TablePagination.module.css | 2 ++
 packages/ui/src/components/Tabs/Tabs.module.css           | 2 ++
 packages/ui/src/components/TagGroup/TagGroup.module.css   | 2 ++
 packages/ui/src/components/Text/Text.module.css           | 2 ++
 packages/ui/src/components/TextField/TextField.module.css | 2 ++
 packages/ui/src/components/Tooltip/Tooltip.module.css     | 2 ++
 packages/ui/src/css/styles.css                            | 2 +-
 34 files changed, 72 insertions(+), 4 deletions(-)

diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css
index 76c26e67ce..862de8e0e3 100644
--- a/packages/ui/css/styles.css
+++ b/packages/ui/css/styles.css
@@ -1,3 +1,5 @@
+@layer tokens, base, components, utilities;
+
 /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
 @layer tokens {
   :root {
@@ -9248,5 +9250,3 @@
     }
   }
 }
-
-@layer legacy;
diff --git a/packages/ui/scripts/build-css.mjs b/packages/ui/scripts/build-css.mjs
index 245b3cf282..c2443e93e4 100644
--- a/packages/ui/scripts/build-css.mjs
+++ b/packages/ui/scripts/build-css.mjs
@@ -50,7 +50,13 @@ async function buildCSS(logs = true) {
     code: bundleCode,
     minify: false,
   });
-  fs.writeFileSync(distFile, code);
+
+  // Prepend the layer order declaration that lightningcss removes during bundling
+  // This is crucial to maintain the correct layer cascade order
+  const layerDeclaration = '@layer tokens, base, components, utilities;\n\n';
+  const finalCode = layerDeclaration + code;
+
+  fs.writeFileSync(distFile, finalCode);
   if (logs) {
     console.log(chalk.blue('CSS transformed and minified: ') + 'styles.css');
     console.log(chalk.green('CSS file built successfully!'));
diff --git a/packages/ui/src/components/Avatar/Avatar.module.css b/packages/ui/src/components/Avatar/Avatar.module.css
index ce2573c4b0..f1517db3c2 100644
--- a/packages/ui/src/components/Avatar/Avatar.module.css
+++ b/packages/ui/src/components/Avatar/Avatar.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-AvatarRoot {
     display: inline-flex;
diff --git a/packages/ui/src/components/Box/Box.module.css b/packages/ui/src/components/Box/Box.module.css
index a1648b476c..688358fda0 100644
--- a/packages/ui/src/components/Box/Box.module.css
+++ b/packages/ui/src/components/Box/Box.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-Box {
     font-family: var(--bui-font-regular);
diff --git a/packages/ui/src/components/Button/Button.module.css b/packages/ui/src/components/Button/Button.module.css
index aec754c740..2216d0882b 100644
--- a/packages/ui/src/components/Button/Button.module.css
+++ b/packages/ui/src/components/Button/Button.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-Button {
     border: none;
diff --git a/packages/ui/src/components/ButtonIcon/ButtonIcon.module.css b/packages/ui/src/components/ButtonIcon/ButtonIcon.module.css
index 56b73a8a66..d26df27ec7 100644
--- a/packages/ui/src/components/ButtonIcon/ButtonIcon.module.css
+++ b/packages/ui/src/components/ButtonIcon/ButtonIcon.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-ButtonIcon {
     align-items: center;
diff --git a/packages/ui/src/components/Card/Card.module.css b/packages/ui/src/components/Card/Card.module.css
index 62d8d18126..85ae86901b 100644
--- a/packages/ui/src/components/Card/Card.module.css
+++ b/packages/ui/src/components/Card/Card.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-Card {
     display: flex;
diff --git a/packages/ui/src/components/Checkbox/Checkbox.module.css b/packages/ui/src/components/Checkbox/Checkbox.module.css
index af813d4098..2e08b08c1a 100644
--- a/packages/ui/src/components/Checkbox/Checkbox.module.css
+++ b/packages/ui/src/components/Checkbox/Checkbox.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-CheckboxRoot {
     border: none;
diff --git a/packages/ui/src/components/Collapsible/Collapsible.module.css b/packages/ui/src/components/Collapsible/Collapsible.module.css
index 35b0992a62..d3b394011c 100644
--- a/packages/ui/src/components/Collapsible/Collapsible.module.css
+++ b/packages/ui/src/components/Collapsible/Collapsible.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-CollapsiblePanel {
     display: flex;
diff --git a/packages/ui/src/components/Container/Container.module.css b/packages/ui/src/components/Container/Container.module.css
index 515e449457..a0dec1e581 100644
--- a/packages/ui/src/components/Container/Container.module.css
+++ b/packages/ui/src/components/Container/Container.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-Container {
     max-width: 120rem;
diff --git a/packages/ui/src/components/Dialog/Dialog.module.css b/packages/ui/src/components/Dialog/Dialog.module.css
index a8c90f9039..22d96146ea 100644
--- a/packages/ui/src/components/Dialog/Dialog.module.css
+++ b/packages/ui/src/components/Dialog/Dialog.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-DialogOverlay {
     position: fixed;
diff --git a/packages/ui/src/components/FieldError/FieldError.module.css b/packages/ui/src/components/FieldError/FieldError.module.css
index 90b0547ab7..17aa4d9fdf 100644
--- a/packages/ui/src/components/FieldError/FieldError.module.css
+++ b/packages/ui/src/components/FieldError/FieldError.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-FieldError {
     display: inline-block;
diff --git a/packages/ui/src/components/FieldLabel/FieldLabel.module.css b/packages/ui/src/components/FieldLabel/FieldLabel.module.css
index 0a70e69ea2..9aa7a7c250 100644
--- a/packages/ui/src/components/FieldLabel/FieldLabel.module.css
+++ b/packages/ui/src/components/FieldLabel/FieldLabel.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-FieldLabelWrapper {
     display: flex;
diff --git a/packages/ui/src/components/Flex/Flex.module.css b/packages/ui/src/components/Flex/Flex.module.css
index 7c5eee12cd..0d44fbd12f 100644
--- a/packages/ui/src/components/Flex/Flex.module.css
+++ b/packages/ui/src/components/Flex/Flex.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-Flex {
     display: flex;
diff --git a/packages/ui/src/components/Grid/Grid.module.css b/packages/ui/src/components/Grid/Grid.module.css
index 28e792ab54..ff98e9337f 100644
--- a/packages/ui/src/components/Grid/Grid.module.css
+++ b/packages/ui/src/components/Grid/Grid.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-Grid {
     display: grid;
diff --git a/packages/ui/src/components/Header/Header.module.css b/packages/ui/src/components/Header/Header.module.css
index 56f5573e0f..ad50c42e0c 100644
--- a/packages/ui/src/components/Header/Header.module.css
+++ b/packages/ui/src/components/Header/Header.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-HeaderToolbar {
     margin-bottom: var(--bui-space-6);
diff --git a/packages/ui/src/components/HeaderPage/HeaderPage.module.css b/packages/ui/src/components/HeaderPage/HeaderPage.module.css
index b85320c9d4..4a81c6dcb0 100644
--- a/packages/ui/src/components/HeaderPage/HeaderPage.module.css
+++ b/packages/ui/src/components/HeaderPage/HeaderPage.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-HeaderPage {
     display: flex;
diff --git a/packages/ui/src/components/Link/Link.module.css b/packages/ui/src/components/Link/Link.module.css
index 5931a1dfe2..5d017e9681 100644
--- a/packages/ui/src/components/Link/Link.module.css
+++ b/packages/ui/src/components/Link/Link.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-Link {
     font-family: var(--bui-font-regular);
diff --git a/packages/ui/src/components/Menu/Menu.module.css b/packages/ui/src/components/Menu/Menu.module.css
index 72b59f36bd..f97f3f57ff 100644
--- a/packages/ui/src/components/Menu/Menu.module.css
+++ b/packages/ui/src/components/Menu/Menu.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-MenuPopover {
     display: flex;
diff --git a/packages/ui/src/components/PasswordField/PasswordField.module.css b/packages/ui/src/components/PasswordField/PasswordField.module.css
index 55ea499a2c..bf78ab477f 100644
--- a/packages/ui/src/components/PasswordField/PasswordField.module.css
+++ b/packages/ui/src/components/PasswordField/PasswordField.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-PasswordField {
     display: flex;
diff --git a/packages/ui/src/components/Popover/Popover.module.css b/packages/ui/src/components/Popover/Popover.module.css
index 3f1cf66440..873dc33e81 100644
--- a/packages/ui/src/components/Popover/Popover.module.css
+++ b/packages/ui/src/components/Popover/Popover.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-Popover {
     margin-right: 12px;
diff --git a/packages/ui/src/components/RadioGroup/RadioGroup.module.css b/packages/ui/src/components/RadioGroup/RadioGroup.module.css
index 400a5216f4..acc6d677e4 100644
--- a/packages/ui/src/components/RadioGroup/RadioGroup.module.css
+++ b/packages/ui/src/components/RadioGroup/RadioGroup.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-RadioGroup {
     display: flex;
diff --git a/packages/ui/src/components/SearchField/SearchField.module.css b/packages/ui/src/components/SearchField/SearchField.module.css
index 37ef5e9b2c..29ec2cca31 100644
--- a/packages/ui/src/components/SearchField/SearchField.module.css
+++ b/packages/ui/src/components/SearchField/SearchField.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-SearchField {
     flex: 1;
diff --git a/packages/ui/src/components/Select/Select.module.css b/packages/ui/src/components/Select/Select.module.css
index a8dbe759dc..3adfd5af52 100644
--- a/packages/ui/src/components/Select/Select.module.css
+++ b/packages/ui/src/components/Select/Select.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-Select[data-invalid] {
     & .bui-SelectTrigger {
diff --git a/packages/ui/src/components/Skeleton/Skeleton.module.css b/packages/ui/src/components/Skeleton/Skeleton.module.css
index cbf297d24d..da2796244a 100644
--- a/packages/ui/src/components/Skeleton/Skeleton.module.css
+++ b/packages/ui/src/components/Skeleton/Skeleton.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-Skeleton {
     animation: var(--bui-animate-pulse);
diff --git a/packages/ui/src/components/Switch/Switch.module.css b/packages/ui/src/components/Switch/Switch.module.css
index 58735e2b78..447597c6d1 100644
--- a/packages/ui/src/components/Switch/Switch.module.css
+++ b/packages/ui/src/components/Switch/Switch.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-Switch {
     display: flex;
diff --git a/packages/ui/src/components/Table/Table.module.css b/packages/ui/src/components/Table/Table.module.css
index 3f7c397c64..64396d36fa 100644
--- a/packages/ui/src/components/Table/Table.module.css
+++ b/packages/ui/src/components/Table/Table.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-Table {
     width: 100%;
diff --git a/packages/ui/src/components/TablePagination/TablePagination.module.css b/packages/ui/src/components/TablePagination/TablePagination.module.css
index 9ad580e774..c785dc2e08 100644
--- a/packages/ui/src/components/TablePagination/TablePagination.module.css
+++ b/packages/ui/src/components/TablePagination/TablePagination.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-TablePagination {
     display: flex;
diff --git a/packages/ui/src/components/Tabs/Tabs.module.css b/packages/ui/src/components/Tabs/Tabs.module.css
index a58d123559..158a92952a 100644
--- a/packages/ui/src/components/Tabs/Tabs.module.css
+++ b/packages/ui/src/components/Tabs/Tabs.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-Tabs {
     /* Initialize CSS variables */
diff --git a/packages/ui/src/components/TagGroup/TagGroup.module.css b/packages/ui/src/components/TagGroup/TagGroup.module.css
index 096d003f83..25ea694b0f 100644
--- a/packages/ui/src/components/TagGroup/TagGroup.module.css
+++ b/packages/ui/src/components/TagGroup/TagGroup.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-TagList {
     display: flex;
diff --git a/packages/ui/src/components/Text/Text.module.css b/packages/ui/src/components/Text/Text.module.css
index 47f38fe30d..57de6f0ef8 100644
--- a/packages/ui/src/components/Text/Text.module.css
+++ b/packages/ui/src/components/Text/Text.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-Text {
     font-family: var(--bui-font-regular);
diff --git a/packages/ui/src/components/TextField/TextField.module.css b/packages/ui/src/components/TextField/TextField.module.css
index 170349a760..0ac9bc7f77 100644
--- a/packages/ui/src/components/TextField/TextField.module.css
+++ b/packages/ui/src/components/TextField/TextField.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-TextField {
     display: flex;
diff --git a/packages/ui/src/components/Tooltip/Tooltip.module.css b/packages/ui/src/components/Tooltip/Tooltip.module.css
index 7c035888ed..47fedff82d 100644
--- a/packages/ui/src/components/Tooltip/Tooltip.module.css
+++ b/packages/ui/src/components/Tooltip/Tooltip.module.css
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@layer tokens, base, components, utilities;
+
 @layer components {
   .bui-Tooltip {
     box-shadow: 0 10px 15px -3px rgba(0 0 0 / 0.1),
diff --git a/packages/ui/src/css/styles.css b/packages/ui/src/css/styles.css
index 94847931d5..fe9980c1de 100644
--- a/packages/ui/src/css/styles.css
+++ b/packages/ui/src/css/styles.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-@layer tokens, base, components, utilities, legacy;
+@layer tokens, base, components, utilities;
 
 /* Tokens */
 @import './tokens.css';