Support CSS custom properties (variables)

[MurakamiShinyu]

CSS Custom Properties for Cascading Variables Module Level 1
https://drafts.csswg.org/css-variables/

[spring-raining]

If this feature can be realized, it will be a powerful way to customize Vivliostyle themes. I'm looking forward to the addition of this feature:)

[depth42]

I am also voting for this feature. CSS variables are a great way to reduce redundancy in CSS sheets.

[MurakamiShinyu]

Now Vivliostyle.js (v2.17.0) supports CSS Custom Properties for Cascading Variables Module Level 1.

CSS variables can be used within any style rules, also can be used in @page {…} context. See the following simple example:

:root {
  --page-width: 148mm;
  --page-height: 210mm;
  --page-margin: 20mm;
  --page-header: "My Report";
  --page-footer: counter(page) " / " counter(pages);
}
@page {
  size: var(--page-width) var(--page-height);
  margin: var(--page-margin);
  @top-center {
    content: var(--page-header); 
  }
  @bottom-center {
    content: var(--page-footer); 
  }
}

[depth42]

Great! Are fallback values also supported, like in: var(--my-color, blue)

[MurakamiShinyu]

Are fallback values also supported, like in: var(--my-color, blue)

Yes, the whole https://www.w3.org/TR/css-variables-1/ spec is supported.