The existing style sheet has a lot of style duplication, specifically those styles that incorporate numbers, like show-X-secondary-axes, data-spacing-X, and datasets-spacing-X. In particular, the data/datasets rules have 20 copies each for bar/column variants, for a total of 80 style sets. The secondary axes rules have 10 copies.
For example, the 80 copies (20 bar/data + 20 bar/datasets + 20 column/data + 20 column/datasets) of the following:
.charts-css.bar.data-spacing-X tbody tr {
padding-block-start: Xpx;
padding-block-end: Xpx;
}
which are currently used like <table class="data-spacing-5"> would become:
.charts-css.bar.data-spacing tbody tr {
padding-block-start: calc(var(--data-spacing) * 1px);
padding-block-end: calc(var(--data-spacing) * 1px);
}
and used like <table class="data-spacing" style="--data-spacing:5">.
A similar process applies to secondary axes which would change from <table class="show-5-secondary-axes"> to <table class="show-secondary-axes" style="--secondary-axes:5">.
The changes result in a 37% reduction in the size the minified CSS from 60113 bytes to 37981 bytes. It works well in my testing so far.
Apart from the size reduction, another benefit is that there is no longer a limitation of 1...10 secondary axes or 1...20px spacing - both become effectively unlimited.
The drawback is that the changes are not backward compatible.
Is there any interest in this sort of change?
The existing style sheet has a lot of style duplication, specifically those styles that incorporate numbers, like
show-X-secondary-axes,data-spacing-X, anddatasets-spacing-X. In particular, the data/datasets rules have 20 copies each for bar/column variants, for a total of 80 style sets. The secondary axes rules have 10 copies.For example, the 80 copies (20 bar/data + 20 bar/datasets + 20 column/data + 20 column/datasets) of the following:
which are currently used like
<table class="data-spacing-5">would become:and used like
<table class="data-spacing" style="--data-spacing:5">.A similar process applies to secondary axes which would change from
<table class="show-5-secondary-axes">to<table class="show-secondary-axes" style="--secondary-axes:5">.The changes result in a 37% reduction in the size the minified CSS from 60113 bytes to 37981 bytes. It works well in my testing so far.
Apart from the size reduction, another benefit is that there is no longer a limitation of 1...10 secondary axes or 1...20px spacing - both become effectively unlimited.
The drawback is that the changes are not backward compatible.
Is there any interest in this sort of change?