[BUG] Behavior of CSS Custom Properties

[leoj3n]

Only showing if at least one default value

If you have a scss file that results in yarn run update-components-docs generating an array like that:

[
  [
    [ '--device-phone-scale', '' ],
    [ '--device-tablet-scale', '' ],
    [ '--device-laptop-scale', '' ]
  ],
  []
]

The CSS Custom Properties will not appear on the Storybook for that component:

However, if at least one value has a default value:

[
  [
    [ '--device-phone-scale', '2' ],
    [ '--device-tablet-scale', '' ],
    [ '--device-laptop-scale', '' ]
  ],
  []
]

Then all of the CSS custom properties will appear:

Q: Is it expected behavior that CSS Custom Properties only show if at least one default is present?

This may be an upstream issue with storybook-addon-cssprops:

https://github.com/ljcl/storybook-addon-cssprops/blob/main/README.md#adding-custom-properties

Used custom variables lose initial value

If you have a scss file like that:

.sf-device {
  --device-not-used: 8px;
  --device-yes-used: 9px;

  width: var(--device-yes-used);
}

Then yarn run update-components-docs generates an array like that:

[ [ [ '--device-yes-used', '' ] ], [ [ '--device-not-used', '8px' ] ] ]

Which results in a Storybook like that:

Q: Is it expected that --device-not-used shows a default value of 8 while --device-yes-used looses the default of 9?

This behavior is because the logic in update-components-docs prefers to search for usage like var(--device-phone-scale) before declarations like --device-phone-scale:... After it finds the first usage it does not process any further matching declarations or usages.

This seems a bit counter-intuitive given the following scenario:

.sf-device {
  --device-yes-used: 9px;

  width: var(--device-yes-used);
  width: var(--device-yes-used, 7px);
}

[ [ [ '--device-yes-used', '' ] ], [] ]

Note that the 7px and 9px are ignored.

It seems the script logic could be improved if it is made clear what the preferred behavior would be. I'm not sure what would be considered ideal in this case, but always just taking the first instance of usage seems to me to be too simplistic.

Default value only taken from first encountered use

For a scss file like that:

.sf-device {
  width: var(--device-some-value);
  height: var(--device-some-value, 99px);
}

The following is generated by yarn run update-components-docs:

[ [ [ '--device-some-value', '' ] ], [] ]

However, if the scss were changed to:

.sf-device {
  width: var(--device-some-value, 99px);
  height: var(--device-some-value);
}

The result of yarn run update-components-docs is:

[ [ [ '--device-some-value', '99px' ] ], [] ]

Q: Is it expected behavior that the default value is only picked up from the initial use?

┆Issue is synchronized with this Jira Zadanie by Unito