postcss / postcss-custom-properties

Use Custom Properties in CSS
https://postcss.github.io/postcss-custom-properties
MIT License
596 stars 77 forks source link

css extension draft is mentioning a possible different custom properties syntax #33

Closed MoOx closed 6 years ago

MoOx commented 9 years ago

We should follow this http://dev.w3.org/csswg/css-extensions/#custom-property

Need to more fully support Custom Properties (and eventually remove them from the variable spec entirely, since they’ll be defined here).

By default, custom properties are optimized for use as var() values—they inherit, have an empty initial value, don’t do any syntax checking, and don’t animate. All of these should be adjustable somehow.

    @custom-property --foo {
      scope: [ inherit | local ];
      initial: <any-value>*;
      value: <length> <length> <color>;
      /* Literally, define a simplistic definition syntax.
         OR FULL CSS PROPERTY GRAMMAR?!? */
    }

If you provide a "value" field with animatable types, we can animate in the most direct fashion automatically. We could also let you hook into that: you register a callback, and whenever a property starts animating, we call it with the starting and ending values. You have to return a function which takes a progress value (between 0 and 1) and returns a value for your property; we’ll call it as we animate the value. (How can we hook into Web Anim here? Can you just return an Animation object?)

Do we need a hook for computed values? Interesting. We could just hand your callback a set of property values for the element and its parent (maybe siblings, if you ask for it?), and you can return a new value for the property. This is probably an advanced feature for a later date.

Definitely need a way to listen for elements receiving and changing property values, so you can efficiently polyfill things and make your own properties. Unsure how it would look at the moment.

jonathantneal commented 6 years ago

There seems to have been no interest in this in the last ~3 years, so I will be closing this issue.