let's go back to original way to write our css
https://marketplace.visualstudio.com/items?itemName=jsonchou.css-compact&ssr=false
-
compact css file with shift+alt+f key
-
only format *.css files
-
remove tab、\r\n(check os)
-
keep custom blank lines
-
add wechat mini program wxss format
- common style formatter
.btn {
border:1px solid black;
background:#fff;
border-radius:5px;
color:#000;
}
.btn:hover,
.btn:focus {
background:#000;
color:#fff;
}
.base64 {
margin-right: 10px;
padding-top: 10px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUh);
}
/**my empty row for comment**/
.model-b{margin-right:10px;}
.model-b-list{margin-right:10px;}
.test:nth-child(2n) {
margin-right: 10px;
}
.test:nth-child(2n+1) {
margin-right: 10px;
}
.test:nth-of-type(2n) {
margin-right: 10px;
}.btn { border:1px solid black; background:#fff; border-radius:5px; color:#000; }
.btn:hover,
.btn:focus { background:#000; color:#fff; }
.base64 { margin-right: 10px; padding-top: 10px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUh); }
/**my empty row for comment**/
.model-b { margin-right:10px; }
.model-b-list { margin-right:10px; }
.test:nth-child(2n) { margin-right: 10px; }
.test:nth-child(2n+1) { margin-right: 10px; }
.test:nth-of-type(2n) { margin-right: 10px; } - midea query(@media) formatter
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.page-number {
font-size: 12px;
}
.test {
margin-right: 100px;
}
}@media only screen and (min-device-width: 320px) and (max-device-width: 480px){
.page-number { font-size: 12px; }
.test { margin-right: 100px; }
}- animation(@keyframes) formatter
@keyframes ani-rotate {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes ani-floweres-r {
0% {
transform: rotate(10deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(10deg);
}
}@keyframes ani-rotate {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes ani-floweres-r {
0% { transform: rotate(10deg); }
50% { transform: rotate(0deg); }
100% { transform: rotate(10deg); }
}Init package
Add feature(add wxss format)
Fix bugs(base64、nth-child、nth-of-type)
Fix animation(keyframes of %)
Fix Markdown description
Fix animation(keyframes of from & to) & media query formatter
Fix shortcut key collision with shift+alt+f
Fix package.json description & version
Initial release of cssCompact
Note:
- 1、if you can not format your .css/.wxss files, may be you can exchange LF with CRLF.
- 2、leave a blank before '}' to make your emmet effective and format your code.
Enjoy!