Some question with Jekyll-minifier

Help
1

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

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:

/*
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:

@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 and it minifies correctly.

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

Screenshot_20211008_011329
Screenshot_20211008_0113291920×724 339 KB

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.

2

I think the problem is due to the C++ style // line comments. Technically, they are not supported by CSS:

3 Likes
3

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 didn’t mentioned anything about ignoring comments.

Other way that i’ve found on this post Minify CSS during build - #5 by tomjohnson1492 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:

uglifier_args:
    output:
      quote_keys: true
4

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.