Merge pull request #381 from gluestack/fix/mediaquery-sepcificity

Fix/mediaquery sepcificity
gluestack · Sep 1, 2023 · 5272a1e · 5272a1e
2 parents eb17e9a + 0ebda2f
commit 5272a1e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "0.2.20",
+  "version": "0.2.21",
   "keywords": [
     "React Native",
     "Next.js",

diff --git a/packages/react/src/utils/cssify/utils/common.ts b/packages/react/src/utils/cssify/utils/common.ts
@@ -111,13 +111,14 @@ const createCssRule = (
   const colorModeRulePrefix = prefixColorMode
     ? `.${prefixColorMode}${colorMode}`
     : '';
+  const mediaQueryPrefix = `.gs`;
 
   const inlineAndStatePrefix = `${inlineRulePrefix}${stateRulePrefix}`;
 
   if (isMedia(mediaQuery) && isColorScheme(colorSchemeQuery)) {
-    return `${mediaQuery} {${inlineAndStatePrefix}${colorModeRulePrefix} ${dataMediaSelector} ${css}}`;
+    return `${mediaQuery} {${mediaQueryPrefix}${inlineAndStatePrefix}${colorModeRulePrefix} ${dataMediaSelector} ${css}}`;
   } else if (isMedia(mediaQuery)) {
-    return `${mediaQuery} {${inlineAndStatePrefix} ${dataMediaSelector} ${css}}`;
+    return `${mediaQuery} {${mediaQueryPrefix}${inlineAndStatePrefix} ${dataMediaSelector} ${css}}`;
   } else if (isColorScheme(colorSchemeQuery)) {
     return `${inlineAndStatePrefix}${colorModeRulePrefix} ${dataMediaSelector} ${css}`;
   } else {