bestvow / css-compressor

a visual studio code extension for compress css file as compact or minify format

CSS Compressor

Clean and [Compact | Minify] your CSS files .

Actually you also can Beautify your css file with option{format: 'beautify'}

Thanks

This extension completely depend on clean-css and the author is jakubpawlowicz , thanks nice man!

Screenshot tools snipaste

icon icons8

Usage

Press shortcuts shift+alt+f to format CSS file (make sure current file you edit type is css)

Options

reference for here

• default option

  {
    format: 'keep-breaks',
    compatibility: 'ie8'
  }
  

  (oh , ie8 I know !)

  result

  

• beautify output

  {
    format: 'beautify'
  }
  

  result

  

  yes , you can disabled break between two selectors see options

• with empty option will output minify css file

  { }
  

  

css-compressor's Issues

Code breaks on container queries

Code get's broken when using @container and contain

Extension causes high cpu load

• Issue Type: Performance
• Extension Name: css-compressor
• Extension Version: 0.0.2
• OS Version: Windows_NT ia32 10.0.19043
• VS Code version: 1.58.2

⚠️ Make sure to attach this file from your home-directory:
⚠️c:\Users\asus\AppData\Local\Temp\bestvow.css-compressor-unresponsive.cpuprofile.txt

Find more details here: https://github.com/microsoft/vscode/wiki/Explain-extension-causes-high-cpu-load

can't support Less

please support less and json file!thanks!!!!!

@import rule removed after formatting

Input code css
https://i.imgur.com/ZaiBvoh.png

@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap);
@import url("reset.css");
@import url("common.css");
@import "buttons.css";
@import "modals.css";
/* some comment */
@media screen and (min-width:px){
    .somerule{font-size: 11px;}
}

After formatting with any preset i got all @import, but not with fonts and @media, removed...
https://i.imgur.com/al6DgQX.png

@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap);
/* some comment */@media screen and (min-width:px){.somerule{font-size:11px}}:root{--width:calc(216px * 4);--height:calc(279px * 4)}

There is no recommendation how to resolve that through settings, but only with CLI:
--inline [rules] Enables inlining for listed sources (defaults to local)
https://github.com/clean-css/clean-css-cli?tab=readme-ov-file#cli-options

QUESTION:
So how can i include this to my settings.json?

怎么设置才能不清除注释?

原始代码:
/* row */
.row {
width: 100%;
height: 100%;
}

/* col-1 */
.col-1 {
width: 95px;
height: 100%;
float: left;
}

/* col-2 */
.col-2 {
margin: 40px 55px 40px 30px;
float: right;
}

想要的样子为:

/* row /
.row { width: 100%; height: 100%; }
/ col-1 /
.col-1 { width: 95px; height: 100%; float: left; }
/ col-2 */
.col-2 { margin: 40px 55px 40px 30px; float: right; }

怎么设置才能得到想要的结果,谢谢!