@budarin/postcss-pixelstorem 1.0.8 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +43 -22
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.js +12 -0
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -20,7 +20,7 @@ In `@budarin/postcss-pixelstorem` default mode, an input of:
20
20
  }
21
21
  ```
22
22
 
23
- will result in an output of:
23
+ will result in an output of:
24
24
 
25
25
  ```css
26
26
  h1 {
@@ -38,35 +38,56 @@ will result in an output of:
38
38
 
39
39
  @budarin/postcss-pixelstorem requires [PostCSS][4] to be installed. To install @budarin/postcss-pixelstorem:
40
40
 
41
- ``$ npm install --save-dev @budarin/postcss-pixelstorem``
41
+ `$ npm install --save-dev @budarin/postcss-pixelstorem`
42
42
 
43
43
  In gulpfile.js
44
44
 
45
45
  ```js
46
- var postcss = require('gulp-postcss')
47
- var pixelstorem = require('@budarin/postcss-pixelstorem');
48
- ```
46
+ var postcss = require('gulp-postcss');
47
+ var pixelstorem = require('@budarin/postcss-pixelstorem');
48
+ ```
49
49
 
50
50
  Gulp task:
51
51
 
52
52
  ```js
53
- gulp.task('css', function() {
54
- var plugins = [
55
- pixelstorem()
56
- ];
53
+ gulp.task('css', function () {
54
+ var plugins = [pixelstorem()];
57
55
  gulp.src('source/sass/styles.scss')
58
- .pipe(postcss(plugins))
59
- .pipe(gulp.dest(public/css));
60
- });
56
+ .pipe(postcss(plugins))
57
+ .pipe(gulp.dest(public / css));
58
+ });
61
59
  ```
62
60
 
63
61
  ## Defaults
64
62
 
65
- * Default base for conversion is `1rem = 16px`.
66
- * Default output for `rem(<value>)`is `rem`.
67
- * DEfault output for `em(<value>)` is `em`.
68
- * Default output unit for `<value>px` is `rem`.
69
- * Default is to convert values in media and container queries.
63
+ - Default base for conversion is `1rem = 16px`.
64
+ - Default output for `rem(<value>)`is `rem`.
65
+ - Default output for `em(<value>)` is `em`.
66
+ - Default output unit for `<value>px` is `rem`.
67
+ - Default is to convert values in media and container queries.
68
+
69
+ ## Disabling conversion for specific lines
70
+
71
+ You can disable conversion for a specific declaration or at-rule by adding a comment `/* pxtorem-disable-next-line */` before it:
72
+
73
+ ```css
74
+ .example {
75
+ /* pxtorem-disable-next-line */
76
+ border-width: 1px; /* will remain 1px */
77
+
78
+ font-size: 16px; /* will be converted to 1rem */
79
+ }
80
+
81
+ /* pxtorem-disable-next-line */
82
+ @media (min-width: 768px) {
83
+ /* 768px will remain unchanged */
84
+ .container {
85
+ padding: 20px; /* will be converted to 1.25rem */
86
+ }
87
+ }
88
+ ```
89
+
90
+ 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.).
70
91
 
71
92
  ## Options
72
93
 
@@ -88,11 +109,11 @@ Gulp task:
88
109
  ```
89
110
 
90
111
  Optional values:
91
- * `base: <value>` - Accepts a unitless value. Resets the base font size for conversion to rems or ems. Default value is `16`.
92
- * `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`.
93
- * `exclude: ["declaration"]` - any declaration type to exclude from conversion, eg, `border`, `border-radius`, etc. These declarations will be excluded globally. Default value is `[]`.
94
- * `mediaQueries: boolean` Setting this to `false` prevents conversion of values in media and container queries. Default value is `true`.
95
112
 
113
+ - `base: <value>` - Accepts a unitless value. Resets the base font size for conversion to rems or ems. Default value is `16`.
114
+ - `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`.
115
+ - `exclude: ["declaration"]` - any declaration type to exclude from conversion, eg, `border`, `border-radius`, etc. These declarations will be excluded globally. Default value is `[]`.
116
+ - `mediaQueries: boolean` Setting this to `false` prevents conversion of values in media and container queries. Default value is `true`.
96
117
 
97
118
  Links:
98
119
 
@@ -101,4 +122,4 @@ Links:
101
122
  [2]: http://bourbon.io/docs/#px-to-em
102
123
  [3]: http://bourbon.io/docs/#px-to-rem
103
124
  [4]: http://postcss.org/
104
- </pre>
125
+ </pre>
package/dist/index.d.ts.map CHANGED
@@ -1 +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,wBAAgB,WAAW,CAAC,IAAI,GAAE,kBAAuB;;sBAK/B,WAAW;mBAUd,MAAM;EA8B5B;yBA7Ce,WAAW;;;AAiD3B,eAAe,WAAW,CAAC"}
1
+ {"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 CHANGED
@@ -4,6 +4,14 @@ const defaultOpts = {
4
4
  exclude: [],
5
5
  mediaQueries: false,
6
6
  };
7
+ function hasDisableComment(node) {
8
+ const prevNode = node.prev();
9
+ if (prevNode && prevNode.type === 'comment') {
10
+ const comment = prevNode;
11
+ return comment.text.toLowerCase().includes('pxtorem-disable-next-line');
12
+ }
13
+ return false;
14
+ }
7
15
  export function pixelstorem(opts = {}) {
8
16
  opts = { ...defaultOpts, ...opts };
9
17
  return {
@@ -11,6 +19,8 @@ export function pixelstorem(opts = {}) {
11
19
  Declaration(decl) {
12
20
  if (opts.exclude?.includes(decl.prop))
13
21
  return;
22
+ if (hasDisableComment(decl))
23
+ return;
14
24
  if (!decl.value.includes('px'))
15
25
  return;
16
26
  decl.value = decl.value.replace(/(\d*\.?\d+)px\b/g, (_, num) => {
@@ -19,6 +29,8 @@ export function pixelstorem(opts = {}) {
19
29
  });
20
30
  },
21
31
  AtRule(atRule) {
32
+ if (hasDisableComment(atRule))
33
+ return;
22
34
  if (opts.mediaQueries &&
23
35
  atRule.name === 'media' &&
24
36
  atRule.params.includes('px')) {
package/dist/index.js.map CHANGED
@@ -1 +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,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;YAE9C,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,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"}
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,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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@budarin/postcss-pixelstorem",
3
- "version": "1.0.8",
3
+ "version": "1.0.9",
4
4
  "description": "A plugin for PostCSS that generates rem units from pixel units.",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",