Fix @layer order

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
2025-10-16 19:08:27 +01:00
parent 498e1e8d61
commit 9e2aeee6a5
34 changed files with 72 additions and 4 deletions
@@ -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;
@@ -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!'));
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-AvatarRoot {
    display: inline-flex;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-Box {
    font-family: var(--bui-font-regular);
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-Button {
    border: none;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-ButtonIcon {
    align-items: center;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-Card {
    display: flex;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-CheckboxRoot {
    border: none;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-CollapsiblePanel {
    display: flex;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-Container {
    max-width: 120rem;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-DialogOverlay {
    position: fixed;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-FieldError {
    display: inline-block;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-FieldLabelWrapper {
    display: flex;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-Flex {
    display: flex;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-Grid {
    display: grid;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-HeaderToolbar {
    margin-bottom: var(--bui-space-6);
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-HeaderPage {
    display: flex;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-Link {
    font-family: var(--bui-font-regular);
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-MenuPopover {
    display: flex;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-PasswordField {
    display: flex;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-Popover {
    margin-right: 12px;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-RadioGroup {
    display: flex;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-SearchField {
    flex: 1;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-Select[data-invalid] {
    & .bui-SelectTrigger {
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-Skeleton {
    animation: var(--bui-animate-pulse);
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-Switch {
    display: flex;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-Table {
    width: 100%;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-TablePagination {
    display: flex;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-Tabs {
    /* Initialize CSS variables */
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-TagList {
    display: flex;
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-Text {
    font-family: var(--bui-font-regular);
@@ -14,6 +14,8 @@
 * limitations under the License.
 */

+@layer tokens, base, components, utilities;
+
@layer components {
  .bui-TextField {
    display: flex;
@@ -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),
@@ -14,7 +14,7 @@
 * limitations under the License.
 */

-@layer tokens, base, components, utilities, legacy;
+@layer tokens, base, components, utilities;

 /* Tokens */
@import './tokens.css';