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

A custom implementation of the @property at-rule on the standards track for CSS. This at-rule

@--property <dashed-ident> {
  syntax: <syntax-string>;
  inherits: <boolean>;
  initial-value: <css value>;
}

• <dashed-ident> representing the name of the custom property you're registering

• a list of properties including syntax: ;, inherits: ;, and initial-value: ;

• • syntax: ; property contains a CSS syntax string as its value, like <color> or <ident>#
• • inherits: ; accepts true or false as <ident>
• • initial-value: ; accepts a value that is valid according to the syntax string defined by the syntax property

In the following example we define a custom property and attempt to transition it, but since we haven't told the browser what type of syntax the custom property contains, it is unable to transition it as a <color> value.

:root {
  --color: red;
  background-color: var(--color);
  transition: --color 1s ease-in-out;
}
:root:hover {
  --color: lime;
}

If we were to register the --color custom property with a syntax and other information about it, then the browser would be able to transition from one <color> value to another <color> value:

CSS.registerProperty({
  name: '--color',
  syntax: '<color>',
  inherits: true,
  initialValue: 'red'
})

In the future, we'll be able to declare this from CSS using @property like this:

@property --color {
  syntax: '<color>';
  inherits: true;
  initial-value: red;
}

And this @--property custom at-rule works the same way, an at-rule with a <dashed-ident> --property instead of the <ident> property so our custom implementation will always be safely supported the same way by us, and any real @property CSS rules in the future will not be touched by this implementation if they are present:

@--property --color {
  syntax: '<color>';
  inherits: true;
  initial-value: red;
}

• Specification of @property in the CSS Properties and Values API spec
• Information about CSS.registerProperty() in JS