Immutable Annotation - tomhodgins/process-css-demo GitHub Wiki

A custom annotation that can be added to the end of any property declaration to indicate that this value should be immutable, and once an immutable value is set for a certain property on a tag, it cannot be changed from other CSS or JavaScript.

<property>: <value> !--immutable;

• <property> is any CSS property name
• <value> is the value for that property

You can use immutable properties when you want to permanently set a specific property value on a tag in a way that cannot be altered again. Simple usage of the feature could look like this to permanently set the color of all <p> tags to lime:

p {
  color: lime !--immutable;
}

Immutable properties are a first-come, first-serve basis, so in the following example all of the <p> tags which gain the immutable lime value cannot be updated to red afterward. This ensures that no values coming later, even !-immutable declarations, can override the locked value for that property:

p {
  color: lime !--immutable;
}
p {
  color: red !--immutable;
}

Also, !important has no power over !--immutable, so even in this case it remains locked to the original !--immutable value:

* {
  font-family: Comic Sans !--immutable;
}
h1#specific.selector {
  font-family: Papyrus !important;
}