Skip to content

Commit

Permalink
refactor: convert unit utils (#84)
Browse files Browse the repository at this point in the history
  • Loading branch information
@evilebottnawi
evilebottnawi authored Apr 4, 2019
1 parent 1cd2c5f commit 69a3ca0
Show file tree
Hide file tree
Showing 11 changed files with 709 additions and 217 deletions.
6 changes: 4 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,10 @@
"repository": "https://github.com/postcss/postcss-calc.git",
"eslintConfig": {
"parser": "babel-eslint",
"extends": "eslint-config-i-am-meticulous"
"extends": "eslint-config-i-am-meticulous",
"rules": {
"curly": "error"
}
},
"devDependencies": {
"@babel/cli": "^7.1.2",
Expand All @@ -45,7 +48,6 @@
"jison-gho": "^0.6.1-215"
},
"dependencies": {
"css-unit-converter": "^1.1.1",
"postcss": "^7.0.5",
"postcss-selector-parser": "^6.0.2",
"postcss-value-parser": "^3.3.1"
Expand Down
163 changes: 163 additions & 0 deletions src/__tests__/convertUnit.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
import test from 'ava';

import convertUnit from '../lib/convertUnit'

test("valid conversions", (t) => {
const conversions = [
// source value, source unit, expected value, target unit
[ 10, 'px', 10, 'px'],
[ 10, 'px', 0.26458, 'cm'],
[ 10, 'px', 2.64583, 'mm'],
[ 10, 'px', 10.58333, 'q'],
[ 10, 'px', 0.10417, 'in'],
[ 10, 'px', 7.5, 'pt'],
[ 10, 'px', 0.625, 'pc'],
[ 10, 'cm', 377.95276, 'px'],
[ 10, 'cm', 10, 'cm'],
[ 10, 'cm', 100, 'mm'],
[ 10, 'cm', 400, 'q'],
[ 10, 'cm', 3.93701, 'in'],
[ 10, 'cm', 283.46457, 'pt'],
[ 10, 'cm', 23.62205, 'pc'],
[ 10, 'mm', 37.79528, 'px'],
[ 10, 'mm', 1, 'cm'],
[ 10, 'mm', 10, 'mm'],
[ 10, 'mm', 40, 'q'],
[ 10, 'mm', 0.3937, 'in'],
[ 10, 'mm', 28.34646, 'pt'],
[ 10, 'mm', 2.3622, 'pc'],
[ 10, 'q', 9.44882, 'px'],
[ 10, 'q', 0.25, 'cm'],
[ 10, 'q', 2.5, 'mm'],
[ 10, 'q', 0.09843, 'in'],
[ 10, 'q', 7.08661, 'pt'],
[ 10, 'q', 0.59055, 'pc'],
[ 10, 'in', 960, 'px'],
[ 10, 'in', 25.4, 'cm'],
[ 10, 'in', 254, 'mm'],
[ 10, 'in', 1016, 'q'],
[ 10, 'in', 10, 'in'],
[ 10, 'in', 720, 'pt'],
[ 10, 'in', 60, 'pc'],
[ 10, 'pt', 13.33333, 'px'],
[ 10, 'pt', 0.35278, 'cm'],
[ 10, 'pt', 3.52778, 'mm'],
[ 10, 'pt', 14.11111, 'q'],
[ 10, 'pt', 0.13889, 'in'],
[ 10, 'pt', 10, 'pt'],
[ 10, 'pt', 0.83333, 'pc'],
[ 10, 'pc', 160, 'px'],
[ 10, 'pc', 4.23333, 'cm'],
[ 10, 'pc', 42.33333, 'mm'],
[ 10, 'pc', 169.33333, 'q'],
[ 10, 'pc', 1.66667, 'in'],
[ 10, 'pc', 120, 'pt'],
[ 10, 'pc', 10, 'pc'],
[ 10, 'deg', 10, 'deg'],
[ 10, 'deg', 11.11111, 'grad'],
[ 10, 'deg', 0.17453, 'rad'],
[ 10, 'deg', 0.02778, 'turn'],
[ 10, 'grad', 9, 'deg'],
[ 10, 'grad', 10, 'grad'],
[ 10, 'grad', 0.15708, 'rad'],
[ 10, 'grad', 0.025, 'turn'],
[ 10, 'rad', 572.9578, 'deg'],
[ 10, 'rad', 636.61977, 'grad'],
[ 10, 'rad', 10, 'rad'],
[ 10, 'rad', 1.59155, 'turn'],
[ 10, 'turn', 3600, 'deg'],
[ 10, 'turn', 4000, 'grad'],
[ 10, 'turn', 62.83185, 'rad'],
[ 10, 'turn', 10, 'turn'],
[ 10, 's', 10, 's'],
[ 10, 's', 10000, 'ms'],
[ 10, 'ms', 0.01, 's'],
[ 10, 'ms', 10, 'ms'],
[ 10, 'Hz', 10, 'Hz'],
[ 10, 'Hz', 0.01, 'kHz'],
[ 10, 'kHz', 10000, 'Hz'],
[ 10, 'kHz', 10, 'kHz'],
[ 10, 'dpi', 10, 'dpi'],
[ 10, 'dpi', 25.4, 'dpcm'],
[ 10, 'dpi', 960, 'dppx'],
[ 10, 'dpcm', 3.93701, 'dpi'],
[ 10, 'dpcm', 10, 'dpcm'],
[ 10, 'dpcm', 377.95276, 'dppx'],
[ 10, 'dppx', 0.10417, 'dpi'],
[ 10, 'dppx', 0.26458, 'dpcm'],
[ 10, 'dppx', 10, 'dppx']
];

conversions.forEach(function(e) {
const value = e[0];
const unit = e[1];
const expected = e[2];
const targetUnit = e[3];

t.is(convertUnit(value, unit, targetUnit), expected, unit + ' -> ' + targetUnit);
});
});

test("invalid conversions", (t) => {
const invalid_units = {
'px': ['deg', 'grad', 'rad', 'turn', 's', 'ms', 'Hz', 'kHz', 'dpi', 'dpcm', 'dppx'],
'cm': ['deg', 'grad', 'rad', 'turn', 's', 'ms', 'Hz', 'kHz', 'dpi', 'dpcm', 'dppx'],
'mm': ['deg', 'grad', 'rad', 'turn', 's', 'ms', 'Hz', 'kHz', 'dpi', 'dpcm', 'dppx'],
'q': ['deg', 'grad', 'rad', 'turn', 's', 'ms', 'Hz', 'kHz', 'dpi', 'dpcm', 'dppx'],
'in': ['deg', 'grad', 'rad', 'turn', 's', 'ms', 'Hz', 'kHz', 'dpi', 'dpcm', 'dppx'],
'pt': ['deg', 'grad', 'rad', 'turn', 's', 'ms', 'Hz', 'kHz', 'dpi', 'dpcm', 'dppx'],
'pc': ['deg', 'grad', 'rad', 'turn', 's', 'ms', 'Hz', 'kHz', 'dpi', 'dpcm', 'dppx'],
'deg': ['px', 'cm', 'mm', 'in', 'pt', 'pc', 's', 'ms', 'Hz', 'kHz', 'dpi', 'dpcm', 'dppx'],
'grad': ['px', 'cm', 'mm', 'in', 'pt', 'pc', 's', 'ms', 'Hz', 'kHz', 'dpi', 'dpcm', 'dppx'],
'rad': ['px', 'cm', 'mm', 'in', 'pt', 'pc', 's', 'ms', 'Hz', 'kHz', 'dpi', 'dpcm', 'dppx'],
'turn': ['px', 'cm', 'mm', 'in', 'pt', 'pc', 's', 'ms', 'Hz', 'kHz', 'dpi', 'dpcm', 'dppx'],
's': ['px', 'cm', 'mm', 'in', 'pt', 'pc', 'deg', 'grad', 'rad', 'turn', 'Hz', 'kHz', 'dpi', 'dpcm', 'dppx'],
'ms': ['px', 'cm', 'mm', 'in', 'pt', 'pc', 'deg', 'grad', 'rad', 'turn', 'Hz', 'kHz', 'dpi', 'dpcm', 'dppx'],
'Hz': ['px', 'cm', 'mm', 'in', 'pt', 'pc', 'deg', 'grad', 'rad', 'turn', 's', 'ms', 'dpi', 'dpcm', 'dppx'],
'kHz': ['px', 'cm', 'mm', 'in', 'pt', 'pc', 'deg', 'grad', 'rad', 'turn', 's', 'ms', 'dpi', 'dpcm', 'dppx'],
'dpi': ['px', 'cm', 'mm', 'in', 'pt', 'pc', 'deg', 'grad', 'rad', 'turn', 's', 'ms', 'Hz', 'kHz'],
'dpcm': ['px', 'cm', 'mm', 'in', 'pt', 'pc', 'deg', 'grad', 'rad', 'turn', 's', 'ms', 'Hz', 'kHz'],
'dppx': ['px', 'cm', 'mm', 'in', 'pt', 'pc', 'deg', 'grad', 'rad', 'turn', 's', 'ms', 'Hz', 'kHz']
};

for (const unit in invalid_units) {
invalid_units[unit].forEach((targetUnit) => {
let failed = false;

try {
convertUnit(10, unit, targetUnit);
} catch (e) {
failed = true;
}

t.true(failed, unit + ' -> ' + targetUnit);
});
}
});

test("precision", (t) => {
const precision = 10;
const conversions = [
// source value, source unit, expected value, target unit
[ 10, 'px', 0.2645833333, 'cm'],
[ 10, 'px', 2.6458333333, 'mm'],
[ 10, 'px', 0.1041666667, 'in'],
[ 10, 'cm', 377.9527559055, 'px']
];

conversions.forEach((e) => {
const value = e[0];
const unit = e[1];
const expected = e[2];
const targetUnit = e[3];

t.is(convertUnit(value, unit, targetUnit, precision), expected, unit + ' -> ' + targetUnit);
});
});

test("falsey precision", (t) => {
t.is(
convertUnit(10, 'px', 'cm', false),
0.26458333333333334
);
});
140 changes: 139 additions & 1 deletion src/__tests__/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,34 @@ import postcss from 'postcss';

import reduceCalc from '../../dist';

const postcssOpts = { from: undefined }
const postcssOpts = { from: undefined };

function testValue(t, fixture, expected = null, opts = {}) {
if (expected === null) {
expected = fixture;
}

fixture = `foo{bar:${fixture}}`;
expected = `foo{bar:${expected}}`;

return testCss(t, fixture, expected, opts);
}

function testCss(t, fixture, expected = null, opts = {}) {
if (expected === null) {
expected = fixture;
}

t.plan(1);

return postcss(reduceCalc(opts)).process(fixture, postcssOpts).then(result => {
t.deepEqual(result.css, expected);
});
}

async function testThrows(t, fixture, expected, opts) {
fixture = `foo{bar:${fixture}}`;

await t.throwsAsync(() => postcss(reduceCalc(opts)).process(fixture, postcssOpts), expected);
}

Expand Down Expand Up @@ -891,3 +896,136 @@ test(
'calc(1.1E+1px + 1.1E+1px)',
'22px',
);

test(
'convert units',
testValue,
'calc(1cm + 1px)',
'1.02646cm',
);

test(
'convert units (#1)',
testValue,
'calc(1px + 1cm)',
'38.79528px',
);

test(
'convert units (#2)',
testValue,
'calc(10Q + 10Q)',
'20Q',
);

test(
'convert units (#3)',
testValue,
'calc(100.9q + 10px)',
'111.48333q',
);

test(
'convert units (#4)',
testValue,
'calc(10px + 100.9q)',
'105.33858px',
);

test(
'convert units (#5)',
testValue,
'calc(10cm + 1px)',
'10.02646cm',
);

test(
'convert units (#6)',
testValue,
'calc(10mm + 1px)',
'10.26458mm',
);

test(
'convert units (#7)',
testValue,
'calc(10px + 1q)',
'10.94488px'
);

test(
'convert units (#8)',
testValue,
'calc(10cm + 1q)',
'10.025cm'
);

test(
'convert units (#9)',
testValue,
'calc(10mm + 1q)',
'10.25mm'
);

test(
'convert units (#10)',
testValue,
'calc(10in + 1q)',
'10.00984in'
);

test(
'convert units (#11)',
testValue,
'calc(10pt + 1q)',
'10.70866pt'
);

test(
'convert units (#12)',
testValue,
'calc(10pc + 1q)',
'10.05906pc'
);

test(
'convert units (#13)',
testValue,
'calc(1q + 10px)',
'11.58333q'
);

test(
'convert units (#14)',
testValue,
'calc(1q + 10cm)',
'401q'
);

test(
'convert units (#15)',
testValue,
'calc(1q + 10mm)',
'41q'
);

test(
'convert units (#16)',
testValue,
'calc(1q + 10in)',
'1017q'
);

test(
'convert units (#17)',
testValue,
'calc(1q + 10pt)',
'15.11111q'
);

test(
'convert units (#18)',
testValue,
'calc(1q + 10pc)',
'170.33333q'
);
15 changes: 12 additions & 3 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,18 @@ export default plugin('postcss-calc', (opts) => {
return (css, result) => {
css.walk(node => {
const { type } = node;
if (type === 'decl') transform(node, "value", options, result);
if (type === 'atrule' && options.mediaQueries) transform(node, "params", options, result);
if (type === 'rule' && options.selectors) transform(node, "selector", options, result);

if (type === 'decl') {
transform(node, "value", options, result);
}

if (type === 'atrule' && options.mediaQueries) {
transform(node, "params", options, result);
}

if (type === 'rule' && options.selectors) {
transform(node, "selector", options, result);
}
});
};
});
Loading

0 comments on commit 69a3ca0

Please sign in to comment.