postcss-prefix-selector - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

index.js

@@ -51,2 +51,11 @@ const prefixPlugin = (options = {}) => {
 
+            // replace :root, body, html with the prefix
+            if ([':root', 'body', 'html'].some(globalSel => selector.startsWith(globalSel))) {
+              if (options.skipGlobalSelectors) {
+                return selector;
+              }
+
+              return selector.replace(/(html\s+body|:root\s+body|html|:root|body)/gm, prefix);
+            }
+
             return prefixWithSpace + selector;
@@ -53,0 +62,0 @@ });

package.json

 {
   "name": "postcss-prefix-selector",
   "description": "Prefix all CSS rules with a selector",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": "Jonathan Ong <[e-mail]> (http://jongleberry.com)",
@@ -6,0 +6,0 @@ "contributors": [

README.md

@@ -30,2 +30,4 @@ # postcss-prefix-selector
 
+A prefix is added before most selectors. Below is an example of how CSS will be transformed by adding a prefix called `.namespace`.
+
 ```js
@@ -38,24 +40,19 @@ const prefixer = require('postcss-prefix-selector')
 const out = postcss().use(prefixer({
-  prefix: '.some-selector',
+  prefix: '.namespace',
   exclude: ['.c'],
-
-  // Optional transform callback for case-by-case overrides
-  transform: function (prefix, selector, prefixedSelector, filePath, rule) {
-    if (selector === 'body') {
-      return 'body' + prefix;
-    } else {
-      return prefixedSelector;
-    }
-  }
 })).process(css).css
 ```
 
-Using the options above and the CSS below...
-
 ```css
-body {
-  background: red;
+/* Input */
+.a, .b {
+  color: aqua;
 }
 
-.a, .b {
+.c {
+  color: coral;
+}
+
+/* Output */
+.namespace .a, .namespace .b {
   color: aqua;
@@ -69,16 +66,42 @@ }
 
-You will get the following output
+Please note that global selectors (`html`, `body`, `:root`) cannot be prefixed so instead they will be replaced with the prefix. This behaviour can be disabled with the `skipGlobalSelectors` option.
 
 ```css
-body.some-selector {
+/* Input */
+:root { --bs-blue:#0d6efd; }
+html { padding: 0; }
+body { margin: 0; }
+
+/* Output */
+.namespace { --bs-blue:#0d6efd; }
+.namespace { padding: 0; }
+.namespace { margin: 0; }
+```
+
+It's also possible to customize the way prefixing is done by defining a transform function:
+
+```js
+const out = postcss().use(prefixer({
+  prefix: '.namespace',
+  // Optional transform callback for case-by-case overrides
+  transform: function (prefix, selector, prefixedSelector, filePath, rule) {
+    if (selector === 'body') {
+      return 'body' + prefix;
+    } else {
+      return prefixedSelector;
+    }
+  }
+})).process(css).css
+```
+
+```css
+/* Input */
+body {
   background: red;
 }
 
-.some-selector .a, .some-selector .b {
-  color: aqua;
+/* Output */
+body.namespace {
+  background: red;
 }
-
-.c {
-  color: coral;
-}
 ```
@@ -186,2 +209,3 @@
 | `includeFiles` | `string[]` or `RegExp[]` | List of included files for processing |
+| `skipGlobalSelectors` | `boolean` |  When enabled, global selectors (`html`, `body`, `root`) won't be modified by the prefixer. Default: `false`. | 
 
@@ -200,3 +224,3 @@ ## Maintainer
 
-[MIT](LICENSE) © 2015-2022 Jonathan Ong.
+[MIT](LICENSE) © 2015-2024 Jonathan Ong.
 
@@ -203,0 +227,0 @@ [gitpod-image]: https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod

No alert changes

Improved metrics

Total package byte prevSize

12410

10.81%

Lines of code

75

10.29%

Number of lines in readme file

232

11.54%

No dependency changes