fixes for CSS priority

microsoft · Dec 16, 2020 · 7c06620 · 7c06620
1 parent 9cf4fb6
commit 7c06620
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 18 deletions.
diff --git a/packages/make-styles/.eslintrc.json b/packages/make-styles/.eslintrc.json
@@ -1,4 +1,7 @@
 {
   "extends": ["plugin:@fluentui/eslint-plugin/react"],
-  "root": true
+  "root": true,
+  "rules": {
+    "@typescript-eslint/naming-convention": "off"
+  }
 }
diff --git a/packages/make-styles/src/runtime/compileCSS.ts b/packages/make-styles/src/runtime/compileCSS.ts
@@ -29,12 +29,10 @@ export function compileCSS(options: CompileCSSOptions): string {
   // https://github.com/thysultan/stylis.js/issues/252
   if (pseudo.indexOf(':global(') === 0) {
     const globalSelector = /global\((.+)\)/.exec(pseudo)?.[1];
-    const classNameSelector = repeatSelector(`.${className}`, unstable_cssPriority);
-
     const shouldIncludeClassName = pseudo.indexOf('&') === pseudo.length - 1;
 
     const cssRule = shouldIncludeClassName
-      ? `${globalSelector} { ${classNameSelector} ${cssDeclaration} }`
+      ? `${globalSelector} { .${className} ${cssDeclaration} }`
       : `${globalSelector} ${cssDeclaration}`;
 
     return serialize(compile(cssRule), middleware([stringify]));

diff --git a/packages/make-styles/src/runtime/resolveStyleRules.test.ts b/packages/make-styles/src/runtime/resolveStyleRules.test.ts
@@ -397,14 +397,6 @@ describe('resolveStyleRules', () => {
       `);
     });
 
-    it('allows to increase for globals', () => {
-      expect(resolveStyleRules({ ':global &': { color: 'red' } }, 1)).toMatchInlineSnapshot(`
-        :global .fluno3u1.fluno3u1 {
-          color: red;
-        }
-      `);
-    });
-
     it('allows to increase for RTL', () => {
       expect(resolveStyleRules({ left: '5px' }, 1)).toMatchInlineSnapshot(`
         .f5b3q4t1.f5b3q4t1 {

diff --git a/packages/make-styles/src/runtime/resolveStyleRules.ts b/packages/make-styles/src/runtime/resolveStyleRules.ts
@@ -15,10 +15,10 @@ import { normalizeNestedProperty } from './utils/normalizeNestedProperty';
 
 export function resolveStyleRules(
   styles: MakeStyles,
+  unstable_cssPriority: number = 0,
   pseudo = '',
   media = '',
   support = '',
-  unstable_cssPriority: number = 0,
   result: Record<string, MakeStylesResolvedRule> = {},
 ): Record<string, MakeStylesResolvedRule> {
   const expandedStyles = (expand(styles) as unknown) as MakeStyles;
@@ -36,7 +36,9 @@ export function resolveStyleRules(
       const key = pseudo + media + support + property;
 
       // trimming of values is required to generate consistent hashes
-      const className = HASH_PREFIX + hashString(pseudo + media + support + property + value.toString().trim());
+      const classNameHash = hashString(pseudo + media + support + property + value.toString().trim());
+      const className = HASH_PREFIX + classNameHash + (unstable_cssPriority === 0 ? '' : unstable_cssPriority);
+
       const css = compileCSS({
         className,
         media,
@@ -70,20 +72,20 @@ export function resolveStyleRules(
       if (isNestedSelector(property)) {
         resolveStyleRules(
           value,
+          unstable_cssPriority,
           pseudo + normalizeNestedProperty(property),
           media,
           support,
-          unstable_cssPriority,
           result,
         );
       } else if (isMediaQuerySelector(property)) {
         const combinedMediaQuery = generateCombinedQuery(media, property.slice(6).trim());
 
-        resolveStyleRules(value, pseudo, combinedMediaQuery, support, unstable_cssPriority, result);
+        resolveStyleRules(value, unstable_cssPriority, pseudo, combinedMediaQuery, support, result);
       } else if (isSupportQuerySelector(property)) {
         const combinedSupportQuery = generateCombinedQuery(support, property.slice(9).trim());
 
-        resolveStyleRules(value, pseudo, media, combinedSupportQuery, unstable_cssPriority, result);
+        resolveStyleRules(value, unstable_cssPriority, pseudo, media, combinedSupportQuery, result);
       } else if (property === 'animationName') {
         // TODO: support RTL!
         const keyframe = compileKeyframeRule(value);
@@ -94,7 +96,7 @@ export function resolveStyleRules(
 
         result[animationName] = [animationName, keyframeCSS /* rtlCSS */];
 
-        resolveStyleRules({ animationName }, pseudo, media, support, unstable_cssPriority, result);
+        resolveStyleRules({ animationName }, unstable_cssPriority, pseudo, media, support, result);
       }
     }
   });