CSS Minify Problem

[Nick]

In my CSS file, I have a few rules that look like this:

#journal_posts .post_form input { 
    width: 85%;
    margin-bottom: 0.4em;
}

When Hotaru minifies the CSS, it changes

#journal_posts .post_form input

into

#journal_posts.post_form input

which changes the meaning of the rule and breaks the css.

Without hacking JSMin, is there anything we can do in CSS to prevent this?

Thanks.

[ties]

Ok just to let people help some more:
the minification (dunno if the word exists but...) is done on line 295 of /libs/IncludeCssJs.php

$sCode .= JSMin::minify(file_get_contents($sFile)); // minify files 

but i think you need to hack the JSmin, or there must be some sort of escape character
i think the error lies in the fact that its made for compressing JS so it sees

#journal_posts .post_form input

as

window .location

which will result in

window.location

and respectively

#journal_posts.post_form input

i think there are two solutions to fix this and that would be:
1 Hack the JSmin library
2 Do something like this:

#journal_posts div.post_form input

Edit: This might also work for every .post_form, but dont know how that will be compressed

#journal_posts *.post_form input

[louis]

Hey Nick,ties have you tried just adding a comma?

#journal_posts, .post_form input

I have a CSS file I tweak on my Intranet and see this comma-seperated id and class combo. Just thought I toss that in there.

[ties]

Hey Nick,ties have you tried just adding a comma?

#journal_posts, .post_form input

I have a CSS file I tweak on my Intranet and see this comma-seperated id and class combo. Just thought I toss that in there.

comma splits it, its like doing this:

#journal_posts {
    bla: blabla;
}
.post_form input {
    bla: blabla;
}

which will be applied on:
* -> #journal_posts
and seperate
* -> .post_form -> input
instead of
* -> #journal_posts -> .post_form -> input

hopes this explains CSS a little i can make an example if you like.

[louis]

#journal_posts {
    bla: blabla;
}
.post_form input {
    bla: blabla;
}

Ah'a gotcha I see now. You are right ties. I just happen to have it open whe browsing this post and see what they did there. Soory I wasn't much help.

[ties]

no problem, its good to see members contributing in any way even if its not helpfull, sorry it couldnt be smaller
it helps the community to stay alive
ah ah ah ah staying alive staying alive

[louis]

I do have a bookmark on my work PC To this CSS Tricks site maybe this may provide a tip or an alternative. Can't hurt...

[Nick]

Thanks very much for the help chaps!

I fixed it with ties suggestion to add a div before the dot:

2 Do something like this:

#journal_posts div.post_form input

Good thinking!

I wonder how many other plugins we have that suffer from the same minification problem... hmmm.... keep your eyes peeled!

[williamd]

This is actually quite interesting. Would #journal > .post_form work? That would of course target any element that's a child of #journal