fix(ripple): Don't create dynamic stylesheet for Edge feature-detect (#…

…1206)
material-components · Aug 30, 2017 · 81523a1 · 81523a1
1 parent 56bf37d
commit 81523a1
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 21 deletions.
diff --git a/packages/mdc-ripple/mdc-ripple.scss b/packages/mdc-ripple/mdc-ripple.scss
@@ -54,4 +54,20 @@
   }
 }
 
+// Styles used to detect buggy behavior of CSS custom properties in Edge
+// See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/
+
+.mdc-ripple-surface--test-edge-var-bug {
+  // stylelint-disable plugin/selector-bem-pattern
+  // bem linter is disabled because it cannot correctly reconcile mdc prefix for css variables.
+  --mdc-ripple-surface-test-edge-var: 1px solid #000;
+  // stylelint-enable plugin/selector-bem-pattern
+
+  visibility: hidden;
+
+  &::before {
+    border: var(--mdc-ripple-surface-test-edge-var);
+  }
+}
+
 // postcss-bem-linter: end
diff --git a/packages/mdc-ripple/util.js b/packages/mdc-ripple/util.js
@@ -34,21 +34,12 @@ function detectEdgePseudoVarBug(windowObj) {
   // Detect versions of Edge with buggy var() support
   // See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/
   const document = windowObj.document;
-  const className = 'test-edge-css-var';
-  const styleNode = document.createElement('style');
-  document.head.appendChild(styleNode);
-  const sheet = styleNode.sheet;
-  // Internet Explorer 11 requires indices to always be specified to insertRule
-  sheet.insertRule(`:root { --${className}: 1px solid #000; }`, 0);
-  sheet.insertRule(`.${className} { visibility: hidden; }`, 1);
-  sheet.insertRule(`.${className}::before { border: var(--${className}); }`, 2);
   const node = document.createElement('div');
-  node.className = className;
+  node.className = 'mdc-ripple-surface--test-edge-var-bug';
   document.body.appendChild(node);
   // Bug exists if ::before style ends up propagating to the parent element
   const hasPseudoVarBug = windowObj.getComputedStyle(node).borderTopStyle === 'solid';
   node.remove();
-  styleNode.remove();
   return hasPseudoVarBug;
 }
 

diff --git a/test/unit/mdc-ripple/helpers.js b/test/unit/mdc-ripple/helpers.js
@@ -58,12 +58,6 @@ export function createMockWindowForCssVariables() {
       appendChild: () => mockWindow.appendedNodes++,
     },
     createElement: td.func('document.createElement'),
-    head: {
-      appendChild: () => mockWindow.appendedNodes++,
-    },
-  };
-  const mockSheet = {
-    insertRule: () => {},
   };
 
   td.when(getComputedStyle(td.matchers.anything())).thenReturn({
@@ -74,11 +68,6 @@ export function createMockWindowForCssVariables() {
     remove: remove,
   });
 
-  td.when(mockDoc.createElement('style')).thenReturn({
-    remove: remove,
-    sheet: mockSheet,
-  });
-
   const mockWindow = {
     // Expose count of nodes that have been appended and not removed, to be verified in tests
     appendedNodes: 0,