Skip to content

Commit 0726b8f

Browse files
bhoughbhough
committed
feat(remtopx): adds new remToPx conversion helper
1 parent 2968845 commit 0726b8f

File tree

9 files changed

+505
-131
lines changed

9 files changed

+505
-131
lines changed

‎.documentation.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@
9797
"important",
9898
"modularScale",
9999
"rem",
100+
"remToPx",
100101
"stripUnit",
101102
{
102103
"name": "Easings"

‎docs/assets/polished.js

Lines changed: 70 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,9 @@
261261
"73": "Please provide a valid CSS variable.\n\n",
262262
"74": "CSS variable not found and no default was provided.\n\n",
263263
"75": "important requires a valid style object, got a %s instead.\n\n",
264-
"76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
264+
"76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n\n",
265+
"77": "remToPx expects a value in \"rem\" but you provided it in \"%s\".\n\n",
266+
"78": "base must be set in \"px\" or \"%\" but you set it in \"%s\".\n"
265267
};
266268
/**
267269
* super basic version of sprintf
@@ -860,6 +862,72 @@
860862

861863
var rem = /*#__PURE__*/pxtoFactory('rem');
862864

865+
var defaultFontSize = 16;
866+
867+
function convertBase(base) {
868+
var deconstructedValue = getValueAndUnit(base);
869+
870+
if (deconstructedValue[1] === 'px') {
871+
return parseFloat(base);
872+
}
873+
874+
if (deconstructedValue[1] === '%') {
875+
return parseFloat(base) / 100 * defaultFontSize;
876+
}
877+
878+
throw new PolishedError(78, deconstructedValue[1]);
879+
}
880+
881+
function getBaseFromDoc() {
882+
/* eslint-disable */
883+
884+
/* istanbul ignore next */
885+
if (typeof document !== 'undefined' && document.documentElement !== null) {
886+
var rootFontSize = getComputedStyle(document.documentElement).fontSize;
887+
return rootFontSize ? convertBase(rootFontSize) : defaultFontSize;
888+
}
889+
/* eslint-enable */
890+
891+
/* istanbul ignore next */
892+
893+
894+
return defaultFontSize;
895+
}
896+
/**
897+
* Convert rem values to px. By default, the base value is pulled from the font-size property on the root element (if it is set in % or px). It defaults to 16px if not found on the root. You can also override the base value by providing your own base in % or px.
898+
* @example
899+
* // Styles as object usage
900+
* const styles = {
901+
* 'height': remToPx('1.6rem')
902+
* 'height': remToPx('1.6rem', '10px')
903+
* }
904+
*
905+
* // styled-components usage
906+
* const div = styled.div`
907+
* height: ${remToPx('1.6rem')}
908+
* height: ${remToPx('1.6rem', '10px')}
909+
* `
910+
*
911+
* // CSS in JS Output
912+
*
913+
* element {
914+
* 'height': '25.6px',
915+
* 'height': '16px',
916+
* }
917+
*/
918+
919+
920+
function remToPx(value, base) {
921+
var deconstructedValue = getValueAndUnit(value);
922+
923+
if (deconstructedValue[1] !== 'rem' && deconstructedValue[1] !== '') {
924+
throw new PolishedError(77, deconstructedValue[1]);
925+
}
926+
927+
var newBase = base ? convertBase(base) : getBaseFromDoc();
928+
return deconstructedValue[0] * newBase + "px";
929+
}
930+
863931
var functionsMap = {
864932
back: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',
865933
circ: 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',
@@ -4229,6 +4297,7 @@
42294297
exports.radialGradient = radialGradient;
42304298
exports.readableColor = readableColor;
42314299
exports.rem = rem;
4300+
exports.remToPx = remToPx;
42324301
exports.retinaImage = retinaImage;
42334302
exports.rgb = rgb;
42344303
exports.rgbToColorString = rgbToColorString;

‎docs/docs/index.html

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -793,6 +793,16 @@ <h3 class='mb0 no-anchor'></h3>
793793
</li>
794794

795795

796+
<li><a
797+
href='#remtopx'
798+
class="">
799+
remToPx
800+
801+
</a>
802+
803+
</li>
804+
805+
796806
<li><a
797807
href='#stripunit'
798808
class="">
@@ -9200,6 +9210,122 @@ <h3 class='fl m0' id='rem'>
92009210

92019211

92029212

9213+
</section>
9214+
9215+
9216+
9217+
9218+
<section class='p2 mb2 clearfix bg-white minishadow'>
9219+
9220+
9221+
<div class='clearfix'>
9222+
9223+
<h3 class='fl m0' id='remtopx'>
9224+
remToPx
9225+
</h3>
9226+
9227+
9228+
<a class='fr fill-darken0 round round pad1x quiet h5' href='[object Object]'>
9229+
<span></span>
9230+
</a>
9231+
9232+
</div>
9233+
9234+
9235+
<p>Convert rem values to px. By default, the base value is pulled from the font-size property on the root element (if it is set in % or px). It defaults to 16px if not found on the root. You can also override the base value by providing your own base in % or px.</p>
9236+
9237+
9238+
<div class='pre p1 fill-light mt0'>remToPx(value: (<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>), base: (<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)?): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></div>
9239+
9240+
9241+
<p>
9242+
Extends
9243+
9244+
9245+
9246+
</p>
9247+
9248+
9249+
9250+
9251+
9252+
9253+
9254+
9255+
9256+
<div class='py1 quiet mt1 prose-big'>Parameters</div>
9257+
<div class='prose'>
9258+
9259+
<div class='space-bottom0'>
9260+
<div>
9261+
<span class='code bold'>value</span> <code class='quiet'>((<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>))</code>
9262+
9263+
</div>
9264+
9265+
</div>
9266+
9267+
<div class='space-bottom0'>
9268+
<div>
9269+
<span class='code bold'>base</span> <code class='quiet'>((<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)?)</code>
9270+
9271+
</div>
9272+
9273+
</div>
9274+
9275+
</div>
9276+
9277+
9278+
9279+
<div class='py1 quiet mt1 prose-big'>Properties</div>
9280+
<div>
9281+
9282+
</div>
9283+
9284+
9285+
9286+
9287+
<div class='py1 quiet mt1 prose-big'>Returns</div>
9288+
<code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>
9289+
9290+
9291+
9292+
9293+
<div class='py1 quiet mt1 prose-big'>Throws</div>
9294+
<ul>
9295+
9296+
</ul>
9297+
9298+
9299+
9300+
<div class='py1 quiet mt1 prose-big'>Example</div>
9301+
9302+
9303+
<pre class='p1 overflow-auto round fill-light'><span class="hljs-comment">// Styles as object usage</span>
9304+
<span class="hljs-keyword">const</span> styles = {
9305+
<span class="hljs-string">'height'</span>: remToPx(<span class="hljs-string">'1.6rem'</span>)
9306+
<span class="hljs-string">'height'</span>: remToPx(<span class="hljs-string">'1.6rem'</span>, <span class="hljs-string">'10px'</span>)
9307+
}
9308+
9309+
<span class="hljs-comment">// styled-components usage</span>
9310+
<span class="hljs-keyword">const</span> div = styled.div<span class="hljs-string">`
9311+
height: <span class="hljs-subst">${remToPx(<span class="hljs-string">'1.6rem'</span>)}</span>
9312+
height: <span class="hljs-subst">${remToPx(<span class="hljs-string">'1.6rem'</span>, <span class="hljs-string">'10px'</span>)}</span>
9313+
`</span>
9314+
9315+
<span class="hljs-comment">// CSS in JS Output</span>
9316+
9317+
element {
9318+
<span class="hljs-string">'height'</span>: <span class="hljs-string">'25.6px'</span>,
9319+
<span class="hljs-string">'height'</span>: <span class="hljs-string">'16px'</span>,
9320+
}</pre>
9321+
9322+
9323+
9324+
9325+
9326+
9327+
9328+
92039329
</section>
92049330

92059331

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "polished",
3-
"version": "4.0.5",
3+
"version": "4.1.0",
44
"description": "A lightweight toolset for writing styles in Javascript.",
55
"license": "MIT",
66
"author": "Brian Hough <[email protected]> (https://polished.js.org)",

‎src/helpers/remToPx.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
// @flow
2+
import getValueAndUnit from './getValueAndUnit'
3+
import PolishedError from '../internalHelpers/_errors'
4+
5+
const defaultFontSize = 16
6+
7+
function convertBase(base: string | number): number {
8+
const deconstructedValue = getValueAndUnit(base)
9+
if (deconstructedValue[1] === 'px') {
10+
return parseFloat(base)
11+
}
12+
13+
if (deconstructedValue[1] === '%') {
14+
return (parseFloat(base) / 100) * defaultFontSize
15+
}
16+
17+
throw new PolishedError(78, deconstructedValue[1])
18+
}
19+
20+
function getBaseFromDoc(): number {
21+
/* eslint-disable */
22+
/* istanbul ignore next */
23+
if (typeof document !== 'undefined' && document.documentElement !== null) {
24+
const rootFontSize = getComputedStyle(document.documentElement).fontSize
25+
return rootFontSize ? convertBase(rootFontSize) : defaultFontSize
26+
}
27+
/* eslint-enable */
28+
/* istanbul ignore next */
29+
return defaultFontSize
30+
}
31+
32+
/**
33+
* Convert rem values to px. By default, the base value is pulled from the font-size property on the root element (if it is set in % or px). It defaults to 16px if not found on the root. You can also override the base value by providing your own base in % or px.
34+
* @example
35+
* // Styles as object usage
36+
* const styles = {
37+
* 'height': remToPx('1.6rem')
38+
* 'height': remToPx('1.6rem', '10px')
39+
* }
40+
*
41+
* // styled-components usage
42+
* const div = styled.div`
43+
* height: ${remToPx('1.6rem')}
44+
* height: ${remToPx('1.6rem', '10px')}
45+
* `
46+
*
47+
* // CSS in JS Output
48+
*
49+
* element {
50+
* 'height': '25.6px',
51+
* 'height': '16px',
52+
* }
53+
*/
54+
export default function remToPx(value: string | number, base?: string | number): string {
55+
const deconstructedValue = getValueAndUnit(value)
56+
57+
if (deconstructedValue[1] !== 'rem' && deconstructedValue[1] !== '') {
58+
throw new PolishedError(77, deconstructedValue[1])
59+
}
60+
61+
const newBase = base ? convertBase(base) : getBaseFromDoc()
62+
return `${deconstructedValue[0] * newBase}px`
63+
}

0 commit comments

Comments
 (0)