search

less / less.ruby

Less Ruby — now at http://github.com/cowboyd/less.rb
Apache License 2.0
957 stars 69 forks source link

Option to perserve select comments (i.e. the WordPress style.css theme metadata) #112

Open westonruter opened 14 years ago

westonruter commented 14 years ago

I can't seem to find a built-in way to preserve certain comments so that they'll be included in the output. This is vital for WordPress which stores theme metadata at the top of style.css. If I have a style.less which automatically gets compiled to style.css, the header comment block is lost, and the WordPress theme is broken.

westonruter commented 14 years ago

Here's a WordPress filter to get LESS to automatically rebuild a theme's .css files when their corresponding .less files change: http://gist.github.com/230197

bitsandbooks commented 14 years ago

I came here to post this exact issue. I'd rather keep my development as simple as possible, so I think there is a case to be made for a built-in function aimed at preserving things that I'd like to see preserved. (I also kind of think that a CSS file with no comments looks ugly and maybe even a bit amateurish.)

Your solution isn't bad, westonruter, but I would like to see a built-in "ignore this" syntax included in LESS, anyway (or LESS.js, since that's where development is going). While your filter works, it leaves those who aren't on Wordpress without any recourse other than copying and pasting their comments into their .css file. That's needless work, which is exactly what a tool like LESS was created to avoid.

If I may suggest a simple method, LESS/LESS.js could include a rule which looks for something like this:

/* @ignore open */
The commented lines above and below this block would be removed 
at compile time, but everything here (including valid CSS slash-star
comments) would be left as-is when the .less file is compiled 
into a .css one. 
/* @ignore close */

I like this syntax because it's simple, readable and easy to search for in a .less file. What's more, since the @ignore open and @ignore close commands are enclosed in a CSS style comment, it still leaves the developer free to create an @ignore variable if she wishes. It would also solve problems like the @charset and @media ones we run into when dealing with LESS. (I also understand LESS.js will include @charset support, for which I am certainly grateful to Cloudhead and Dmitry.)

Of course, this means that anything in the brackets cannot contain LESS syntax (variables, nesting, mixins, operations, double-slash comments, etc.), but I rather think that's the point, isn't it? If I want to include Wordpress theme info, an "ignore this" syntax such as the one I have suggested would allow just that.

In fact, to use this as a jumping-off point, it makes me think that we could include another, similar command in LESS:

/* @output "../style.css" */

This would allow developers to specify where they want their .css file to end up. For example, if I'm developing a Wordpress theme, I could use @output to keep my .less file in a "source" folder where other things like my Photoshop PSDs and rough templates are, so that when I'm ready to package and distribute the theme, all I need to do is make sure that the "source" folder isn't inside the theme's folder. This promotes separation of output and source files (a good habit in which to get).

Oh, and lest anyone think differently: I'm not married to this syntax or anything; it's just a suggestion. If anyone has a better idea, I'm certainly interested.