Merge multiple css rules of a class into a single class declaration? - css

Question

I like it to separate different concerns of a class in css.
Example:
// Layout
.myElement {
width: 100px;
height: 100px;
margin: 10px;
padding: 5px;
}
// Chrome
.myElement {
background: red;
border: 2px solid green;
box-shadow: inset 0 0 10px black;
}
// Content
.myElement {
color: white;
font-size: 120%;
}
// Interaction
.myElement:hover {
background: black;
border: 10px dotted red;
}
Pretty fine so far. Personally I find that approach readable, nice to maintain and nice for development.
But is there any mechanism/tool available which would merge all rules of a class into one single class declaration before deployment automatically?
Desired result:
.myElement {
width: 100px;
height: 100px;
margin: 10px;
padding: 5px;
background: red;
border: 2px solid green;
box-shadow: inset 0 0 10px black;
color: white;
font-size: 120%;
}
.myElement:hover {
background: black;
border: 10px dotted red;
}
EDIT:
After reading the comments I felt my "artificial" example wasn't comprehensive enough. Below is a real world example written in the Stylus syntax but the results are the same as described above. I left the original example from above in place.
The next example exists as a single file which describes the appereance of a certain area and its contents which appears in various places on a site. It's like a microcosm for that area. As a consequence you can imagine there are more of these microcosms.
// Layout
.events
padding 2em
.eventItem
margin 0 0 4em
.eventCal
float left
padding 2.5em 0 0
.eventArticle
margin 0 0 0 6em
.eventHead
margin 0 0 1em
time
margin 0 2em 0 0
// Chrome
.eventCal
background url("../../assets/img/icon-events.png") no-repeat
.eventHead
border-bottom .5em solid $chimney
// Content
.eventItem
list-style-type none
a
color $beige
text-decoration none
h2
font-family $elsie
.eventCal
color $beige
font-family $elsie
font-weight bold
font-size 150%
.eventHead
font-size 75%
.eventDesc
font-size 90%
// Interaction
.eventItem
a:hover
color $chimney
text-decoration underline

Answer 1

My computer is sorta nagging me to reboot after a few straight days of coding , but basically I do stuff like that fairly regularly in my libraries. Basically what you can do to quickly mimmick this functionality is to grab one of the zillion coding examples for enumerating the CSSrules from the sheets.
Then in the enumeration function simply take the selectorText property and drop it into document.querySelector/querySelectorAll which will give you the elements matching the selectorText toss these , the selectorText and related cssText into a little {}/[] or whatever suits your fancy.
After the enumeration finishes do a document.createElement('style') and use the insertRule() to glue the styles together as you please.
Then simply grab the finished product from style.textContent and you have your merged stylesheet.
Being as the commonly available code for enumeration does the actual hard part , this is a nice lazy evenings coding task for most folks and it will do the job EXACTLY the way YOU want.