postcss-prefixwrap - npm Package Compare versions

Comparing version 1.28.1 to 1.29.0

build/PostCSSPrefixWrap.d.ts

@@ -8,2 +8,3 @@ import { PostCSSContainer, PostCSSRule } from "Types";
     blacklist?: Array<string>;
+    nested?: string;
 }
@@ -17,2 +18,3 @@ export default class PostCSSPrefixWrap {
     private readonly whitelist;
+    private readonly nested;
     constructor(prefixSelector: string, options?: PostCSSPrefixWrapOptions);
@@ -19,0 +21,0 @@ prefixWrapCSSSelector(cssSelector: string, cssRule: PostCSSRule): string | null;

build/PostCSSPrefixWrap.js

@@ -11,3 +11,3 @@ "use strict";
     constructor(prefixSelector, options = {}) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         this.blacklist = (_a = options.blacklist) !== null && _a !== void 0 ? _a : [];
@@ -20,2 +20,3 @@ this.ignoredSelectors = (_b = options.ignoredSelectors) !== null && _b !== void 0 ? _b : [];
         this.whitelist = (_d = options.whitelist) !== null && _d !== void 0 ? _d : [];
+        this.nested = (_e = options.nested) !== null && _e !== void 0 ? _e : null;
     }
@@ -27,2 +28,6 @@ prefixWrapCSSSelector(cssSelector, cssRule) {
         }
+        // Don't prefix nested selected.
+        if (this.nested !== null && cleanSelector.startsWith(this.nested, 0)) {
+            return cleanSelector;
+        }
         // Do not prefix keyframes rules.
@@ -29,0 +34,0 @@ if (Selector_1.default.isKeyframes(cssRule)) {

CHANGELOG.md

@@ -7,2 +7,8 @@ # [PostCSS Prefix Wrap](./README.md) // Changelog
 
+## [1.29.0](https://github.com/dbtedman/postcss-prefixwrap/releases/tag/1.29.0)
+
+### 💡 Features and Improvements
+
+-   [[154]](https://github.com/dbtedman/postcss-prefixwrap/issues/154) Add support for nested selectors with new configuration option
+
 ## [1.28.1](https://github.com/dbtedman/postcss-prefixwrap/releases/tag/1.28.1)
@@ -9,0 +15,0 @@

package.json

 {
   "name": "postcss-prefixwrap",
-  "version": "1.28.1",
+  "version": "1.29.0",
   "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.",
@@ -49,2 +49,3 @@ "keywords": [
     "postcss": "8.4.5",
+    "postcss-nested": "5.0.6",
     "postcss7": "npm:postcss@7.0.34",
@@ -51,0 +52,0 @@ "prettier": "2.5.1",

README.md

 # [PostCSS Prefix Wrap](https://danieltedman.com/my-work/postcss-prefixwrap)
 
-[![CI Build Test](https://github.com/dbtedman/postcss-prefixwrap/workflows/ci/badge.svg)](https://github.com/dbtedman/postcss-prefixwrap/actions?workflow=ci)
-[![Package Downloads (Weekly)](https://badgen.net/npm/dw/postcss-prefixwrap?label=downloads&style=flat)](https://www.npmjs.com/package/postcss-prefixwrap)
-[![Known Vulnerabilities](https://snyk.io/test/github/dbtedman/postcss-prefixwrap/badge.svg)](https://snyk.io/test/github/dbtedman/postcss-prefixwrap)
-[![Package Health](https://snyk.io/advisor/npm-package/postcss-prefixwrap/badge.svg)](https://snyk.io/advisor/npm-package/postcss-prefixwrap)
-[![Package Size](https://badgen.net/bundlephobia/min/postcss-prefixwrap)](https://bundlephobia.com/package/postcss-prefixwrap)
-[![Dependency Count](https://badgen.net/bundlephobia/dependency-count/postcss-prefixwrap)](https://bundlephobia.com/package/postcss-prefixwrap)
+[![CI GitHub Pipeline](https://img.shields.io/github/workflow/status/dbtedman/postcss-prefixwrap/ci?style=for-the-badge&logo=github&label=ci)](https://github.com/dbtedman/postcss-prefixwrap/actions/workflows/ci.yml?query=branch%3Amain)
+[![Release GitHub Pipeline](https://img.shields.io/github/workflow/status/dbtedman/postcss-prefixwrap/ci?style=for-the-badge&logo=github&label=release)](https://github.com/dbtedman/postcss-prefixwrap/actions/workflows/release.yml)
+[![NPM Downloads Per Week](https://img.shields.io/npm/dw/postcss-prefixwrap?color=blue&logo=npm&style=for-the-badge)](https://www.npmjs.com/package/postcss-prefixwrap)
 
@@ -90,2 +87,3 @@ A [PostCSS](https://postcss.org) plugin which prepends a selector to CSS styles to constrain their effect on parent
 -   [File Blacklist](#file-blacklist)
+-   [Nesting](#nesting)
 
@@ -148,2 +146,38 @@ ### Minimal
 
+### Nesting
+
+When writing nested css rules, and using a plugin like [postcss-nested](https://www.npmjs.com/package/postcss-nested) to compile them, you will want to ensure that the nested selectors are not prefixed. This is done by defining the `nested` property and setting the value to the selector prefix being used to represent nesting, this is most likely going to be `"&"`.
+
+```javascript
+PrefixWrap(".my-custom-wrap", {
+    nested: "&",
+});
+```
+
+As an example, in the following CSS that contains nested selectors.
+
+```scss
+.demo {
+    &--lite {
+        color: red;
+    }
+}
+```
+
+**❌ Without** the `nested` configuration option defined:
+
+```css
+.my-custom-wrap .my-custom-wrap .demo--lite {
+    color: red;
+}
+```
+
+**✅ With** the `tested` configuration defined:
+
+```css
+.my-custom-wrap .demo--lite {
+    color: red;
+}
+```
+
 ## How to contribute?
@@ -150,0 +184,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39878

increased by3.1%

Lines of code

433

increased by1.64%

Number of lines in readme file

193

increased by21.38%

Worsened metrics

Dev dependency count

20

increased by5.26%

No dependency changes