# Some question with Jekyll-minifier

**URL:** <https://talk.jekyllrb.com/t/some-question-with-jekyll-minifier/6546>\
**Category:** Help\
**Created:** [October 8, 2021, 7:20am UTC](https://talk.jekyllrb.com/t/some-question-with-jekyll-minifier/6546 "2021-10-08T07:20:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![lewatoto](https://avatars.discourse-cdn.com/v4/letter/l/4bbf92/32.png) [@lewatoto](https://talk.jekyllrb.com/u/lewatoto)\
**Post date:** [October 8, 2021, 7:20am UTC](https://talk.jekyllrb.com/t/some-question-with-jekyll-minifier/6546/1 "2021-10-08T07:20:51Z")

</div>

Hello there is a place where the options of config this plugin are more explained that in the repo and the repos of the dependencies?

Mi config for jekyll-minifier

```auto
jekyll-minifier:
  exclude: ["feed.xml","robots.txt","sitemap.xml","assets/css/pagination.css", "assets/js/idx_bus.js"]
  preserve_php: true # Default: false
  remove_spaces_inside_tags: true # Default: true
  remove_multi_spaces: true # Default: true
  remove_comments: true # Default: true
  remove_intertag_spaces: true # Default: false
  remove_quotes: false # Default: false
  compress_css: true # Default: true
  compress_javascript: true # Default: true
  compress_json: true # Default: true
  simple_doctype: false # Default: false
  remove_script_attributes: false # Default: false
  remove_style_attributes: false # Default: false
  remove_link_attributes: false # Default: false
  remove_form_attributes: false # Default: false
  remove_input_attributes: false # Default: false
  remove_javascript_protocol: false # Default: false
  remove_http_protocol: false # Default: false
  remove_https_protocol: false # Default: false
  preserve_line_breaks: false # Default: false
  simple_boolean_attributes: false # Default: false
  compress_js_templates: ["application/ld+json"] # Default: false
# preserve_patterns: # Default: (empty)
  uglifier_args:
    harmony: true
    mangle: false
    compress: false

```

for example i have this css code:

```css
/*
Agregando fuentes externas para tener coherencia entre la fuente del titulo
y las demás cosas.
*/
@font-face {
    font-family: 'diner-obeseregular';
    src: url('Diner-Obese-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*
@font-face {
    font-family: 'oswald-extralight';
    src: url('oswald-extralight-webfont.woff2') format('woff2'),
         url('oswald-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'oswald-light';
    src: url('oswald-light-webfont.woff2') format('woff2'),
         url('oswald-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
*/
@font-face {
    font-family: 'oswald-regular';
    src: url('oswald-regular-webfont.woff2') format('woff2'),
         url('oswald-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*
@font-face {
    font-family: 'oswald-medium';
    src: url('oswald-medium-webfont.woff2') format('woff2'),
         url('oswald-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'oswald-demibold';
    src: url('oswald-demibold-webfont.woff2') format('woff2'),
         url('oswald-demibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'oswald-bold';
    src: url('oswald-bold-webfont.woff2') format('woff2'),
         url('oswald-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'oswald-heavy';
    src: url('oswald-heavy-webfont.woff2') format('woff2'),
         url('oswald-heavy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
*/

/*
Evita que existan scrollbars en los resultados de la busqueda
https://github.com/jgthms/bulma/issues/2578
*/
.media-content{
  overflow-x: visible;
}

.is-borderless { border: 0 !important}

.is-family-dinner-obeseregular {
  font-family: diner-obeseregular !important;
  //font-size: 1.5em;
  letter-spacing: 0.1em;
}
/*
.is-family-oswald-extralight {
  font-family: oswald-extralight !important;
  //font-size: 2em;
  letter-spacing: 0.1em;
}

.is-family-oswald-light {
  font-family: oswald-light !important;
  //font-size: 2em;
  letter-spacing: 0.1em;
}
*/
.is-family-oswald-regular {
  font-family: oswald-regular !important;
  //font-size: 2em;
  letter-spacing: 0.1em;
}
/*
.is-family-oswald-medium {
  font-family: oswald-medium !important;
  //font-size: 2em;
  letter-spacing: 0.1em;
}

.is-family-oswald-demibold {
  font-family: oswald-demibold !important;
  //font-size: 2em;
  letter-spacing: 0.1em;
}

.is-family-oswald-bold {
  font-family: oswald-bold !important;
  //font-size: 2em;
  letter-spacing: 0.1em;
}

.is-family-oswald-heavy {
  font-family: oswald-heavy !important;
  //font-size: 2em;
  letter-spacing: 0.1em;
}
*/

figure.highlight {
  margin: 0em 0em 1em 0em !important;
  text-align: left;
}

pre.lineno{
  text-align: right;
  color: rgb(245,245,245);
  border-right: 0.1em solid rgb(245, 245, 245) ;
  padding: 0 0.5em 0 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

figure.highlight pre{
  padding: 1em 0.5em 1em 0.5em !important;
}

td.code pre{
  padding: 0 0 0 0.5em;
}

tr td.gutter.gl, td.code {
  padding: 0 !important;
}

td.rouge-code pre {
  padding: 0;
}

td.rouge-code{
  padding-left: 0 !important;
}

div.highlight pre.highlight{
  padding:0.5em 0 0.5em 0;
}

div.highlighter-rouge div.highlight{
  margin-bottom: 1em;
}

tr td.rouge-gutter, td.gutter.gl{
  width: 1%;
}

/*
Configuracion de estilos para los modales de permisos
*/
div.klaro.cm-as-context-notice{
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  height: 50%;
}

figure.image.mb-0.is-16by9 div{
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.subir{
  position: fixed;
  bottom: 5%;
  right: 5%;
  z-index: 50;
  box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
}

/*
Hace que el índice se mantuviera stick pero genera muchos problemas
.indice{
  position: -webkit-sticky;
  position: sticky;
  top: 2vh;
  z-index: 20;
}
*/

details summary {
  border-radius: 4px 4px 4px 4px !important;
}

details[open] summary {
  border-radius: 4px 4px 0px 0px !important;
}

/*
MArgen para las anchor cuando haces scroll
https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/
*/

html{
  scroll-padding-top: 4em;
}

.menu-list li.is-active a{
  background-color: #485fc7;
  color: #fff !important;
}

.menu-list li a:hover{
  background-color: #485fc7;
  color: #fff !important;
}

#toc_menu, #toc_menu > li > ul{
  list-style: none;
}

details.message a{
  text-decoration: none !important;
}

.sombra{
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
}

.language-text{
  color: rgb(219, 219, 219);
}

pre > code {
  color: rgb(219, 219, 219);
}

```

But on the minified version more than the half of my styles is commented:

```css
@font-face {
    font-family: 'diner-obeseregular';
    src: url('Diner-Obese-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'oswald-regular';
    src: url('oswald-regular-webfont.woff2') format('woff2'),url('oswald-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.media-content {
    overflow-x: visible;
}
.is-borderless {
    border: 0!important;
}
.is-family-dinner-obeseregular {
    font-family: diner-obeseregular!important; 
/ ********************************

 From here all is commented

********************************* /
font-size;
1.5em:font-size;
0.1em:letter-spacing
}
.is-family-oswald-regular {
font-family: oswald-regular!important;
font-size: 2em;
letter-spacing: 0.1em;
}
figure.highlight {
margin: 0 0 1em 0!important !important;
text-align: left;
}
pre.lineno {
text-align: right;
color: #f5f5f5;
border-right: 0.1em solid #f5f5f5;
padding: 0 0.5em 0 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
figure.highlight pre {
padding: 1em 0.5em 1em 0.5em!important !important;
}
td.code pre {
padding: 0 0 0 0.5em;
}
td.code,
tr td.gutter.gl {
padding: 0!important !important;
}
td.rouge-code pre {
padding: 0;
}
td.rouge-code {
padding-left: 0!important;
}
div.highlight pre.highlight {
padding: 0.5em 0;
}
div.highlighter-rouge div.highlight {
margin-bottom: 1em;
}
td.gutter.gl,
tr td.rouge-gutter {
width: 1%;
}
div.klaro.cm-as-context-notice {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
height: 50%;
}
figure.image.mb-0.is-16by9 div {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.subir {
position: fixed;
bottom: 5%;
right: 5%;
z-index: 50;
box-shadow: 0 0.5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
}
details summary {
border-radius: 4px 4px 4px 4px!important;
}
details[open] summary {
border-radius: 4px 4px 0 0!important;
}
html {
scroll-padding-top: 4em;
}
.menu-list li.is-active a {
background-color: #485fc7;
color: #fff!important;
}
.menu-list li a:hover {
background-color: #485fc7;
color: #fff!important;
}
#toc_menu,
#toc_menu > li > ul {
list-style: none;
}
details.message a {
text-decoration: none!important;
}
.sombra {
box-shadow: 0 0.5em 1em -0.125em rgba(10,10,10,0.1),0 0 0 1px rgba(10,10,10,0.02);
}
.language-text {
color: #dbdbdb;
}
pre > code {
color: #dbdbdb;
}

```

Already try to use another css minifer like this of duckduckgo [css minify at DuckDuckGo](https://duckduckgo.com/?q=css+minify&t=ffab&ia=answer) and it minifies correctly.

Picture of the differences on minified css of jekyll-minifier and Duckduckgo

 ![Screenshot_20211008_011329](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/8/8c05e22a939ef6a30ed0e30d5b9ed292d6856386.png)

Maybe my css is bad? did I follow bad practices? should i change to sass and use the compressed option? should i change of plugin if so wich one do you recommend? or should i minify "manually’ the files (html, js, css) before push to my github repo if so which minifiers do you recommend? any help is appreciated.

---

<div class="post-metadata">

**Author:** ![chuckhoupt](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/chuckhoupt/32/523_2.png) [@chuckhoupt](https://talk.jekyllrb.com/u/chuckhoupt)\
**Post date:** [October 8, 2021, 11:56am UTC](https://talk.jekyllrb.com/t/some-question-with-jekyll-minifier/6546/2 "2021-10-08T11:56:43Z")

</div>

I think the problem is due to the C++ style `//` line comments. Technically, they are [not supported by CSS](https://stackoverflow.com/a/51843858):

> [@lewatoto](#):
>
> ```auto
> //font-size: 1.5em;
> 
> ```

---

<div class="post-metadata">

**Author:** ![lewatoto](https://avatars.discourse-cdn.com/v4/letter/l/4bbf92/32.png) [@lewatoto](https://talk.jekyllrb.com/u/lewatoto)\
**Post date:** [October 9, 2021, 1:15am UTC](https://talk.jekyllrb.com/t/some-question-with-jekyll-minifier/6546/3 "2021-10-09T01:15:14Z")

</div>

Wow many thanks, that works just another question on the sass generation of one file it includes a map, but the minifier removes the comment with the map info, there is a way to prevent this? maybe using preserve\_patterns with something like `/\/\*#.*?\.css.map.\*\//im` or this is only for html?

Since on the repo of [GitHub - digitalsparky/cssminify: CSS minification with YUI compressor, but as native Ruby port](https://github.com/digitalsparky/cssminify) didn’t mentioned anything about ignoring comments.

Other way that i’ve found on this post [Minify CSS during build - #5 by tomjohnson1492](https://talk.jekyllrb.com/t/minify-css-during-build/154/5) is disabling css minifying on the plugin and rename files from `.css` to `.scss`.to use `sass:` `style: compressed` option.

And the last thing if you have some json data on your js files and the minifier removes quotes from keys, add this to the `uglifier_args` to preserve the quotes:

```auto
uglifier_args:
    output:
      quote_keys: true

```

---

<div class="post-metadata">

**Author:** ![chuckhoupt](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/chuckhoupt/32/523_2.png) [@chuckhoupt](https://talk.jekyllrb.com/u/chuckhoupt)\
**Post date:** [October 9, 2021, 12:54pm UTC](https://talk.jekyllrb.com/t/some-question-with-jekyll-minifier/6546/4 "2021-10-09T12:54:27Z")

</div>

I’m afraid I’m not a jekyll-minifier expert, so I don’t know how best to handle maps. Maybe others can help (but it may just be the two of us here)? If you really get it a jam, you may need to create a new post for the new question so a wider audience sees it.