Space missing after font-size: when not replacing
Closed this issue · 6 comments
jdelia commented
When the option replace: false is used - there is a space missing after the colon.
font-size: 18px;
font-size:1.8rem;
Suggestion: replace line 32 of index.js with
var pxReplace = createPxReplace(opts.rootValue, opts.unitPrecision, opts.minPixelValue, opts.replace);
replace function on line 89 with this:
function createPxReplace(rootValue, unitPrecision, minPixelValue, pxReplace) {
return function(m, $1) {
if (!$1) return m;
var pixels = parseFloat($1);
if (pixels < minPixelValue) return m;
var fixedVal = toFixed((pixels / rootValue), unitPrecision);
if (pxReplace) {
return (fixedVal === 0) ? '0' : fixedVal + 'rem';
} else {
return (fixedVal === 0) ? '0' : ' ' + fixedVal + 'rem';
}
};
}
jdelia commented
Pull request submitted.
cuth commented
This is interesting. Thank you for submitting the issue and the pull request! I'm kinda surprised to see this because it isn't happening in the test example. Could it be the case with another option you are using or the version of PostCSS you are using?
jdelia commented
I’m happy to check that for you. I’ll review tomorrow and share the settings and version.
jdelia commented
Thank you for sharing the test example. I ran some configurations and have found a possible cause. When I add the normalize.css block and have it minified - the rem is formatted improperly. When I remove the normalize.css or uncompress it and run the test again - it formats fine.
--------------------------------------------- */
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}
/* ## Box Sizing
--------------------------------------------- */
html,
input[type="search"] {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/* ## Float Clearing
--------------------------------------------- */
.author-box::before,
.clearfix::before,
.entry::before,
.entry-content::before,
.footer-widgets::before,
.nav-primary::before,
.nav-secondary::before,
.pagination::before,
.site-container::before,
.site-footer::before,
.site-header::before,
.site-inner::before,
.widget::before,
.wrap::before {
content: " ";
display: table;
}
.author-box::after,
.clearfix::after,
.entry::after,
.entry-content::after,
.footer-widgets::after,
.nav-primary::after,
.nav-secondary::after,
.pagination::after,
.site-container::after,
.site-footer::after,
.site-header::after,
.site-inner::after,
.widget::after,
.wrap::after {
clear: both;
content: " ";
display: table;
}
html {
font-size: 62.5%; /* 10px browser default */
}
/* Chrome fix */
body > div {
font-size: 20px;
font-size: 2rem;
}
.class {
margin: -10px .5em;
padding: 5rem .5px;
border: 3px solid black;
font-size: 14px;
font-size:1.4rem;
line-height: 20px;
}
.class2 {
font-size: 32px;
font-size:3.2rem;
font-size: 2rem;
line-height: 1em;
}
@media (min-width: 750px) {
.class3 {
font-size: 16px;
font-size:1.6rem;
line-height: 22px;
}
}
So it appears that my pull request is only helpful if adding normalize.css compressed to the file to process. I've tested a few versions of normalize.css compressed with the same result. Perhaps a value is being stored without a space as it processes the normalize.css compressed and then uses that for all?
jdelia commented
After further checking it appears that if the first lines of the css file are compressed (as in the normalize.css) then the issue occurs. If I add anything above the normalize.css that is not compressed and run it - it works fine. So my fix for right now is to just add a few lines of css above the normalize.css block.
--------------------------------------------- */
html,
input[type="search"] {
box-sizing: border-box;
}
/* normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}
/* ## Box Sizing
--------------------------------------------- */
html,
input[type="search"] {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/* ## Float Clearing
--------------------------------------------- */
.author-box::before,
.clearfix::before,
.entry::before,
.entry-content::before,
.footer-widgets::before,
.nav-primary::before,
.nav-secondary::before,
.pagination::before,
.site-container::before,
.site-footer::before,
.site-header::before,
.site-inner::before,
.widget::before,
.wrap::before {
content: " ";
display: table;
}
.author-box::after,
.clearfix::after,
.entry::after,
.entry-content::after,
.footer-widgets::after,
.nav-primary::after,
.nav-secondary::after,
.pagination::after,
.site-container::after,
.site-footer::after,
.site-header::after,
.site-inner::after,
.widget::after,
.wrap::after {
clear: both;
content: " ";
display: table;
}
html {
font-size: 62.5%; /* 10px browser default */
}
/* Chrome fix */
body > div {
font-size: 20px;
font-size: 2rem;
}
.class {
margin: -10px .5em;
padding: 5rem .5px;
border: 3px solid black;
font-size: 14px;
font-size: 1.4rem;
line-height: 20px;
line-height: 2rem;
}
.class2 {
font-size: 32px;
font-size: 3.2rem;
font-size: 2rem;
line-height: 1em;
}
@media (min-width: 750px) {
.class3 {
font-size: 16px;
font-size: 1.6rem;
line-height: 22px;
line-height: 2.2rem;
}
}
/*
.class {
font-size: 16px;
}
*/
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}
.class {
margin: -10px .5em;
padding: 5rem .5px;
border: 3px solid black;
font-size: 14px;
font-size: 1.4rem;
line-height: 20px;
line-height: 2rem;
}
.class2 {
font-size: 32px;
font-size: 3.2rem;
font-size: 2rem;
line-height: 1em;
}
@media (min-width: 750px) {
.class3 {
font-size: 16px;
font-size: 1.6rem;
line-height: 22px;
line-height: 2.2rem;
}
}```
cuth commented
Thanks for looking into this @jdelia! I'm going to close this for now since it seems PostCSS just uses the first example it sees in a file to know whether to add a space after the semi-colon or not. If any change needs to happen, it seems like it would happen on the PostCSS app rather than this plugin.