@budarin/postcss-pixelstorem 1.0.0 → 1.0.2
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.
- package/README.md +92 -2
- package/dist/index.d.ts +8 -8
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,2 +1,92 @@
|
|
|
1
|
-
# postcss-pixelstorem
|
|
2
|
-
|
|
1
|
+
# @budarin/postcss-pixelstorem
|
|
2
|
+
|
|
3
|
+
(this is a fork of the original plugin for the latest version of postcss https://github.com/putneydm/pixelstorem)
|
|
4
|
+
|
|
5
|
+
`@budarin/postcss-pixelstorem` is a PostCSS plugin that converts items sized in pixels in CSS code to either rems or ems.
|
|
6
|
+
|
|
7
|
+
It will convert several types of CSS notation. It is designed to be versatile by doing basic `px to rem` conversion and also to work with legacy code that was written against the deprecated [`Pixels to Rems`][3] and [`Pixels to Ems`][2] Sass functions from [Bourbon][1]. It converts the notations `rem(<value>)` to `rems` and `em(<value>)` to `ems`. It also converts `<value>px` code to `rems` or `ems`.
|
|
8
|
+
|
|
9
|
+
In `@budarin/postcss-pixelstorem` default mode, an input of:
|
|
10
|
+
|
|
11
|
+
h1 {
|
|
12
|
+
font-size: rem(32);
|
|
13
|
+
}
|
|
14
|
+
h2 {
|
|
15
|
+
font-size: em(24):
|
|
16
|
+
}
|
|
17
|
+
p {
|
|
18
|
+
font-size: 16px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
will result in an output of:
|
|
22
|
+
|
|
23
|
+
h1 {
|
|
24
|
+
font-size: 2rem;
|
|
25
|
+
}
|
|
26
|
+
h2 {
|
|
27
|
+
font-size: 1.5em:
|
|
28
|
+
}
|
|
29
|
+
p {
|
|
30
|
+
font-size: 1em;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
## Installation and use
|
|
35
|
+
|
|
36
|
+
@budarin/postcss-pixelstorem requires [PostCSS][4] to be installed. To install @budarin/postcss-pixelstorem:
|
|
37
|
+
|
|
38
|
+
``$ npm install --save-dev @budarin/postcss-pixelstorem``
|
|
39
|
+
|
|
40
|
+
In gulpfile.js
|
|
41
|
+
|
|
42
|
+
var postcss = require('gulp-postcss')
|
|
43
|
+
var pixelstorem = require('@budarin/postcss-pixelstorem');
|
|
44
|
+
|
|
45
|
+
Gulp task:
|
|
46
|
+
|
|
47
|
+
gulp.task('css', function() {
|
|
48
|
+
var plugins = [
|
|
49
|
+
pixelstorem()
|
|
50
|
+
];
|
|
51
|
+
gulp.src('source/sass/styles.scss')
|
|
52
|
+
.pipe(postcss(plugins))
|
|
53
|
+
.pipe(gulp.dest(public/css));
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
## Defaults
|
|
58
|
+
|
|
59
|
+
* Default base for conversion is `1rem = 16px`.
|
|
60
|
+
* Default output for `rem(<value>)`is `rem`.
|
|
61
|
+
* DEfault output for `em(<value>)` is `em`.
|
|
62
|
+
* Default output unit for `<value>px` is `rem`.
|
|
63
|
+
* Default is to convert values in media queries.
|
|
64
|
+
|
|
65
|
+
## Options
|
|
66
|
+
|
|
67
|
+
`@budarin/postcss-pixelstorem` accepts optional settings that override default settings.
|
|
68
|
+
|
|
69
|
+
gulp.task('css', function() {
|
|
70
|
+
var plugins = [
|
|
71
|
+
pixelstorem({
|
|
72
|
+
base: <value>,
|
|
73
|
+
unit: "rem" or "em",
|
|
74
|
+
exclude: ["declaration"]
|
|
75
|
+
})
|
|
76
|
+
];
|
|
77
|
+
gulp.src('source/sass/styles.scss')
|
|
78
|
+
.pipe(postcss(plugins))
|
|
79
|
+
.pipe(gulp.dest(public/css));
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
Optional values:
|
|
83
|
+
* `base: <value>` - Accepts a unitless value. Resets the base font size for conversion to rems or ems.
|
|
84
|
+
* `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.
|
|
85
|
+
* `exclude: ["declaration"]` - any declaration type to exclude from conversion, eg, `border`, `border-radius`, etc. These declarations will be excluded globally.
|
|
86
|
+
* `mediaQueries: boolean` Setting this to `false` prevents conversion of values in media queries. Default value is `true`.
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
[1]: http://bourbon.io/
|
|
90
|
+
[2]: http://bourbon.io/docs/#px-to-em
|
|
91
|
+
[3]: http://bourbon.io/docs/#px-to-rem
|
|
92
|
+
[4]: http://postcss.org/
|
package/dist/index.d.ts
CHANGED
|
@@ -5,13 +5,13 @@ interface PixelstoremOptions {
|
|
|
5
5
|
exclude?: string[];
|
|
6
6
|
mediaQueries?: boolean;
|
|
7
7
|
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
AtRule(atRule: AtRule): void;
|
|
13
|
-
};
|
|
14
|
-
postcss: boolean;
|
|
8
|
+
declare function pixelstorem(opts?: PixelstoremOptions): {
|
|
9
|
+
postcssPlugin: string;
|
|
10
|
+
Declaration(decl: Declaration): void;
|
|
11
|
+
AtRule(atRule: AtRule): void;
|
|
15
12
|
};
|
|
16
|
-
|
|
13
|
+
declare namespace pixelstorem {
|
|
14
|
+
var postcss: boolean;
|
|
15
|
+
}
|
|
16
|
+
export default pixelstorem;
|
|
17
17
|
//# sourceMappingURL=index.d.ts.map
|
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,
|
|
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"}
|
package/dist/index.js
CHANGED
|
@@ -4,7 +4,7 @@ const defaultOpts = {
|
|
|
4
4
|
exclude: [],
|
|
5
5
|
mediaQueries: false,
|
|
6
6
|
};
|
|
7
|
-
export
|
|
7
|
+
export default function pixelstorem(opts = {}) {
|
|
8
8
|
opts = { ...defaultOpts, ...opts };
|
|
9
9
|
return {
|
|
10
10
|
postcssPlugin: 'pixelstorem',
|
|
@@ -33,6 +33,6 @@ export const pixelstorem = (opts = {}) => {
|
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
35
|
};
|
|
36
|
-
}
|
|
36
|
+
}
|
|
37
37
|
pixelstorem.postcss = true;
|
|
38
38
|
//# sourceMappingURL=index.js.map
|
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,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,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"}
|