Merge pull request #152 from gluestack/fix/inline-specificity-web

fix: inline style specificity
gluestack · Apr 25, 2023 · 39158cb · 39158cb
2 parents 9457d8d + 5751836
commit 39158cb
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git a/example/storybook/src/api/Specificity/Specificity.tsx b/example/storybook/src/api/Specificity/Specificity.tsx
@@ -57,11 +57,16 @@ export function Specificity({ ...args }) {
           variant="redbox"
           states={{ hover: true }}
           bg="$red500"
-          // sx={{
-          //   _dark: {
-          //     bg: '$amber900',
-          //   },
-          // }}
+          sx={{
+            '_dark': {
+              bg: '$blue500',
+            },
+            '@md': {
+              _dark: {
+                bg: '$green400',
+              },
+            },
+          }}
           // sx={{ style: { bg: '$amber400' } }}
         >
           <Text>bluebox - sm</Text>

diff --git a/packages/react/src/utils/cssify/utils/common.ts b/packages/react/src/utils/cssify/utils/common.ts
@@ -14,20 +14,26 @@ const createCssRule = (
   prefixColorMode: string
 ) => {
   let rule;
-  const dataMediaSelector = prefixClassName
-    ? `.${prefixClassName} [data-${dataType}~="${stringHash}"]`
-    : `[data-${dataType}~="${stringHash}"]`;
+  const dataMediaSelector = `[data-${dataType}~="${stringHash}"]`;
 
   if (isMedia(mediaQuery) && isColorScheme(colorSchemeQuery)) {
     // rule = `${mediaQuery} {${colorSchemeQuery} {${dataMediaSelector} ${css}} .${prefixColorMode}${colorMode} ${dataMediaSelector} ${css}}`;
-    rule = `${mediaQuery} {.${prefixColorMode}${colorMode} ${dataMediaSelector} ${css}}`;
+    rule = prefixClassName
+      ? `${mediaQuery} {.${prefixClassName}.${prefixColorMode}${colorMode} ${dataMediaSelector} ${css}}`
+      : `${mediaQuery} {.${prefixColorMode}${colorMode} ${dataMediaSelector} ${css}}`;
   } else if (isMedia(mediaQuery)) {
-    rule = `${mediaQuery} {${dataMediaSelector} ${css}}`;
+    rule = prefixClassName
+      ? `${mediaQuery} {.${prefixClassName} ${dataMediaSelector} ${css}}`
+      : `${mediaQuery} {${dataMediaSelector} ${css}}`;
   } else if (isColorScheme(colorSchemeQuery)) {
     // rule = `${colorSchemeQuery} {${dataMediaSelector} ${css}} .${prefixColorMode}${colorMode} ${dataMediaSelector} ${css}`;
-    rule = `.${prefixColorMode}${colorMode} ${dataMediaSelector} ${css}`;
+    rule = prefixClassName
+      ? `.${prefixClassName}.${prefixColorMode}${colorMode} ${dataMediaSelector} ${css}`
+      : `.${prefixColorMode}${colorMode} ${dataMediaSelector} ${css}`;
   } else {
-    rule = `${dataMediaSelector}${mediaQuery} ${css}`;
+    rule = prefixClassName
+      ? `.${prefixClassName} ${dataMediaSelector}${mediaQuery} ${css}`
+      : `${dataMediaSelector}${mediaQuery} ${css}`;
   }
 
   return rule;