Simplify media query regex for stripping spaces

styled-components · Jul 9, 2021 · 05f5706 · 05f5706
1 parent 3e9954c
commit 05f5706
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git a/src/toHaveStyleRule.js b/src/toHaveStyleRule.js
@@ -37,12 +37,10 @@ const getClassNames = (received) => {
 const hasAtRule = (options) => Object.keys(options).some((option) => ['media', 'supports'].includes(option));
 
 const getAtRules = (ast, options) => {
-  const mediaRegex = /(\([a-z-]+:)\s?([a-z0-9.]+\))/g;
-
   return Object.keys(options)
     .map((option) =>
       ast.stylesheet.rules
-        .filter((rule) => rule.type === option && rule[option] === options[option].replace(mediaRegex, '$1$2'))
+        .filter((rule) => rule.type === option && rule[option] === options[option].replace(/:\s/g, ":"))
         .map((rule) => rule.rules)
         .reduce((acc, rules) => acc.concat(rules), [])
     )
@@ -96,8 +94,7 @@ const getRules = (ast, classNames, options) => {
 const handleMissingRules = (options) => ({
   pass: false,
   message: () =>
-    `No style rules found on passed Component${
-      Object.keys(options).length ? ` using options:\n${JSON.stringify(options)}` : ''
+    `No style rules found on passed Component${Object.keys(options).length ? ` using options:\n${JSON.stringify(options)}` : ''
     }`,
 });
 
@@ -111,8 +108,8 @@ const getDeclarations = (rules, property) => rules.map((rule) => getDeclaration(
 const normalizeOptions = (options) =>
   options.modifier
     ? Object.assign({}, options, {
-        modifier: Array.isArray(options.modifier) ? options.modifier.join('') : options.modifier,
-      })
+      modifier: Array.isArray(options.modifier) ? options.modifier.join('') : options.modifier,
+    })
     : options;
 
 function toHaveStyleRule(component, property, expected, options = {}) {

diff --git a/test/toHaveStyleRule.spec.js b/test/toHaveStyleRule.spec.js
@@ -220,6 +220,9 @@ it('at rules', () => {
     @media (min-width: 576px) and (max-width: 767.98px) {
       color: red;
     }
+    @media (min-width: calc(768px + 1px)) and (max-width:calc(1024px + 1px)) {
+      color: purple;
+    }
   `;
 
   toHaveStyleRule(<Wrapper />, 'color', 'red');
@@ -244,6 +247,9 @@ it('at rules', () => {
   toHaveStyleRule(<Wrapper />, 'color', 'red', {
     media: '(min-width: 576px) and (max-width: 767.98px)',
   });
+  toHaveStyleRule(<Wrapper />, "color", "purple", {
+    media: "(min-width: calc(768px + 1px)) and (max-width:calc(1024px + 1px))"
+  });
 });
 
 it('selector modifiers', () => {
@@ -392,10 +398,7 @@ it('component modifiers', () => {
     'color',
     'blue',
     {
-      // eslint-disable-next-line prettier/prettier
-      modifier: css`
-        ${Text}
-      `,
+      modifier: css`${Text}`
     }
   );
   toHaveStyleRule(
@@ -415,10 +418,7 @@ it('component modifiers', () => {
     'color',
     'purple',
     {
-      // eslint-disable-next-line prettier/prettier
-      modifier: css`
-        ${Text} &
-      `,
+      modifier: css`${Text} &`
     }
   );
 });