LESS Minified CSS and WordPress Theme CSS header

Question

I'm developing a WordPress theme, and using LESS for the CSS. LESS has many dynamic solution, and I found them helpful throughout my project. I'm using LESS, but not directly, I'm compiling the LESS file into CSS and enqueueing them (.css) into the site <head>. To compile the LESS files, I'm using WinLESS (v. 1.8.1), and it's an excellent and quick one. It has a built-in minfication technique so that with a single click I can (1) Compile the LESS file, and (2) Minify them at once. To ensure site speed I'd like to prefer the minified version of the CSS. But...

But, we all know that a WordPress theme CSS file contains the theme information at the header, like:

/*
Theme Name: my theme
Theme URI: http://www.example.com/
Description: my theme description
Author: you
Author URI: http://www.example-author.com/
Version: 1.0
*/

If I command WinLESS to compile my style.less to Compile && Minify then I get a minified version to style.css, but you know a minified CSS doesn't contain any CSS comments, so the theme information simply blown by the process. And in wp-admin/themes.php page the theme become header-less (unnamed).

I then tried something different. I made my stylesheet into two files:

style.less - contains only the header information a theme needs, nothing else
my-site.less - contains all the site CSS

I am compiling the style.css as non-minified, but the my-site.css as minified. In style.less I am including or taking all the CSS from the my-site.css with:

@import (less) 'css/my-site.css`;

So that, the minified my-site.css is completely imported to the style.css file (there would be no @import CSS parameter there). They will be included like the regular CSS codes, line-by-line, with the (less) included [details].

PROBLEMS...
That's actually the problem. Though I'm importing a minified CSS file, but the LESS @import (less) is taking the declarations as line-by-line.

Where my my-site.css is like:

*{margin:0;padding:0}html{margin:0;padding:0}

when I'm opening the style.css file it's like:

* {
  margin: 0;
  padding: 0;
}
html {
  margin: 0;
  padding: 0;
}

The importing is vanishing the minification completely.

Is there any other solution to @import CSS codes into a stylesheet being minified?

P.S.: I'm completely aware about the WP-Minify plugin (a nice one), and I don't actually want to use it on the first hand.

It it using yui-compress? Try starting the WordPress comment with /*! rather than just /*. (That's recognised by the yui minifier as a comment you specifically want to keep...) I'm hoping that'll keep the comment, but still allow WordPress to recognise it. — Matt Gibson
– Matt Gibson, Commented Dec 7, 2013 at 14:05
/*! is also recognised by LESS built-in minifier, so most likely it will do the trick. — seven-phases-max
– seven-phases-max, Commented Dec 7, 2013 at 14:13
@MattGibson: Bulls Eye! That's what that it should be. Thanks a lot. Saved a lot of trouble. Would love to mark this as an answer, if you make this as an Answer to the Question. :) Thank you with love. — Mayeenul Islam
– Mayeenul Islam, Commented Dec 7, 2013 at 14:14

Matt Gibson · Accepted Answer · 2013-12-07 14:23:12Z

6

WinLess uses the YUI compressor to do its minifying. (Well, specifically, I think WinLess uses LESS.js, which uses YUI compress.) Because of this, you can use a particular starting comment style -- /*! to hint to the minifier that the comment should be kept:

/*!
Theme Name: my theme
Theme URI: http://www.example.com/
Description: my theme description
Author: you
Author URI: http://www.example-author.com/
Version: 1.0
*/

WordPress should still recognise the block comment and use the theme information.

See the "special comments" section of the YUI compressor documentation.

edited Dec 7, 2013 at 14:23

answered Dec 7, 2013 at 14:17

Matt Gibson

38.3k10 gold badges103 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

LESS Minified CSS and WordPress Theme CSS header

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related