Important At Rule - tomhodgins/process-css-demo GitHub Wiki

@--important { <css stylesheet> }

• <css stylesheet> is 1 or more CSS rules

This custom at-rule will make all of the declarations held in top-level style rules !important, if they weren't !important already.

Example

Imagine you have input like this:

@--important {
  h1 {
    color: red;
    background-color: blue !important;
  }
  h2 {
    width: auto;
  }
}

The end result of this transformation is that the output CSS would look like this:

h1 {
  color: red !important;
  background-color: blue !important;
}
h2 {
  width: auto !important;
}