Merge pull request #308 from wpmudev/new/use-styles

✨ new(styles): added id as wrap for useStyles.
wpmudev · Jul 22, 2024 · 5123869 · 5123869
2 parents 8c75357 + 718fc59
commit 5123869
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -236,7 +236,9 @@ const SuiWrapper = ({ children, context }) => {
 
 	return (
 		<WordPress>
-			<div className={`sui-wrap sui-theme--${suitheme}`}>{children}</div>
+			<div id="sui-wrap" className={`sui-wrap sui-theme--${suitheme}`}>
+				{children}
+			</div>
 		</WordPress>
 	)
 }

diff --git a/packages/docs/src/components/preview/preview.tsx b/packages/docs/src/components/preview/preview.tsx
@@ -62,7 +62,7 @@ const Preview: React.FunctionComponent<PreviewProps> = ({
 
 	return (
 		<Canvas className="csb-preview">
-			<div className="sui-wrap sui-theme--light">
+			<div id="sui-wrap" className="sui-wrap sui-theme--light">
 				{true === wrapper && (
 					<div className="sui-layout sui-layout--horizontal">{children}</div>
 				)}

diff --git a/packages/hooks/src/use-styles.ts b/packages/hooks/src/use-styles.ts
@@ -102,7 +102,7 @@ export const CSS_SHORTHAND_MAPS: Record<string, string> = {
 }
 
 // We need this to wrap inline styles to prioritize
-const parentSelector: string = "body .sui-wrap &"
+const parentSelector: string = "body #sui-wrap &"
 
 /**
  * Build style object based on prop name and value