postcss-convert-values 1.2.3 → 1.3.1
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/CHANGELOG.md +20 -0
- package/README.md +20 -5
- package/dist/index.js +57 -0
- package/dist/lib/convert.js +65 -0
- package/package.json +15 -10
- package/.jscsrc +0 -18
- package/.npmignore +0 -5
- package/index.js +0 -31
- package/lib/convert.js +0 -59
- package/lib/eachValue.js +0 -27
- package/lib/parseUnit.js +0 -36
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,23 @@
|
|
|
1
|
+
# 1.3.1
|
|
2
|
+
|
|
3
|
+
* Fixes an issue where the module would convert values in gradient/url functions
|
|
4
|
+
since 1.3.0.
|
|
5
|
+
|
|
6
|
+
# 1.3.0
|
|
7
|
+
|
|
8
|
+
* Converted the module to use ES6.
|
|
9
|
+
* balanced-match, css-list & some integrated code has been replaced with
|
|
10
|
+
postcss-value-parser; reducing the number of moving parts in this module, and
|
|
11
|
+
providing a more futureproof way of parsing CSS numeric values.
|
|
12
|
+
|
|
13
|
+
# 1.2.5
|
|
14
|
+
|
|
15
|
+
* Fixes an issue where uppercase units (such as PX) were being deleted.
|
|
16
|
+
|
|
17
|
+
# 1.2.4
|
|
18
|
+
|
|
19
|
+
* Fixes convert not px or ms
|
|
20
|
+
|
|
1
21
|
# 1.2.3
|
|
2
22
|
|
|
3
23
|
* Adds support for `ch` units; previously they were removed.
|
package/README.md
CHANGED
|
@@ -12,13 +12,26 @@ npm install postcss-convert-values --save
|
|
|
12
12
|
|
|
13
13
|
## Example
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
This plugin reduces CSS size by converting values to use different units
|
|
16
|
+
where possible; for example, `500ms` can be represented as `.5s`. You can
|
|
17
|
+
read more about these units in [this article][csstricks].
|
|
17
18
|
|
|
18
|
-
|
|
19
|
-
console.log(postcss([ require('postcss-convert-values') ]).process(css).css);
|
|
19
|
+
### Input
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
```css
|
|
22
|
+
h1 {
|
|
23
|
+
font-size: 16px;
|
|
24
|
+
width: 0em
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Output
|
|
29
|
+
|
|
30
|
+
```css
|
|
31
|
+
h1 {
|
|
32
|
+
font-size: 1pc;
|
|
33
|
+
width: 0
|
|
34
|
+
}
|
|
22
35
|
```
|
|
23
36
|
|
|
24
37
|
Note that this plugin only covers conversions for duration and absolute length
|
|
@@ -38,3 +51,5 @@ MIT © [Ben Briggs](http://beneb.info)
|
|
|
38
51
|
[deps]: https://gemnasium.com/ben-eb/postcss-convert-values
|
|
39
52
|
[npm]: http://badge.fury.io/js/postcss-convert-values
|
|
40
53
|
[postcss]: https://github.com/postcss/postcss
|
|
54
|
+
|
|
55
|
+
[csstricks]: https://css-tricks.com/the-lengths-of-css/
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
|
|
7
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
8
|
+
|
|
9
|
+
var _postcss = require('postcss');
|
|
10
|
+
|
|
11
|
+
var _postcss2 = _interopRequireDefault(_postcss);
|
|
12
|
+
|
|
13
|
+
var _libConvert = require('./lib/convert');
|
|
14
|
+
|
|
15
|
+
var _libConvert2 = _interopRequireDefault(_libConvert);
|
|
16
|
+
|
|
17
|
+
var _postcssValueParser = require('postcss-value-parser');
|
|
18
|
+
|
|
19
|
+
var _postcssValueParser2 = _interopRequireDefault(_postcssValueParser);
|
|
20
|
+
|
|
21
|
+
var optimise = function optimise(decl) {
|
|
22
|
+
if (~decl.prop.indexOf('flex')) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
var parsed = (0, _postcssValueParser2['default'])(decl.value);
|
|
27
|
+
|
|
28
|
+
var transform = function transform(node) {
|
|
29
|
+
if (node.type === 'word') {
|
|
30
|
+
var number = (0, _postcssValueParser.unit)(node.value);
|
|
31
|
+
if (number) {
|
|
32
|
+
var num = parseFloat(number.number);
|
|
33
|
+
var u = number.unit.toLowerCase();
|
|
34
|
+
if (num === 0) {
|
|
35
|
+
var value = u === 'ms' || u === 's' ? 0 + u : 0;
|
|
36
|
+
node.value = value;
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
node.value = (0, _libConvert2['default'])(num, u);
|
|
40
|
+
}
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
if (node.type === 'function' && node.value === 'calc') {
|
|
44
|
+
return node.nodes.forEach(transform);
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
parsed.nodes.forEach(transform);
|
|
49
|
+
decl.value = parsed.toString();
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
exports['default'] = _postcss2['default'].plugin('postcss-convert-values', function () {
|
|
53
|
+
return function (css) {
|
|
54
|
+
css.eachDecl(optimise);
|
|
55
|
+
};
|
|
56
|
+
});
|
|
57
|
+
module.exports = exports['default'];
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var conversions = [{
|
|
7
|
+
// Length
|
|
8
|
+
'in': 96,
|
|
9
|
+
'px': 1,
|
|
10
|
+
'pt': 4 / 3,
|
|
11
|
+
'pc': 16
|
|
12
|
+
}, {
|
|
13
|
+
// Time
|
|
14
|
+
's': 1000,
|
|
15
|
+
'ms': 1
|
|
16
|
+
}];
|
|
17
|
+
|
|
18
|
+
function dropLeadingZero(number) {
|
|
19
|
+
var value = String(number);
|
|
20
|
+
|
|
21
|
+
if (value[0] === '0' && number % 1) {
|
|
22
|
+
return value.substring(1);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
if (value[0] === '-' && value[1] === '0' && number % 1) {
|
|
26
|
+
return '-' + value.substring(2);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
return value;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
exports['default'] = function (number, unit) {
|
|
33
|
+
var converted = undefined,
|
|
34
|
+
value = dropLeadingZero(number) + (unit ? unit : ''),
|
|
35
|
+
conversion = undefined,
|
|
36
|
+
base = undefined;
|
|
37
|
+
|
|
38
|
+
conversion = conversions.filter(function (area) {
|
|
39
|
+
return unit in area;
|
|
40
|
+
})[0];
|
|
41
|
+
|
|
42
|
+
if (conversion) {
|
|
43
|
+
if (unit === 'ms' || unit === 'px') {
|
|
44
|
+
base = number / conversion[unit];
|
|
45
|
+
} else {
|
|
46
|
+
base = number * conversion[unit];
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
converted = Object.keys(conversion).filter(function (u) {
|
|
50
|
+
return unit !== u;
|
|
51
|
+
}).map(function (u) {
|
|
52
|
+
return dropLeadingZero(base / conversion[u]) + u;
|
|
53
|
+
}).reduce(function (a, b) {
|
|
54
|
+
return a.length < b.length ? a : b;
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
if (converted.length < value.length) {
|
|
58
|
+
value = converted;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
return value;
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
module.exports = exports['default'];
|
package/package.json
CHANGED
|
@@ -1,22 +1,28 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "postcss-convert-values",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.1",
|
|
4
4
|
"description": "Convert values with PostCSS (e.g. ms -> s)",
|
|
5
|
-
"main": "index.js",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"files": [
|
|
7
|
+
"LICENSE-MIT",
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
6
10
|
"scripts": {
|
|
7
|
-
"
|
|
8
|
-
"
|
|
11
|
+
"prepublish": "babel src --out-dir dist --ignore /__tests__/",
|
|
12
|
+
"test": "babel-tape-runner \"src/**/__tests__/*.js\" | tap-spec"
|
|
9
13
|
},
|
|
10
14
|
"keywords": [
|
|
11
15
|
"css",
|
|
12
16
|
"optimisation",
|
|
13
17
|
"postcss",
|
|
14
|
-
"postcss-
|
|
18
|
+
"postcss-plugin"
|
|
15
19
|
],
|
|
16
20
|
"license": "MIT",
|
|
17
21
|
"devDependencies": {
|
|
18
|
-
"
|
|
19
|
-
"tape": "^
|
|
22
|
+
"babel": "^5.8.21",
|
|
23
|
+
"babel-tape-runner": "^1.2.0",
|
|
24
|
+
"tap-spec": "^4.1.0",
|
|
25
|
+
"tape": "^4.2.0"
|
|
20
26
|
},
|
|
21
27
|
"homepage": "https://github.com/ben-eb/postcss-convert-values",
|
|
22
28
|
"author": {
|
|
@@ -26,8 +32,7 @@
|
|
|
26
32
|
},
|
|
27
33
|
"repository": "ben-eb/postcss-convert-values",
|
|
28
34
|
"dependencies": {
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"postcss": "^4.1.13"
|
|
35
|
+
"postcss": "^4.1.16",
|
|
36
|
+
"postcss-value-parser": "^1.1.0"
|
|
32
37
|
}
|
|
33
38
|
}
|
package/.jscsrc
DELETED
package/.npmignore
DELETED
package/index.js
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var postcss = require('postcss');
|
|
4
|
-
var convert = require('./lib/convert');
|
|
5
|
-
var eachValue = require('./lib/eachValue');
|
|
6
|
-
var parseUnit = require('./lib/parseUnit');
|
|
7
|
-
|
|
8
|
-
module.exports = postcss.plugin('postcss-convert-values', function () {
|
|
9
|
-
return function (css) {
|
|
10
|
-
css.eachDecl(function (decl) {
|
|
11
|
-
if (~decl.prop.indexOf('flex')) {
|
|
12
|
-
return;
|
|
13
|
-
}
|
|
14
|
-
decl.value = eachValue(decl.value, function (value) {
|
|
15
|
-
var number, unit;
|
|
16
|
-
|
|
17
|
-
if (!isNaN(number = parseFloat(value))) {
|
|
18
|
-
unit = parseUnit(value);
|
|
19
|
-
|
|
20
|
-
if (number === 0) {
|
|
21
|
-
value = (unit === 'ms' || unit === 's') ? 0 + unit : 0;
|
|
22
|
-
} else {
|
|
23
|
-
value = convert(number, unit);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
return value;
|
|
27
|
-
}
|
|
28
|
-
});
|
|
29
|
-
});
|
|
30
|
-
};
|
|
31
|
-
});
|
package/lib/convert.js
DELETED
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var conversions = [{
|
|
4
|
-
// Length
|
|
5
|
-
'in': 96,
|
|
6
|
-
'px': 1,
|
|
7
|
-
'pt': 4 / 3,
|
|
8
|
-
'pc': 16
|
|
9
|
-
}, {
|
|
10
|
-
// Time
|
|
11
|
-
's': 1000,
|
|
12
|
-
'ms': 1
|
|
13
|
-
}];
|
|
14
|
-
|
|
15
|
-
function dropLeadingZero (number) {
|
|
16
|
-
var value = number.toString();
|
|
17
|
-
|
|
18
|
-
if (value[0] === '0' && number % 1) {
|
|
19
|
-
return value.substring(1);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
if (value[0] === '-' && value[1] === '0' && number % 1) {
|
|
23
|
-
return '-' + value.substring(2);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
return value;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
module.exports = function (number, unit) {
|
|
30
|
-
var converted,
|
|
31
|
-
value = dropLeadingZero(number) + (unit ? unit : ''),
|
|
32
|
-
conversion,
|
|
33
|
-
base;
|
|
34
|
-
|
|
35
|
-
conversion = conversions.filter(function (area) {
|
|
36
|
-
return unit in area;
|
|
37
|
-
})[0];
|
|
38
|
-
|
|
39
|
-
if (conversion) {
|
|
40
|
-
base = number / conversion[unit];
|
|
41
|
-
|
|
42
|
-
converted = Object.keys(conversion)
|
|
43
|
-
.filter(function (u) {
|
|
44
|
-
return unit !== u;
|
|
45
|
-
})
|
|
46
|
-
.map(function (u) {
|
|
47
|
-
return dropLeadingZero(base / conversion[u]) + u;
|
|
48
|
-
})
|
|
49
|
-
.reduce(function (a, b) {
|
|
50
|
-
return a.length < b.length ? a : b;
|
|
51
|
-
});
|
|
52
|
-
|
|
53
|
-
if (converted.length < value.length) {
|
|
54
|
-
value = converted;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
return value;
|
|
59
|
-
};
|
package/lib/eachValue.js
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var balanced = require('balanced-match');
|
|
4
|
-
var list = require('css-list');
|
|
5
|
-
|
|
6
|
-
module.exports = function eachValue (value, callback) {
|
|
7
|
-
return list.map(value, function (value, type) {
|
|
8
|
-
var name,
|
|
9
|
-
match,
|
|
10
|
-
index;
|
|
11
|
-
|
|
12
|
-
if (type === null) {
|
|
13
|
-
return callback(value);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
if (type === 'func') {
|
|
17
|
-
index = value.indexOf('(');
|
|
18
|
-
name = value.substring(0, index);
|
|
19
|
-
if (~name.indexOf('calc')) {
|
|
20
|
-
match = balanced('(', ')', value);
|
|
21
|
-
if (match) {
|
|
22
|
-
return name + '(' + eachValue(match.body, callback) + ')';
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
};
|
package/lib/parseUnit.js
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
// From longer to shorter!
|
|
4
|
-
var units = [
|
|
5
|
-
'vmin',
|
|
6
|
-
'vmax',
|
|
7
|
-
'rem',
|
|
8
|
-
'em',
|
|
9
|
-
'ex',
|
|
10
|
-
'vw',
|
|
11
|
-
'vh',
|
|
12
|
-
'vm',
|
|
13
|
-
'ch',
|
|
14
|
-
'in',
|
|
15
|
-
'cm',
|
|
16
|
-
'mm',
|
|
17
|
-
'pt',
|
|
18
|
-
'pc',
|
|
19
|
-
'px',
|
|
20
|
-
'ms',
|
|
21
|
-
's',
|
|
22
|
-
'%'
|
|
23
|
-
];
|
|
24
|
-
|
|
25
|
-
module.exports = function (value) {
|
|
26
|
-
var max, index;
|
|
27
|
-
|
|
28
|
-
for (max = 4; max !== 0; max -= 1) {
|
|
29
|
-
index = units.indexOf(value.slice(-max));
|
|
30
|
-
if (~index) {
|
|
31
|
-
return units[index];
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
return null;
|
|
36
|
-
};
|