fix: ShadCN Tailwind scoping (#847)

* Added "bn-" prefix to ShadCN Tailwind classes

* Added missed prefix

* Small fixes

* Added CSS class to `bn-container` for each UI lib to scope styles

* Removed redundant CSS prefixes and fixed prefix names

* Added comment

Author: matthewlipski

package-lock.json

@@ -140,7 +140,8 @@ responsible for the majority of the styling. */
     padding-bottom: 7px;
 }
 
-.bn-ak-menu:not(:focus) .bn-ak-menu-item:not(:focus)[aria-expanded="true"] {
+.bn-ak-menu:not(:focus)
+.bn-ak-menu-item:not(:focus)[aria-expanded="true"] {
     background-color: hsl(204 4% 0% / 7.5%);
     color: currentColor;
 }

packages/ariakit/src/ariakitStyles.css

@@ -1,4 +1,9 @@
-import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  mergeCSSClasses,
+  StyleSchema,
+} from "@blocknote/core";
 import {
   BlockNoteViewRaw,
   Components,
@@ -95,9 +100,14 @@ export const BlockNoteView = <
 >(
   props: ComponentProps<typeof BlockNoteViewRaw<BSchema, ISchema, SSchema>>
 ) => {
+  const { className, ...rest } = props;
+
   return (
     <ComponentsContext.Provider value={components}>
-      <BlockNoteViewRaw {...props} />
+      <BlockNoteViewRaw
+        className={mergeCSSClasses("bn-ariakit", className || "")}
+        {...rest}
+      />
     </ComponentsContext.Provider>
   );
 };

packages/ariakit/src/index.tsx

@@ -28,23 +28,22 @@
   gap: 0.5rem;
 }
 
-.bn-tab-panel {
+.bn-ariakit .bn-tab-panel {
   align-items: center;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-.bn-file-input {
+.bn-ariakit .bn-file-input {
   max-width: 100%;
 }
 
 .bn-ak-button {
   outline-style: none;
 }
 
-.bn-ak-menu-item[aria-selected="true"],
-.bn-ak-menu-item:hover {
+.bn-ak-menu-item[aria-selected="true"], .bn-ak-menu-item:hover {
   background-color: hsl(204 100% 40%);
   color: hsl(204 20% 100%);
 }
@@ -53,12 +52,11 @@
   display: flex;
 }
 
-.bn-dropdown {
+.bn-ariakit .bn-dropdown {
   overflow: visible;
 }
 
-.bn-suggestion-menu,
-.bn-color-picker-dropdown {
+.bn-ariakit .bn-suggestion-menu, .bn-ariakit .bn-color-picker-dropdown {
   overflow: scroll;
 }
 
@@ -85,7 +83,7 @@
   padding-inline: 4px;
 }
 
-.bn-side-menu {
+.bn-ariakit .bn-side-menu {
   align-items: center;
   display: flex;
   justify-content: center;
@@ -97,35 +95,34 @@
   width: fit-content;
 }
 
-.bn-panel-popover {
+.bn-ariakit .bn-panel-popover {
   background-color: transparent;
   border: none;
   box-shadow: none;
 }
 
-.bn-table-handle {
+.bn-ariakit .bn-table-handle {
   height: fit-content;
   padding: 0;
   width: fit-content;
 }
 
-.bn-side-menu,
-.bn-table-handle {
+.bn-ariakit .bn-side-menu,
+.bn-ariakit .bn-table-handle {
   color: gray;
 }
 
 .bn-ak-button:where(.dark, .dark *) {
   color: hsl(204 20% 100%);
 }
 
-.bn-ak-tab,
-.bn-file-input {
+.bn-ak-tab, .bn-ariakit .bn-file-input {
   background-color: transparent;
   color: black;
 }
 
 .bn-ak-tab:where(.dark, .dark *),
-.bn-file-input:where(.dark, .dark *) {
+.bn-ariakit .bn-file-input:where(.dark, .dark *) {
   color: white;
 }
 

packages/ariakit/src/style.css

@@ -1,4 +1,9 @@
-import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  mergeCSSClasses,
+  StyleSchema,
+} from "@blocknote/core";
 import {
   BlockNoteViewRaw,
   Components,
@@ -122,7 +127,7 @@ export const BlockNoteView = <
         };
   }
 ) => {
-  const { theme, ...rest } = props;
+  const { className, theme, ...rest } = props;
 
   const existingContext = useBlockNoteContext();
   const systemColorScheme = usePrefersColorScheme();
@@ -160,12 +165,13 @@ export const BlockNoteView = <
       {/* as proposed here:  https://github.com/orgs/mantinedev/discussions/5685 */}
       <MantineProvider
         theme={mantineTheme}
-        cssVariablesSelector=".bn-container"
+        cssVariablesSelector=".bn-mantine"
         // This gets the element to set `data-mantine-color-scheme` on. Since we
         // don't need this attribute (we use our own theming API), we return
         // undefined here.
         getRootElement={() => undefined}>
         <BlockNoteViewRaw
+          className={mergeCSSClasses("bn-mantine", className || "")}
           theme={typeof theme === "object" ? undefined : theme}
           {...rest}
           ref={ref}

packages/mantine/src/index.tsx

@@ -89,50 +89,50 @@
  (src: https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/global.css)
  but with styles set on `body` and `html` instead set on `bn-container`, as
  well as other minor changes. */
-.bn-container *, .bn-container :after, .bn-container :before {
+.bn-mantine *, .bn-mantine :after, .bn-mantine :before {
     box-sizing: border-box
 }
 
-.bn-container button,
-.bn-container select {
+.bn-mantine button,
+.bn-mantine select {
     text-transform: none
 }
 
 @media screen and (max-device-width: 500px) {
-    .bn-container {
+    .bn-mantine {
         -webkit-text-size-adjust: 100%
     }
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .bn-container [data-respect-reduced-motion] [data-reduce-motion] {
+    .bn-mantine [data-respect-reduced-motion] [data-reduce-motion] {
         animation: none;
         transition: none
     }
 }
 
-.bn-container [data-mantine-color-scheme=dark] .mantine-dark-hidden, .bn-container [data-mantine-color-scheme=light] .mantine-light-hidden {
+.bn-mantine [data-mantine-color-scheme=dark] .mantine-dark-hidden, .bn-mantine [data-mantine-color-scheme=light] .mantine-light-hidden {
     display: none
 }
 
-.bn-container .mantine-focus-auto:focus-visible {
+.bn-mantine .mantine-focus-auto:focus-visible {
     outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
     outline-offset: calc(.125rem * var(--mantine-scale))
 }
 
-.bn-container .mantine-focus-always:focus {
+.bn-mantine .mantine-focus-always:focus {
     outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
     outline-offset: calc(.125rem * var(--mantine-scale))
 }
 
-.bn-container .mantine-focus-never:focus {
+.bn-mantine .mantine-focus-never:focus {
     outline: none
 }
 
-.bn-container .mantine-active:active {
+.bn-mantine .mantine-active:active {
     transform: translateY(calc(.0625rem * var(--mantine-scale)))
 }
 
-.bn-container[dir=rtl] .mantine-rotate-rtl {
+.bn-mantine[dir=rtl] .mantine-rotate-rtl {
     transform: rotate(180deg)
 }