Leverage CSS cascade layers to fix and user-proof styles order

As long as `layers.scss` (layers order definition) is called first, our Sass styles can be imported in any order. It solves the incorrect (but unavoidable, due to the way we compile CSS) call order of styles in our `index.js`. Also, developers can now extend the CSS cascade instead of just prepending or appending their styles to ours. For example: ```css /* My custom app styles */ @layer foundation.elements { code { background-color: silver; } } ```
react-ui-org · Mar 27, 2024 · 45212f3 · 45212f3
1 parent 7a0703e
commit 45212f3
Show file tree

Hide file tree

Showing 45 changed files with 3,207 additions and 3,081 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -76,7 +76,7 @@
     "babel-jest": "^29.6.4",
     "babel-loader": "^9.1.3",
     "core-js": "^3.32.1",
-    "css-loader": "^6.8.1",
+    "css-loader": "^6.10.0",
     "eslint": "^8.48.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.28.1",

diff --git a/src/components/Alert/Alert.module.scss b/src/components/Alert/Alert.module.scss
@@ -6,93 +6,95 @@
 @use "theme";
 @use "tools";
 
-.root {
-    position: relative;
-    display: flex;
-    align-items: flex-start;
-    width: 100%;
-    color: var(--rui-local-color);
-    border-width: theme.$border-width theme.$border-width theme.$border-width theme.$stripe-width;
-    border-style: solid;
-    border-color: var(--rui-local-foreground-color);
-    border-radius: theme.$border-radius;
-    background-color: var(--rui-local-background-color);
-}
-
-.icon,
-.message {
-    padding: theme.$padding;
-}
-
-.close,
-.icon {
-    height: settings.$min-height;
-    color: var(--rui-local-foreground-color);
-}
-
-.icon {
-    display: flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    padding-right: 0;
-}
-
-.message {
-    flex-grow: 1;
-    font-weight: theme.$font-weight;
-    font-size: settings.$font-size;
-    line-height: settings.$line-height;
-}
-
-.message a,
-.message strong {
-    font-weight: theme.$emphasis-font-weight;
-    color: var(--rui-local-foreground-color);
-}
-
-.close {
-    @include reset.button();
-    @include accessibility.min-tap-target();
-
-    padding: theme.$padding;
-    font-size: map.get(typography.$font-size-values, 4);
-    line-height: 1;
-}
-
-.closeSign {
-    position: relative;
-    top: -0.1em;
-}
-
-.isRootColorSuccess {
-    @include tools.color(success);
-}
-
-.isRootColorWarning {
-    @include tools.color(warning);
-}
-
-.isRootColorDanger {
-    @include tools.color(danger);
-}
-
-.isRootColorHelp {
-    @include tools.color(help);
-}
-
-.isRootColorInfo {
-    @include tools.color(info);
-}
-
-.isRootColorNote {
-    @include tools.color(note);
-}
-
-.isRootColorLight {
-    @include tools.color(light);
-}
-
-.isRootColorDark {
-    @include tools.color(dark);
+@layer components.alert {
+    .root {
+        position: relative;
+        display: flex;
+        align-items: flex-start;
+        width: 100%;
+        color: var(--rui-local-color);
+        border-width: theme.$border-width theme.$border-width theme.$border-width theme.$stripe-width;
+        border-style: solid;
+        border-color: var(--rui-local-foreground-color);
+        border-radius: theme.$border-radius;
+        background-color: var(--rui-local-background-color);
+    }
+
+    .icon,
+    .message {
+        padding: theme.$padding;
+    }
+
+    .close,
+    .icon {
+        height: settings.$min-height;
+        color: var(--rui-local-foreground-color);
+    }
+
+    .icon {
+        display: flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        padding-right: 0;
+    }
+
+    .message {
+        flex-grow: 1;
+        font-weight: theme.$font-weight;
+        font-size: settings.$font-size;
+        line-height: settings.$line-height;
+    }
+
+    .message a,
+    .message strong {
+        font-weight: theme.$emphasis-font-weight;
+        color: var(--rui-local-foreground-color);
+    }
+
+    .close {
+        @include reset.button();
+        @include accessibility.min-tap-target();
+
+        padding: theme.$padding;
+        font-size: map.get(typography.$font-size-values, 4);
+        line-height: 1;
+    }
+
+    .closeSign {
+        position: relative;
+        top: -0.1em;
+    }
+
+    .isRootColorSuccess {
+        @include tools.color(success);
+    }
+
+    .isRootColorWarning {
+        @include tools.color(warning);
+    }
+
+    .isRootColorDanger {
+        @include tools.color(danger);
+    }
+
+    .isRootColorHelp {
+        @include tools.color(help);
+    }
+
+    .isRootColorInfo {
+        @include tools.color(info);
+    }
+
+    .isRootColorNote {
+        @include tools.color(note);
+    }
+
+    .isRootColorLight {
+        @include tools.color(light);
+    }
+
+    .isRootColorDark {
+        @include tools.color(dark);
+    }
 }