[#661] @media queries should be prefixed (#662)

Author: dbtedman

CHANGELOG.md

@@ -4,6 +4,12 @@ Releases ordered so that the most recent are displayed at the top, with the curr
 top, labeled as **🚧 In Development**. This release will be given a number once it is ready to be released. Each release
 can contain both a **💡 Features and Improvements**, **🔧 Maintenance**, and **🐛 Bug Fixes** sections.
 
+## [1.56.2](https://github.com/dbtedman/postcss-prefixwrap/releases/tag/1.56.2)
+
+### 🐛 Bug Fixes
+
+- [#661](https://github.com/dbtedman/postcss-prefixwrap/issues/661) @media queries should be prefixed
+
 ## [1.56.1](https://github.com/dbtedman/postcss-prefixwrap/releases/tag/1.56.1)
 
 ### 🐛 Bug Fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-prefixwrap",
-  "version": "1.56.1",
+  "version": "1.56.2",
   "description": "A PostCSS plugin that is used to wrap css styles with a css selector to constrain their affect on parent elements in a page.",
   "keywords": [
     "css",

pnpm-lock.yaml

@@ -46,7 +46,7 @@ export default class PostCSSPrefixWrap {
             )
         ) {
             css.walkRules((cssRule: Rule) => {
-                if (cssRule?.parent?.type === "root") {
+                if (cssRule?.parent?.type !== "rule") {
                     prefixWrapCSSRule(
                         cssRule,
                         this.nested,

src/plugin/PostCSSPrefixWrap.ts

@@ -0,0 +1,16 @@
+import * as path from "path";
+
+import { it } from "@jest/globals";
+
+import { assertActualMatchesExpectedAfterPrefixWrap } from "./support/PrefixAssert";
+import { postCSSWithPlugin } from "./support/PluginBootstrap";
+
+const postCSS = postCSSWithPlugin();
+
+it("ensure media queries are prefixed", () => {
+    assertActualMatchesExpectedAfterPrefixWrap(
+        postCSS,
+        path.join(__dirname, "fixtures", "media-query-raw.css"),
+        path.join(__dirname, "fixtures", "media-query-expected.css"),
+    );
+});

test/MediaQuery.spec.ts

@@ -0,0 +1,8 @@
+.my-container .something {
+    opacity: 1;
+}
+@media screen and (min-width: 768px) {
+    .my-container .something {
+        opacity: 0.25;
+    }
+}

test/fixtures/media-query-expected.css

@@ -0,0 +1,8 @@
+.something {
+    opacity: 1;
+}
+@media screen and (min-width: 768px) {
+    .something {
+        opacity: 0.25;
+    }
+}