Support for parsind custom @-Rules

[vanthome]

Hi,

I'm thinking about implementing a rework plugin for conditionals, similar to this from SASS:

@if $type == ocean {
  color: blue;
} @else if $type == matador {
  color: red;
} @else if $type == monster {
  color: green;
} @else {
  color: black;
}

Obviously I would need to parse some more @-Rules.
Looking at the code, it is not possible to extend the parsed rules.
It would be nice if there were an interface for that.

[ai]

Try PostCSS it supports custom at-rules.

[vanthome]

@ai thanks it looks nice but isn't this a whole replacement for rework?! I would like to stay in the rework eco-system actually.

[joseph-jja]

I'm having an issue with grunt-colorguard, which uses colorguard, which uses rework which calls this for the parsing and I have found that css does not support @- rules :(

Doing something like

.foo.bar {
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@-webkit-keyframes secondary-circular-loader {
... more css
}
}

does not work. In fact it gives al message

Error: undefined:9060:3: missing '}'

@Keyframes erroring our with a line number and column number where the column number happens to be the @ symbol. This is valid CSS though.