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

react-ui-org · Mar 8, 2024 · a01148d · a01148d
1 parent 2c19ce8
commit a01148d
Show file tree

Hide file tree

Showing 36 changed files with 2,048 additions and 1,969 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.9.1",
     "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);
+    }
 }