luci icon indicating copy to clipboard operation
luci copied to clipboard
verified publisher icon openwrt

build: fix csstidy breaking css

Open RickLiuM2A1T90MQ-9 opened this issue 5 months ago • 7 comments

css is broken by csstidy, like 788e47034becc7806485b40dbef9774a14f8ea9d. add preserve_css to avoid this.

  • [X] This PR is not from my main or master branch :poop:, but a separate branch :white_check_mark:
  • [X] Each commit has a valid :black_nib: Signed-off-by: <[email protected]> row (via git commit --signoff)
  • [X] Each commit and PR title has a valid :memo: <package name>: title first line subject for packages
  • [ ] Incremented :up: any PKG_VERSION in the Makefile
  • [X] Tested on: x86/64, SNAPSHOT, Chrome 141.0.7390.66 :white_check_mark:
  • [ ] ( Preferred ) Mention: @ the original code author for feedback
  • [ ] ( Preferred ) Screenshot or mp4 of changes:
  • [ ] ( Optional ) Closes: e.g. openwrt/luci#issue-number
  • [ ] ( Optional ) Depends on: e.g. openwrt/packages#pr-number in sister repo
  • [X] Description: (describe the changes proposed in this PR)

RickLiuM2A1T90MQ-9 avatar Oct 10 '25 09:10 RickLiuM2A1T90MQ-9

Broken how, and where?

systemcrash avatar Oct 10 '25 11:10 systemcrash 

linux@debian:~/csstidy-cpp$ ./csstidy cascade.old.css --template=highest --remove_last_semicolon=true cascade.css

Selectors: 398 | Properties: 1232
Input size: 53.036KiB  Output size: 43.104KiB  Compression ratio: 18.73%
-----------------------------------

18: Invalid property in CSS3.0: --background-color-delta-l-sign
19: Invalid property in CSS3.0: --background-color-h
20: Invalid property in CSS3.0: --background-color-s
21: Invalid property in CSS3.0: --background-color-l
26: Invalid property in CSS3.0: --background-color-high-hsl
27: Invalid property in CSS3.0: --background-color-high
32: Invalid property in CSS3.0: --background-color-medium-hsl
33: Invalid property in CSS3.0: --background-color-medium
38: Invalid property in CSS3.0: --background-color-low-hsl
39: Invalid property in CSS3.0: --background-color-low
41: Invalid property in CSS3.0: --text-color-delta-l-sign
42: Invalid property in CSS3.0: --text-color-h
43: Invalid property in CSS3.0: --text-color-s
44: Invalid property in CSS3.0: --text-color-l
49: Invalid property in CSS3.0: --text-color-highest-hsl
50: Invalid property in CSS3.0: --text-color-highest
55: Invalid property in CSS3.0: --text-color-high-hsl
56: Invalid property in CSS3.0: --text-color-high
61: Invalid property in CSS3.0: --text-color-medium-hsl
62: Invalid property in CSS3.0: --text-color-medium
67: Invalid property in CSS3.0: --text-color-low-hsl
68: Invalid property in CSS3.0: --text-color-low
70: Invalid property in CSS3.0: --border-color-delta-l-sign
71: Invalid property in CSS3.0: --border-color-h
72: Invalid property in CSS3.0: --border-color-s
73: Invalid property in CSS3.0: --border-color-l
78: Invalid property in CSS3.0: --border-color-high-hsl
79: Invalid property in CSS3.0: --border-color-high
84: Invalid property in CSS3.0: --border-color-medium-hsl
85: Invalid property in CSS3.0: --border-color-medium
90: Invalid property in CSS3.0: --border-color-low-hsl
91: Invalid property in CSS3.0: --border-color-low
93: Invalid property in CSS3.0: --primary-color-high
94: Invalid property in CSS3.0: --primary-color-medium
95: Invalid property in CSS3.0: --primary-color-low
96: Invalid property in CSS3.0: --on-primary-color
98: Invalid property in CSS3.0: --error-color-high-rgb
99: Invalid property in CSS3.0: --error-color-high
100: Invalid property in CSS3.0: --error-color-medium
101: Invalid property in CSS3.0: --error-color-low
102: Invalid property in CSS3.0: --on-error-color
104: Invalid property in CSS3.0: --success-color-high-rgb
105: Invalid property in CSS3.0: --success-color-high
106: Invalid property in CSS3.0: --success-color-medium
107: Invalid property in CSS3.0: --success-color-low
108: Invalid property in CSS3.0: --on-success-color
110: Invalid property in CSS3.0: --warn-color-high
111: Invalid property in CSS3.0: --warn-color-medium
112: Invalid property in CSS3.0: --warn-color-low
113: Invalid property in CSS3.0: --on-warn-color
115: Invalid property in CSS3.0: --disabled-opacity
117: Invalid property in CSS3.0: color-scheme
121: Invalid property in CSS3.0: --background-color-delta-l-sign
122: Invalid property in CSS3.0: --background-color-h
123: Invalid property in CSS3.0: --background-color-s
124: Invalid property in CSS3.0: --background-color-l
125: Invalid property in CSS3.0: --text-color-delta-l-sign
126: Invalid property in CSS3.0: --text-color-h
127: Invalid property in CSS3.0: --text-color-s
128: Invalid property in CSS3.0: --text-color-l
129: Invalid property in CSS3.0: --border-color-delta-l-sign
131: Invalid property in CSS3.0: --primary-color-high
132: Invalid property in CSS3.0: --primary-color-medium
133: Invalid property in CSS3.0: --primary-color-low
135: Invalid property in CSS3.0: --error-color-high-rgb
136: Invalid property in CSS3.0: --error-color-medium
137: Invalid property in CSS3.0: --error-color-low
139: Invalid property in CSS3.0: --success-color-high-rgb
140: Invalid property in CSS3.0: --success-color-medium
141: Invalid property in CSS3.0: --success-color-low
143: Invalid property in CSS3.0: --warn-color-high
144: Invalid property in CSS3.0: --warn-color-medium
145: Invalid property in CSS3.0: --warn-color-low
146: Invalid property in CSS3.0: --on-warn-color
148: Invalid property in CSS3.0: --disabled-opacity
150: Invalid property in CSS3.0: color-scheme
158: Invalid property in CSS3.0: scroll-margin-top
212: Invalid property in CSS3.0: -ms-interpolation-mode
232: Invalid property in CSS3.0: -webkit-appearance
233: Invalid property in CSS3.0: word-break
244: Invalid property in CSS3.0: -webkit-appearance
249: Invalid property in CSS3.0: -webkit-appearance
260: Invalid property in CSS3.0: gap
278: Optimised font-weight: Changed "bold" to "700"
330: Optimised font-weight: Changed "bold" to "700"
346: Optimised font-weight: Changed "normal" to "400"
449: Optimised font-weight: Changed "normal" to "400"
464: Optimised font-weight: Changed "normal" to "400"
495: Invalid property in CSS3.0: --border-color-h
496: Invalid property in CSS3.0: --border-color-s
497: Invalid property in CSS3.0: --border-color-delta-l
498: Invalid property in CSS3.0: --border-color-l
499: Invalid property in CSS3.0: --border-color-a
500: Invalid property in CSS3.0: --border-color
537: Optimised font-weight: Changed "bold" to "700"
622: Invalid property in CSS3.0: pointer-events
624: Invalid property in CSS3.0: word-break
626: Invalid property in CSS3.0: user-select
640: Optimised font-weight: Changed "normal" to "400"
642: Invalid property in CSS3.0: pointer-events
657: Invalid property in CSS3.0: pointer-events
691: Invalid property in CSS3.0: gap
702: Invalid property in CSS3.0: -webkit-appearance
703: Invalid property in CSS3.0: appearance
722: Invalid property in CSS3.0: pointer-events
764: Invalid property in CSS3.0: --bd-color
765: Invalid property in CSS3.0: --fg-color
767: Invalid property in CSS3.0: appearance
768: Invalid property in CSS3.0: -webkit-appearance
813: Invalid property in CSS3.0: --checkmark-icon
814: Invalid property in CSS3.0: -webkit-mask
815: Invalid property in CSS3.0: mask
820: Invalid property in CSS3.0: --checkmark-icon
825: Invalid property in CSS3.0: --bd-color
826: Invalid property in CSS3.0: --fg-color
863: Invalid property in CSS3.0: --focus-color-rgb
875: Invalid property in CSS3.0: --focus-color-rgb
889: Invalid property in CSS3.0: pointer-events
897: Invalid property in CSS3.0: pointer-events
979: Optimised font-weight: Changed "normal" to "400"
1003: Optimised shorthand notation (border-width): Changed "2px 0 0 0" to "2px 0 0"
1007: Optimised shorthand notation (border-width): Changed "0 0 2px 0" to "0 0 2px"
1019: Optimised shorthand notation (margin): Changed "-5px -5px 15px -5px" to "-5px -5px 15px"
1058: Optimised color: Changed "#333333" to "#333"
1058: Optimised color: Changed "#222222" to "#222"
1180: Optimised font-weight: Changed "bold" to "700"
1182: Optimised color: Changed "#808080" to "gray"
1209: Invalid property in CSS3.0: --tab-bar-background-color
1210: Invalid property in CSS3.0: --tab-inactive-background-color-h
1211: Invalid property in CSS3.0: --tab-inactive-background-color-s
1212: Invalid property in CSS3.0: --tab-inactive-background-color-l
1213: Invalid property in CSS3.0: --tab-inactive-background-color
1214: Invalid property in CSS3.0: --tab-inactive-border-color
1215: Invalid property in CSS3.0: --tab-inactive-text-color-delta-l
1216: Invalid property in CSS3.0: --tab-inactive-text-color-l
1217: Invalid property in CSS3.0: --tab-inactive-text-color
1218: Invalid property in CSS3.0: --tab-inactive-hover-background-color
1219: Invalid property in CSS3.0: --tab-active-background-color
1220: Invalid property in CSS3.0: --tab-active-text-color
1221: Invalid property in CSS3.0: --tab-active-border-color
1239: Optimised shorthand notation (margin): Changed "4px 2px 0 2px" to "4px 2px 0"
1281: Optimised shorthand notation (padding): Changed "3px 2px 1px 2px" to "3px 2px 1px"
1294: Optimised font-weight: Changed "normal" to "400"
1298: Optimised shorthand notation (margin): Changed "-9px 0 18px 0" to "-9px 0 18px"
1401: Optimised shorthand notation (padding): Changed "1em 1em .5em 1em" to "1em 1em .5em"
1490: Invalid property in CSS3.0: --default-btn-background
1491: Invalid property in CSS3.0: --on-color
1517: Invalid property in CSS3.0: --on-color
1535: Invalid property in CSS3.0: --on-color
1543: Invalid property in CSS3.0: --on-color
1566: Invalid property in CSS3.0: --on-color
1573: Invalid property in CSS3.0: --on-color
1579: Invalid property in CSS3.0: --on-color
1586: Invalid property in CSS3.0: --on-color
1695: Invalid property in CSS3.0: pointer-events
1822: Optimised shorthand notation (margin): Changed "1.4em 0 4px 0" to "1.4em 0 4px"
1849: Invalid property in CSS3.0: pointer-events
1867: Invalid property in CSS3.0: text-wrap
1895: Optimised shorthand notation (padding): Changed "9px 14px 9px" to "9px 14px"
1900: Optimised shorthand notation (padding): Changed "7px 9px 7px" to "7px 9px"
1908: Optimised font-weight: Changed "normal" to "400"
1922: Optimised shorthand notation (padding): Changed ".5em .5em .25em .5em" to ".5em .5em .25em"
1959: Optimised font-weight: Changed "normal" to "400"
2030: Optimised font-weight: Changed "normal" to "400"
2056: Optimised font-weight: Changed "bold" to "700"
2066: Optimised font-weight: Changed "normal" to "400"
2148: Invalid property in CSS3.0: --help-icon
2158: Invalid property in CSS3.0: mask-image
2159: Invalid property in CSS3.0: mask-size
2160: Invalid property in CSS3.0: -webkit-mask-image
2161: Invalid property in CSS3.0: -webkit-mask-size
2165: Optimised color: Changed "#f00" to "red"
2175: Optimised color: Changed "#f00" to "red"
2176: Optimised font-weight: Changed "normal" to "400"
2250: Optimised font-weight: Changed "normal" to "400"
2477: Invalid property in CSS3.0: --spinner-icon
2486: Invalid property in CSS3.0: mask
2487: Invalid property in CSS3.0: -webkit-mask
2530: Optimised shorthand notation (padding): Changed "0 0 .25em 0" to "0 0 .25em"
2531: Optimised shorthand notation (margin): Changed ".25em .25em 0px .25em" to ".25em .25em 0px"
2573: Optimised shorthand notation (margin): Changed "0 -.125em .25em -.125em" to "0 -.125em .25em"
2632: Invalid property in CSS3.0: word-break
2636: Invalid property in CSS3.0: filter
2648: Invalid property in CSS3.0: stroke

-----------------------------------
CSSTidy 1.3 by Florian Schmitz 2005, 2006

new code added in https://github.com/openwrt/luci/commit/788e47034becc7806485b40dbef9774a14f8ea9d#diff-c82ac665c416f2f417fc53e801e86b777bfedc9ff5c01e427f956d0103f79f3a:

.cbi-title {
	display: flex;
}

.cbi-title div {
	margin-left: 5px;
	margin-right: auto;
	align-self: center;
}

.cbi-title [data-indicator] {
	padding: 3px 3px 2px;
	font-size: 9.75px;
	font-weight: bold;
	color: var(--text-color-high);
	text-transform: uppercase;
	white-space: nowrap;
	background-color: var(--background-color-low);
	border-radius: 3px;
	text-shadow: none;
	margin: .125em 0 .125em .4em;
}

.cbi-title [data-indicator][data-style="active"] {
	color: var(--on-primary-color);
	background-color: var(--primary-color-high);
}

.cbi-title [data-indicator][data-clickable] {
	cursor: pointer;
}

css after tidy

margin-bottom:18px;font-family:monospace}.cbi-title div{margin-left:5px;margin-right:auto;align-self:center}.cbi-section-table .tr:hover

Except .cbi-title div {}, all others are missing

After adding preserve_css:

margin-bottom:18px;font-family:monospace}.cbi-title{display:flex}.cbi-title div{margin-left:5px;margin-right:auto;align-self:center}.cbi-title [data-indicator]{padding:3px 3px 2px;font-size:9.75px;font-weight:700;color:var(--text-color-high);text-transform:uppercase;white-space:nowrap;background-color:var(--background-color-low);border-radius:3px;text-shadow:none;margin:.125em 0 .125em .4em}.cbi-title [data-indicator][data-style="active"]{color:var(--on-primary-color);background-color:var(--primary-color-high)}.cbi-title [data-indicator][data-clickable]{cursor:pointer}.cbi-section-table .tr:hover

RickLiuM2A1T90MQ-9 avatar Oct 10 '25 11:10 RickLiuM2A1T90MQ-9

webkit-appearance

I see. Thank you. It would be better to address the original CSS instead of amending csstidy parameters for many of those -moz and -webkit properties. Each of those 'invalid' properties is handled by browsers. E.g. the appearance property mentions the -moz and -webkit versions (as being old).

Some messages appear to be misleading also: 2632: Invalid property in CSS3.0: word-break this is widely available, and is anyway propagated by tidy.

css after tidy

Those properties don't disappear, they just appear elsewhere you don't expect.

new code added in 788e470#diff-c82ac665c416f2f417fc53e801e86b777bfedc9ff5c01e427f956d0103f79f3a:

Run this chunk through tidy - they all come through, just slightly modified.

systemcrash avatar Oct 10 '25 13:10 systemcrash

There is another issue. After 788e47034becc7806485b40dbef9774a14f8ea9d, without preserve_css, cascade.css after tidy will become like this: 1

Network has been reduced a lot.

With --preserve_css=true, cascade.css after tidy is the same as cascade.css without tidy, both are normal:

2

RickLiuM2A1T90MQ-9 avatar Oct 11 '25 06:10 RickLiuM2A1T90MQ-9

@systemcrash Do you have any thoughts on this issue?

RickLiuM2A1T90MQ-9 avatar Oct 12 '25 11:10 RickLiuM2A1T90MQ-9

It's not a big deal, but if we can find which properties are responsible, they can be adjusted.

systemcrash avatar Oct 12 '25 13:10 systemcrash

@AndyChiang888: Good catch about "Network has been reduced a lot.".

Neustradamus avatar Oct 20 '25 13:10 Neustradamus