Comments (6)
Pull request submitted.
from postcss-pxtorem.
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?
from postcss-pxtorem.
I’m happy to check that for you. I’ll review tomorrow and share the settings and version.
from postcss-pxtorem.
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?
from postcss-pxtorem.
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;
}
}```
from postcss-pxtorem.
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.
from postcss-pxtorem.
Related Issues (20)
- "rootvalue" In the case of two designs, only one parameter can be set HOT 1
- "exclude" will NOT work SOMETIMES when there are tons of files in project HOT 5
- [Bug Report: 6.0] Nested components and views may cause rootValue miscalculated (root in Once Event and decl in Declaration Event may be different) HOT 1
- a question about filePath.match(exclude) HOT 2
- How to configure Echarts to take effect?
- Can d.ts be provided to support vite2 + typescript?
- how to use it in rollup , with antd / antd-mobile integrated ? HOT 2
- Transform within default variables HOT 4
- When converting negative numbers, the number 0 needs to take units HOT 6
- The rootvalue function is not valid HOT 4
- It doesn't work when react-scripts's version is higher than or equal to 5.0.0 HOT 2
- problem in vite: isExcludeFile may not be correctly set HOT 6
- Feature request: support at-rules `@supports` and `@container` HOT 2
- some errors when px converts to rem HOT 10
- A little problem with the README.md file
- convert grid-area: 1/1/1/2 into grid-area:0.5
- Some errors happen when set exclude value to function: Range out of order in character class In regex. HOT 1
- is there a way to excluding CSS variable when transfrom px to rem? HOT 1
- (Help) Creating postcss.config.js in the root directory causes an error. HOT 2
- rootValue, How many settings are appropriate? is there a formula? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from postcss-pxtorem.