Disable inline styles by default if CSS at rules are present.

plugins/inlineStyles.js

@@ -39,6 +39,7 @@ const preservedPseudos = [
  */
 export const fn = (root, params) => {
   const {
+    disableIfAtRulesPresent = true,
     onlyMatchedOnce = true,
     removeMatchedSelectors = true,
     useMqs = ['', 'screen'],
@@ -58,11 +59,12 @@ export const fn = (root, params) => {
    * }[]}
    */
   let selectors = [];
+  let deoptimized = false;
 
   return {
     element: {
       enter: (node, parentNode) => {
-        if (node.name === 'foreignObject') {
+        if (deoptimized || node.name === 'foreignObject') {
           return visitSkip;
         }
         if (node.name !== 'style' || node.children.length === 0) {
@@ -103,14 +105,18 @@ export const fn = (root, params) => {
             const atrule = this.atrule;
 
             // skip media queries not included into useMqs param
-            let mediaQuery = '';
+            let atRuleText = '';
             if (atrule != null) {
-              mediaQuery = atrule.name;
+              atRuleText = atrule.name;
               if (atrule.prelude != null) {
-                mediaQuery += ` ${csstree.generate(atrule.prelude)}`;
+                atRuleText += ` ${csstree.generate(atrule.prelude)}`;
               }
             }
-            if (!useMqs.includes(mediaQuery)) {
+            if (disableIfAtRulesPresent && atRuleText !== '') {
+              deoptimized = true;
+              return;
+            }
+            if (!useMqs.includes(atRuleText)) {
               return;
             }
 
@@ -167,7 +173,7 @@ export const fn = (root, params) => {
 
     root: {
       exit: () => {
-        if (styles.length === 0) {
+        if (deoptimized || styles.length === 0) {
           return;
         }
         const sortedSelectors = selectors

plugins/plugins-types.d.ts

@@ -77,6 +77,8 @@ type DefaultPlugins = {
   };
   mergeStyles: void;
   inlineStyles: {
+    /** If true, do not inline styles if any CSS at rules are present. */
+    disableIfAtRulesPresent?: boolean;
     /**
      * Inlines selectors that match once only.
      *

test/plugins/inlineStyles.13.svg.txt

@@ -64,3 +64,7 @@
     </defs>
     <rect width="100" height="100" style="fill:blue"/>
 </svg>
+
+@@@
+
+{"disableIfAtRulesPresent":false}

test/plugins/inlineStyles.14.svg.txt

@@ -27,4 +27,4 @@
 
 @@@
 
-{"useMqs": ["media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2)"]}
+{"useMqs": ["media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2)"],"disableIfAtRulesPresent":false}

test/plugins/inlineStyles.29.svg.txt

@@ -0,0 +1,35 @@
+Styles should not be inlined in the presence of media queries.
+
+See: https://github.com/svg/svgo/issues/1834
+
+===
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+    <style>
+        .fill {
+            fill: red
+        }
+        @media (max-width:500px) {
+            .fill {
+                fill: blue
+            }
+        }
+    </style>
+    <rect class="fill" x="1" y="1" width="10" height="10"/>
+</svg>
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+    <style>
+        .fill {
+            fill: red
+        }
+        @media (max-width:500px) {
+            .fill {
+                fill: blue
+            }
+        }
+    </style>
+    <rect class="fill" x="1" y="1" width="10" height="10"/>
+</svg>