feat: css specificity has changed with @layer

.storybook/utils.tsx

@@ -33,7 +33,7 @@ export const themeChangeDecorator = (Story: FC, context: { globals: { theme?: st
 export const iconObjects = {
   string: "folder",
   "<i>": <i className="bi bi-airplane" />,
-  "<span>": <span className="material-symbols-outlined">mood</span>,
+  "<span>": <span className="material-symbols">mood</span>,
   "<svg>": (
     <svg viewBox="0 0 16 16" width="1em" height="1em" fill="none" stroke="currentColor" strokeWidth="1.5">
       <path d="M8 1.5 3 4v4c0 3 2 5 5 6 3-1 5-3 5-6V4z" />
@@ -49,7 +49,7 @@ export const iconOptions = {
 export const iconDecorator = (StoryComponent: FC): JSX.Element => (
   <>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols" />
     <StoryComponent />
   </>
 );

eslint.config.mjs

@@ -4,6 +4,7 @@ import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended"
 import reactHooks from "eslint-plugin-react-hooks";
 import react from "eslint-plugin-react";
 import compat from "eslint-plugin-compat";
+import globals from "globals";
 
 export default [
   js.configs.recommended,
@@ -13,6 +14,12 @@ export default [
     files: ["**/*.js", "**/*.jsx", "**/*.mjs", "**/*.cjs"],
     ...typescript.configs.disableTypeChecked,
   },
+  {
+    files: ["**/*.cjs"],
+    languageOptions: {
+      globals: globals.commonjs,
+    },
+  },
   {
     files: ["**/*.{js,jsx,ts,tsx}"],
     plugins: {

postcss.config.mjs

@@ -0,0 +1,7 @@
+import { createRequire } from "module";
+
+const require = createRequire(import.meta.url);
+
+export default {
+  plugins: [require.resolve("./src/scripts/postcssWrapLayer.cjs")],
+};

rollup.config.mjs

@@ -14,6 +14,9 @@ import path from "path";
 import process from "node:process";
 import { fileURLToPath } from "url";
 import json from "@rollup/plugin-json";
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
+const wrapLayerPlugin = require("./src/scripts/postcssWrapLayer.cjs");
 
 process.env.NODE_ENV = process.env.NODE_ENV || "production";
 
@@ -107,6 +110,7 @@ export default [
           url({
             url: "inline", // enable inline assets using base64 encoding
           }),
+          wrapLayerPlugin,
         ],
       }),
       copy({

src/docs/v1/icons/icons.mdx

@@ -41,9 +41,9 @@ In order to use a custom font icon library, you should include the desired icon
 
 ```jsx
 // ...your root layout file
-<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols" />
 
-<MotifProvider baseIconClass="material-icons">
+<MotifProvider baseIconClass="material-symbols">
   {/* your app's children */ }
 </MotifProvider>
 ```

src/lib/components/Accordion/Accordion.module.scss

@@ -54,7 +54,7 @@
   }
 
   .icon {
-    font-size: var(--base-sizing-24x);
+    --mtf-icon-size: var(--base-sizing-24x);
   }
 
   .collapseIcon {

src/lib/components/Avatar/Avatar.module.scss

@@ -44,7 +44,7 @@ $variants: ("primary", "secondary", "info", "success", "warning", "danger");
       @include font($fontType, $fontSize, $fontWeight);
     }
     &.icon span {
-      font-size: var(--base-sizing-#{$iconSize});
+      --mtf-icon-size: var(--base-sizing-#{$iconSize});
     }
   }
 }

src/lib/components/Avatar/__snapshots__/Avatar.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`Avatar should be rendered with only required props 1`] = `
     data-testid="avatarItem"
   >
     <span
-      class="Root md motifIconsDefault"
+      class="Root motifIconsDefault"
       lang="en"
       translate="no"
     >

src/lib/components/Badge/Badge.module.scss

@@ -23,7 +23,7 @@ $positions: ("top-left", "top-right", "bottom-left", "bottom-right");
 }
 
 .icon {
-  font-size: var(--base-sizing-16x);
+  --mtf-icon-size: var(--base-sizing-16x);
 }
 
 .badge {

src/lib/components/Breadcrumb/Breadcrumb.module.scss

@@ -34,13 +34,13 @@
     .right-icon {
       margin-left: var(--base-sizing-8x);
       color: var(--theme-color-text-base-caption-light);
-      font-size: var(--base-sizing-14x);
+      --mtf-icon-size: var(--base-sizing-14x);
     }
   }
 
   .homepage-icon {
     color: var(--theme-color-text-primary-default);
     margin-right: var(--base-sizing-8x);
-    font-size: var(--base-sizing-22x);
+    --mtf-icon-size: var(--base-sizing-22x);
   }
 }

src/lib/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Breadcrumb should render with only required props 1`] = `
     class="Root"
   >
     <span
-      class="Root md motifIconsDefault homepage-icon"
+      class="Root motifIconsDefault homepage-icon"
       lang="en"
       translate="no"
     >
@@ -21,7 +21,7 @@ exports[`Breadcrumb should render with only required props 1`] = `
         Ana Sayfa
       </a>
       <span
-        class="Root md motifIconsDefault right-icon"
+        class="Root motifIconsDefault right-icon"
         lang="en"
         translate="no"
       >
@@ -37,7 +37,7 @@ exports[`Breadcrumb should render with only required props 1`] = `
         ...
       </span>
       <span
-        class="Root md motifIconsDefault right-icon"
+        class="Root motifIconsDefault right-icon"
         lang="en"
         translate="no"
       >
@@ -53,7 +53,7 @@ exports[`Breadcrumb should render with only required props 1`] = `
         Microsoft
       </a>
       <span
-        class="Root md motifIconsDefault right-icon"
+        class="Root motifIconsDefault right-icon"
         lang="en"
         translate="no"
       >

src/lib/components/BusinessCard/BusinessCard.module.scss

@@ -11,7 +11,7 @@ $variants: (("neutral", "light"), ("primary", "primary"), ("secondary", "seconda
   background: var(--theme-color-surface-base-bg-light);
 
   .icon {
-    font-size: var(--base-sizing-40x);
+    --mtf-icon-size: var(--base-sizing-40x);
   }
   .title {
     @include font("base", "lg", "700");

src/lib/components/Button/Button.module.scss

@@ -72,7 +72,7 @@ $variants: (
     gap: var(--base-sizing-#{$pv});
     @include font("base", $fontSize, "600");
     .icon {
-      font-size: var(--base-sizing-#{$iconSize});
+      --mtf-icon-size: var(--base-sizing-#{$iconSize});
     }
   }
 }

src/lib/components/ButtonGroup/ButtonGroup.module.scss

@@ -1,12 +1,7 @@
 @use "@styles" as *;
 
 // size, paddingH, paddingV, gap, iconSize
-$sizes: (
-  ("xs", "8x", "4x", "4x", "18x"),
-  ("sm", "12x", "6x", "6x", "20x"),
-  ("md", "16x", "8x", "8x", "22x"),
-  ("lg", "20x", "10x", "10x", "24x")
-);
+$sizes: (("xs", "8x", "4x", "4x", "18x"), ("sm", "12x", "6x", "6x", "20x"), ("md", "16x", "8x", "8x", "22x"), ("lg", "20x", "10x", "10x", "24x"));
 
 .Root {
   display: inline-flex;
@@ -213,7 +208,7 @@ $sizes: (
     }
 
     .icon {
-      font-size: var(--base-sizing-#{$iconSize});
+      --mtf-icon-size: var(--base-sizing-#{$iconSize});
     }
 
     .button__dropdownItem .button {

src/lib/components/Carousel/__snapshots__/Carousel.test.tsx.snap

@@ -69,7 +69,7 @@ exports[`Carousel should be rendered with only required props and should have de
       type="button"
     >
       <span
-        class="Root md mtf-ui-icons xxl"
+        class="Root mtf-ui-icons xxl"
         lang="en"
         translate="no"
       >
@@ -82,7 +82,7 @@ exports[`Carousel should be rendered with only required props and should have de
       type="button"
     >
       <span
-        class="Root md mtf-ui-icons xxl"
+        class="Root mtf-ui-icons xxl"
         lang="en"
         translate="no"
       >

src/lib/components/Chip/Chip.module.scss

@@ -33,10 +33,11 @@ $variants: (
       margin: 0 var(--base-sizing-#{$padding});
     }
     .icon-left {
-      font-size: var(--base-sizing-#{$iconLeftSize});
+      --mtf-icon-size: var(--base-sizing-#{$iconLeftSize});
       margin-right: var(--base-sizing-2x);
     }
     .icon-close {
+      --mtf-icon-size: var(--base-sizing-22x);
       margin-left: var(--base-sizing-2x);
     }
   }

src/lib/components/DataView/DataView.module.scss

@@ -80,6 +80,7 @@ $data-view-sizes: ("xs", "sm", "md", "lg", "xl");
   }
   .icon {
     color: var(--theme-color-text-base-caption);
+    --mtf-icon-size: var(--base-sizing-22x);
   }
 }
 

src/lib/components/Dropdown/Dropdown.module.scss

@@ -211,7 +211,7 @@ $variants: ("primary", "secondary", "info", "success", "warning", "danger");
       }
     }
     .icon {
-      font-size: var(--base-sizing-#{$iconFontSize});
+      --mtf-icon-size: var(--base-sizing-#{$iconFontSize});
     }
   }
 }

src/lib/components/Icon/Icon.mdx

@@ -36,7 +36,7 @@ to each `<Icon>` but only **name** or **iconClass** props.
 **⚠️ Warning**: _Since the base icon class changes, you will no longer be able to use the default icon set of Motif UI._
 
 ```tsx
-<MotifProvider value={{ baseIconClass: "material-icons" }}>
+<MotifProvider value={{ baseIconClass: "material-symbols" }}>
   {/* your app */}
 </MotifProvider>
 ```

src/lib/components/Icon/Icon.module.scss

@@ -4,13 +4,16 @@ $variants: "primary", "secondary", "info", "success", "warning", "danger";
 $sizes: (("xxs", "16x"), ("xs", "18x"), ("sm", "20x"), ("md", "22x"), ("lg", "24x"), ("xl", "28x"), ("xxl", "32x"));
 
 .Root {
-  display: inline-flex;
+  display: inline-flex !important;
   vertical-align: top;
   user-select: none;
+  font-size: var(--mtf-icon-size, var(--base-sizing-22x)) !important;
+  width: var(--mtf-icon-size, var(--base-sizing-22x)) !important;
+  height: var(--mtf-icon-size, var(--base-sizing-22x)) !important;
 
   span,
   i {
-    font-size: inherit;
+    font-size: inherit !important;
     line-height: 1;
     &::before {
       vertical-align: bottom;
@@ -30,7 +33,7 @@ $sizes: (("xxs", "16x"), ("xs", "18x"), ("sm", "20x"), ("md", "22x"), ("lg", "24
 
 @each $size, $fontSize in $sizes {
   .#{$size} {
-    font-size: var(--base-sizing-#{$fontSize});
+    --mtf-icon-size: var(--base-sizing-#{$fontSize});
   }
 }
 

src/lib/components/Icon/Icon.stories.tsx

@@ -67,23 +67,18 @@ export const ExternalFontIcons: Story = {
       source: {
         type: "code",
         code: `
-<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols" />
 //...
-<Icon iconClass="material-icons" name="android" size="xxl" />
+<Icon iconClass="material-symbols" name="android" size="xxl" />
         `,
       },
     },
   },
   args: {
-    iconClass: "material-icons",
+    iconClass: "material-symbols",
     name: "android",
   },
-  render: args => (
-    <>
-      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
-      <Icon {...args} />
-    </>
-  ),
+  render: args => <Icon {...args} />,
 };
 
 export const SvgUsage: Story = {
@@ -119,23 +114,18 @@ export const AnyExternalIcon: Story = {
       source: {
         type: "code",
         code: `
-<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols" />
 //...
 <Icon color="green">
-  <i class="material-icons">android</i>
+  <i class="material-symbols">android</i>
 </Icon>
         `,
       },
     },
   },
   args: {
-    children: <i className="material-icons">android</i>,
+    children: <span className="material-symbols">android</span>,
     color: "green",
   },
-  render: args => (
-    <>
-      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
-      <Icon {...args} />
-    </>
-  ),
+  render: args => <Icon {...args} />,
 };

src/lib/components/Icon/Icon.tsx

@@ -8,18 +8,7 @@ import usePropsWithThemeDefaults from "../../motif/hooks/usePropsWithThemeDefaul
 import { sanitizeModuleRootClasses } from "../../../utils/cssUtils";
 
 const Icon = (props: PropsWithRefAndChildren<IconProps, HTMLSpanElement>) => {
-  const {
-    iconClass,
-    name,
-    svgColorType,
-    children,
-    ref,
-    color,
-    size = "md",
-    variant,
-    className,
-    style,
-  } = usePropsWithThemeDefaults("Icon", props);
+  const { iconClass, name, svgColorType, children, ref, color, size, variant, className, style } = usePropsWithThemeDefaults("Icon", props);
   const { baseIconClass } = useMotifContext();
   const isChildMotifIcon = isValidElement(children) && (children.type as FunctionComponent<IconProps>).displayName === "Icon";