Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
postcss-prefixwrap
Advanced tools
postcss-prefixwrap - npm Package Compare versions
Comparing version 1.49.0 to 1.50.0
@@ -7,2 +7,8 @@ # [PostCSS Prefix Wrap](./README.md) // Changelog | ||
| ## [1.50.0](https://github.com/dbtedman/postcss-prefixwrap/releases/tag/1.50.0) | ||
| ### 🔧 Maintenance | ||
| - Apply dependency updates. | ||
| ## [1.49.0](https://github.com/dbtedman/postcss-prefixwrap/releases/tag/1.49.0) | ||
@@ -9,0 +15,0 @@ |
| { | ||
| "name": "postcss-prefixwrap", | ||
| "version": "1.49.0", | ||
| "version": "1.50.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.", | ||
@@ -30,9 +30,9 @@ "keywords": [ | ||
| "devDependencies": { | ||
| "@babel/core": "7.24.7", | ||
| "@babel/core": "7.24.9", | ||
| "@jest/globals": "29.7.0", | ||
| "@tsconfig/node18": "18.2.4", | ||
| "@types/jest": "29.5.12", | ||
| "@types/node": "20.12.12", | ||
| "@typescript-eslint/eslint-plugin": "7.13.1", | ||
| "@typescript-eslint/parser": "7.10.0", | ||
| "@types/node": "20.14.11", | ||
| "@typescript-eslint/eslint-plugin": "7.16.1", | ||
| "@typescript-eslint/parser": "7.16.1", | ||
| "eslint": "8.57.0", | ||
@@ -42,18 +42,18 @@ "eslint-config-prettier": "9.1.0", | ||
| "eslint-plugin-import": "2.29.1", | ||
| "eslint-plugin-jest": "28.5.0", | ||
| "eslint-plugin-jsx-a11y": "6.8.0", | ||
| "eslint-plugin-promise": "6.2.0", | ||
| "eslint-plugin-jest": "28.6.0", | ||
| "eslint-plugin-jsx-a11y": "6.9.0", | ||
| "eslint-plugin-promise": "6.5.1", | ||
| "eslint-plugin-security-node": "1.1.4", | ||
| "eslint-plugin-unused-imports": "3.2.0", | ||
| "glob": "10.4.1", | ||
| "husky": "9.0.11", | ||
| "glob": "11.0.0", | ||
| "husky": "9.1.1", | ||
| "jest": "29.7.0", | ||
| "postcss": "8.4.38", | ||
| "prettier": "3.3.2", | ||
| "postcss": "8.4.39", | ||
| "prettier": "3.3.3", | ||
| "sort-package-json": "2.10.0", | ||
| "source-map": "0.7.4", | ||
| "source-map-js": "1.2.0", | ||
| "ts-jest": "29.1.5", | ||
| "ts-jest": "29.2.3", | ||
| "ts-node": "10.9.2", | ||
| "typescript": "5.4.5" | ||
| "typescript": "5.5.3" | ||
| }, | ||
@@ -60,0 +60,0 @@ "peerDependencies": { |
116
README.md
@@ -86,75 +86,37 @@ # [PostCSS Prefix Wrap](https://github.com/dbtedman/postcss-prefixwrap) | ||
| - [Minimal](#minimal) | ||
| - [Ignored Selectors](#ignored-selectors) | ||
| - [Prefix Root Tags](#prefix-root-tags) | ||
| - [File Whitelist](#file-whitelist) | ||
| - [File Blacklist](#file-blacklist) | ||
| - [Nesting](#nesting) | ||
| ### Minimal | ||
| The minimal required configuration is the prefix selector, as shown in the above example. | ||
| ```javascript | ||
| PrefixWrap(".my-custom-wrap"); | ||
| ``` | ||
| ### Ignored Selectors | ||
| You may want to exclude some selectors from being prefixed, this is enabled using the `ignoredSelectors` option. | ||
| ```javascript | ||
| ```typescript | ||
| PrefixWrap(".my-custom-wrap", { | ||
| // You may want to exclude some selectors from being prefixed, this is | ||
| // enabled using the `ignoredSelectors` option. | ||
| ignoredSelectors: [":root", "#my-id", /^\.some-(.+)$/], | ||
| }); | ||
| ``` | ||
| ### Prefix Root Tags | ||
| You may want root tags, like `body` and `html` to be converted to classes, then prefixed, this is enabled using | ||
| the `prefixRootTags` option. | ||
| ```javascript | ||
| PrefixWrap(".my-container", { | ||
| // You may want root tags, like `body` and `html` to be converted to | ||
| // classes, then prefixed, this is enabled using the `prefixRootTags` | ||
| // option. | ||
| // With this option, a selector like `html` will be converted to | ||
| // `.my-container .html`, rather than the default `.my-container`. | ||
| prefixRootTags: true, | ||
| }); | ||
| ``` | ||
| With this option, a selector like `html` will be converted to `.my-container .html`, rather than the | ||
| default `.my-container`. | ||
| ### File Whitelist | ||
| In certain scenarios, you may only want `PrefixWrap()` to wrap certain CSS files. This is done using the `whitelist` | ||
| option. | ||
| > ⚠️ **Please note** that each item in the `whitelist` is parsed as a regular expression. This will impact how file paths are matched when you need to support both Windows and Unix like operating systems which use different path separators. | ||
| ```javascript | ||
| PrefixWrap(".my-custom-wrap", { | ||
| // In certain scenarios, you may only want `PrefixWrap()` to wrap certain | ||
| // CSS files. This is done using the `whitelist` option. | ||
| // ⚠️ **Please note** that each item in the `whitelist` is parsed as a | ||
| // regular expression. This will impact how file paths are matched when you | ||
| // need to support both Windows and Unix like operating systems which use | ||
| // different path separators. | ||
| whitelist: ["editor.css"], | ||
| }); | ||
| ``` | ||
| ### File Blacklist | ||
| In certain scenarios, you may want `PrefixWrap()` to exclude certain CSS files. This is done using the `blacklist` | ||
| option. | ||
| > ⚠️ **Please note** that each item in the `blacklist` is parsed as a regular expression. This will impact how file paths are matched when you need to support both Windows and Unix like operating systems which use different path separators. | ||
| > If `whitelist` option is also included, `blacklist` will be ignored. | ||
| ```javascript | ||
| PrefixWrap(".my-custom-wrap", { | ||
| // In certain scenarios, you may want `PrefixWrap()` to exclude certain CSS | ||
| // files. This is done using the `blacklist` option. | ||
| // ⚠️ **Please note** that each item in the `blacklist` is parsed as a | ||
| // regular expression. This will impact how file paths are matched when you | ||
| // need to support both Windows and Unix like operating systems which use | ||
| // different path separators. | ||
| // If `whitelist` option is also included, `blacklist` will be ignored. | ||
| blacklist: ["colours.css"], | ||
| }); | ||
| ``` | ||
| ### 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", { | ||
| // When writing nested css rules, and using a plugin like `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 `"&"`. | ||
| nested: "&", | ||
@@ -164,28 +126,2 @@ }); | ||
| 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; | ||
| } | ||
| ``` | ||
| ## What problems can it solve? | ||
@@ -192,0 +128,0 @@ |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-1.85%
42879
- Number of lines in readme file
- decreased by-30.77%
144
No dependency changes