@budarin/postcss-pixelstorem 1.0.7 → 1.0.9

package/README.md

@@ -20,7 +20,7 @@ In `@budarin/postcss-pixelstorem` default mode, an input of:
     }
 ```
 
-will result in an output of:   
+will result in an output of:
 
 ```css
     h1 {
@@ -38,35 +38,56 @@ will result in an output of:
 
 @budarin/postcss-pixelstorem requires [PostCSS][4] to be installed. To install @budarin/postcss-pixelstorem:
 
-``$ npm install --save-dev @budarin/postcss-pixelstorem``
+`$ npm install --save-dev @budarin/postcss-pixelstorem`
 
 In gulpfile.js
 
 ```js
-    var postcss = require('gulp-postcss')
-    var pixelstorem = require('@budarin/postcss-pixelstorem');
-```    
+var postcss = require('gulp-postcss');
+var pixelstorem = require('@budarin/postcss-pixelstorem');
+```
 
 Gulp task:
 
 ```js
-    gulp.task('css', function() {
-        var plugins = [
-            pixelstorem()
-        ];      
+gulp.task('css', function () {
+    var plugins = [pixelstorem()];
     gulp.src('source/sass/styles.scss')
-    .pipe(postcss(plugins))
-    .pipe(gulp.dest(public/css));
-    });
+        .pipe(postcss(plugins))
+        .pipe(gulp.dest(public / css));
+});
 ```
 
 ## Defaults
 
-* Default base for conversion is `1rem = 16px`.
-* Default output for `rem(<value>)`is `rem`.
-* DEfault output for `em(<value>)` is `em`.
-* Default output unit for `<value>px` is `rem`.
-* Default is to convert values in media and container queries.
+- Default base for conversion is `1rem = 16px`.
+- Default output for `rem(<value>)`is `rem`.
+- Default output for `em(<value>)` is `em`.
+- Default output unit for `<value>px` is `rem`.
+- Default is to convert values in media and container queries.
+
+## Disabling conversion for specific lines
+
+You can disable conversion for a specific declaration or at-rule by adding a comment `/* pxtorem-disable-next-line */` before it:
+
+```css
+.example {
+    /* pxtorem-disable-next-line */
+    border-width: 1px; /* will remain 1px */
+
+    font-size: 16px; /* will be converted to 1rem */
+}
+
+/* pxtorem-disable-next-line */
+@media (min-width: 768px) {
+    /* 768px will remain unchanged */
+    .container {
+        padding: 20px; /* will be converted to 1.25rem */
+    }
+}
+```
+
+This is especially useful when you need to preserve pixel values for specific properties that should not be converted (e.g., 1px borders, media query breakpoints, etc.).
 
 ## Options
 
@@ -88,11 +109,11 @@ Gulp task:
 ```
 
 Optional values:
-* `base: <value>` - Accepts a unitless value. Resets the base font size for conversion to rems or ems. Default value is `16`.
-* `unit: "rem" or "em"` - Accepts unit value of either `"rem"` or `"em"` as a string. All items will be output in the unit value set here, including values set by `rem(<value>)` or `em(<value>)` notation. Default value is `rem`.
-* `exclude: ["declaration"]` - any declaration type to exclude from conversion, eg, `border`, `border-radius`, etc. These declarations will be excluded globally. Default value is `[]`.
-* `mediaQueries: boolean` Setting this to `false` prevents conversion of values in media and container queries. Default value is `true`.
 
+- `base: <value>` - Accepts a unitless value. Resets the base font size for conversion to rems or ems. Default value is `16`.
+- `unit: "rem" or "em"` - Accepts unit value of either `"rem"` or `"em"` as a string. All items will be output in the unit value set here, including values set by `rem(<value>)` or `em(<value>)` notation. Default value is `rem`.
+- `exclude: ["declaration"]` - any declaration type to exclude from conversion, eg, `border`, `border-radius`, etc. These declarations will be excluded globally. Default value is `[]`.
+- `mediaQueries: boolean` Setting this to `false` prevents conversion of values in media and container queries. Default value is `true`.
 
 Links:
 
@@ -101,4 +122,4 @@ Links:
 [2]: http://bourbon.io/docs/#px-to-em
 [3]: http://bourbon.io/docs/#px-to-rem
 [4]: http://postcss.org/
-</pre>
+</pre>

package/dist/index.d.ts

@@ -5,12 +5,12 @@ interface PixelstoremOptions {
     exclude?: string[];
     mediaQueries?: boolean;
 }
-declare function pixelstorem(opts?: PixelstoremOptions): {
+export declare function pixelstorem(opts?: PixelstoremOptions): {
     postcssPlugin: string;
     Declaration(decl: Declaration): void;
     AtRule(atRule: AtRule): void;
 };
-declare namespace pixelstorem {
+export declare namespace pixelstorem {
     var postcss: boolean;
 }
 export default pixelstorem;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEnD,UAAU,kBAAkB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AASD,iBAAwB,WAAW,CAAC,IAAI,GAAE,kBAAuB;;sBAKvC,WAAW;mBAad,MAAM;EAwB5B;kBA1CuB,WAAW;;;eAAX,WAAW"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAW,MAAM,SAAS,CAAC;AAE5D,UAAU,kBAAkB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAkBD,wBAAgB,WAAW,CAAC,IAAI,GAAE,kBAAuB;;sBAK/B,WAAW;mBAWd,MAAM;EAgC5B;yBAhDe,WAAW;;;AAoD3B,eAAe,WAAW,CAAC"}

package/dist/index.js

@@ -4,13 +4,23 @@ const defaultOpts = {
     exclude: [],
     mediaQueries: false,
 };
-export default function pixelstorem(opts = {}) {
+function hasDisableComment(node) {
+    const prevNode = node.prev();
+    if (prevNode && prevNode.type === 'comment') {
+        const comment = prevNode;
+        return comment.text.toLowerCase().includes('pxtorem-disable-next-line');
+    }
+    return false;
+}
+export function pixelstorem(opts = {}) {
     opts = { ...defaultOpts, ...opts };
     return {
         postcssPlugin: 'pixelstorem',
         Declaration(decl) {
             if (opts.exclude?.includes(decl.prop))
                 return;
+            if (hasDisableComment(decl))
+                return;
             if (!decl.value.includes('px'))
                 return;
             decl.value = decl.value.replace(/(\d*\.?\d+)px\b/g, (_, num) => {
@@ -19,13 +29,19 @@ export default function pixelstorem(opts = {}) {
             });
         },
         AtRule(atRule) {
-            if (opts.mediaQueries && atRule.name === 'media' && atRule.params.includes('px')) {
+            if (hasDisableComment(atRule))
+                return;
+            if (opts.mediaQueries &&
+                atRule.name === 'media' &&
+                atRule.params.includes('px')) {
                 atRule.params = atRule.params.replace(/(\d*\.?\d+)px\b/g, (_, num) => {
                     const converted = +num / (opts.base ?? 16);
                     return `${converted}${opts.unit}`;
                 });
             }
-            if (opts.mediaQueries && atRule.name === 'container' && atRule.params.includes('px')) {
+            if (opts.mediaQueries &&
+                atRule.name === 'container' &&
+                atRule.params.includes('px')) {
                 atRule.params = atRule.params.replace(/(\d*\.?\d+)px\b/g, (_, num) => {
                     const converted = +num / (opts.base ?? 16);
                     return `${converted}${opts.unit}`;
@@ -35,4 +51,5 @@ export default function pixelstorem(opts = {}) {
     };
 }
 pixelstorem.postcss = true;
+export default pixelstorem;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AASA,MAAM,WAAW,GAAuB;IACpC,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,EAAE;IACX,YAAY,EAAE,KAAK;CACtB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,OAA2B,EAAE;IAC7D,IAAI,GAAG,EAAE,GAAG,WAAW,EAAE,GAAG,IAAI,EAAE,CAAC;IACnC,OAAO;QACH,aAAa,EAAE,aAAa;QAE5B,WAAW,CAAC,IAAiB;YACzB,IAAI,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;gBAAE,OAAO;YAE9C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC;gBAAE,OAAO;YACvC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAC3B,kBAAkB,EAClB,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;gBACP,MAAM,SAAS,GAAG,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;gBAC3C,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YACtC,CAAC,CACJ,CAAC;QACN,CAAC;QAED,MAAM,CAAC,MAAc;YACjB,IAAI,IAAI,CAAC,YAAY,IAAI,MAAM,CAAC,IAAI,KAAK,OAAO,IAAI,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC/E,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CACjC,kBAAkB,EAClB,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;oBACP,MAAM,SAAS,GAAG,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;oBAC3C,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;gBACtC,CAAC,CACJ,CAAC;YACN,CAAC;YAED,IACI,IAAI,CAAC,YAAY,IAAI,MAAM,CAAC,IAAI,KAAK,WAAW,IAAI,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAClF,CAAC;gBACC,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CACjC,kBAAkB,EAClB,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;oBACP,MAAM,SAAS,GAAG,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;oBAC3C,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;gBACtC,CAAC,CACJ,CAAC;YACN,CAAC;QACL,CAAC;KACJ,CAAC;AACN,CAAC;AAED,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AASA,MAAM,WAAW,GAAuB;IACpC,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,EAAE;IACX,YAAY,EAAE,KAAK;CACtB,CAAC;AAEF,SAAS,iBAAiB,CAAC,IAA0B;IACjD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;IAC7B,IAAI,QAAQ,IAAI,QAAQ,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QAC1C,MAAM,OAAO,GAAG,QAAmB,CAAC;QACpC,OAAO,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,2BAA2B,CAAC,CAAC;IAC5E,CAAC;IACD,OAAO,KAAK,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,OAA2B,EAAE;IACrD,IAAI,GAAG,EAAE,GAAG,WAAW,EAAE,GAAG,IAAI,EAAE,CAAC;IACnC,OAAO;QACH,aAAa,EAAE,aAAa;QAE5B,WAAW,CAAC,IAAiB;YACzB,IAAI,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;gBAAE,OAAO;YAC9C,IAAI,iBAAiB,CAAC,IAAI,CAAC;gBAAE,OAAO;YAEpC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC;gBAAE,OAAO;YACvC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;gBAC3D,MAAM,SAAS,GAAG,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;gBAC3C,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YACtC,CAAC,CAAC,CAAC;QACP,CAAC;QAED,MAAM,CAAC,MAAc;YACjB,IAAI,iBAAiB,CAAC,MAAM,CAAC;gBAAE,OAAO;YAEtC,IACI,IAAI,CAAC,YAAY;gBACjB,MAAM,CAAC,IAAI,KAAK,OAAO;gBACvB,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC9B,CAAC;gBACC,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CACjC,kBAAkB,EAClB,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;oBACP,MAAM,SAAS,GAAG,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;oBAC3C,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;gBACtC,CAAC,CACJ,CAAC;YACN,CAAC;YAED,IACI,IAAI,CAAC,YAAY;gBACjB,MAAM,CAAC,IAAI,KAAK,WAAW;gBAC3B,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC9B,CAAC;gBACC,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CACjC,kBAAkB,EAClB,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;oBACP,MAAM,SAAS,GAAG,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;oBAC3C,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;gBACtC,CAAC,CACJ,CAAC;YACN,CAAC;QACL,CAAC;KACJ,CAAC;AACN,CAAC;AAED,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;AAE3B,eAAe,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budarin/postcss-pixelstorem",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "A plugin for PostCSS that generates rem units from pixel units.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",