Commitcde50a54Recorded19 Feb 2026Repositorysigil-web-demo

feat: Add css-sel for compound selectors, eliminate css-raw from demo

Message

Add css-sel function to join multiple selectors with ", " for shared properties. Update css macro to correctly apply & suffixes to each part of compound selectors via %css-sel-append. Replace all 7 css-raw calls in the demo with proper DSL: css-sel for selector lists, & for pseudo- elements, and unquoted attribute selectors.

Changed
 src/sigil/web/demo/views.sgl | 55 +++++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 47 insertions(+), 8 deletions(-)
Diff
src/sigil/web/demo/views.sglmodified
@@ -167,8 +167,9 @@
167
(top "50%")
168
(left "50%")
169
(transform "translate(-50%, -50%)")
−170
(box-shadow "0 20px 60px rgba(0, 0, 0, 0.3)"))
−171
(css-raw "dialog::backdrop { background: rgba(0, 0, 0, 0.5); }")
+170
(box-shadow "0 20px 60px rgba(0, 0, 0, 0.3)")
+171
(& "::backdrop"
+172
(background "rgba(0, 0, 0, 0.5)")))
173
(css "dialog h2"
174
(margin "0 0 1rem"))
175
(css ".modal-actions"
@@ -219,7 +220,13 @@
220
(gap "0.25rem")
221
(flex-wrap "wrap")
222
(align-items "center"))
−222
(css-raw ".sg-paginator li a, .sg-paginator li span { display: inline-block; padding: 0.4rem 0.75rem; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 0.9rem; text-decoration: none; }")
+223
(css (css-sel ".sg-paginator li a" ".sg-paginator li span")
+224
(display "inline-block")
+225
(padding "0.4rem 0.75rem")
+226
(border "1px solid #e2e8f0")
+227
(border-radius "4px")
+228
(font-size "0.9rem")
+229
(text-decoration "none"))
230
(css ".sg-paginator li a:hover"
231
(background "#f1f5f9")
232
(text-decoration "none"))
@@ -234,8 +241,21 @@
241
(border-color "#f1f5f9"))
242
243
;; Buttons
−237
(css-raw ".btn, button[type=\"submit\"] { display: inline-block; padding: 0.5rem 1.25rem; background: #2563eb; color: #fff; border: none; border-radius: 4px; font-size: 0.9rem; cursor: pointer; text-decoration: none; line-height: 1.5; }")
−238
(css-raw ".btn:hover, button[type=\"submit\"]:hover { background: #1d4ed8; text-decoration: none; color: #fff; }")
+244
(css (css-sel ".btn" "button[type=submit]")
+245
(display "inline-block")
+246
(padding "0.5rem 1.25rem")
+247
(background "#2563eb")
+248
(color "#fff")
+249
(border "none")
+250
(border-radius "4px")
+251
(font-size "0.9rem")
+252
(cursor "pointer")
+253
(text-decoration "none")
+254
(line-height "1.5")
+255
(& ":hover"
+256
(background "#1d4ed8")
+257
(text-decoration "none")
+258
(color "#fff")))
259
(css ".btn-small"
260
(padding "0.25rem 0.75rem")
261
(font-size "0.8rem"))
@@ -253,14 +273,33 @@
273
(margin-bottom "0.25rem")
274
(font-size "0.9rem")
275
(color "#374151"))
−256
(css-raw ".form-fields input[type=\"text\"], .form-fields input[type=\"email\"], .form-fields input[type=\"password\"], .form-fields select, .form-fields textarea { display: block; width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.95rem; font-family: inherit; line-height: 1.5; background: #fff; }")
−257
(css-raw ".form-fields input:focus, .form-fields select:focus, .form-fields textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }")
+276
(css (css-sel ".form-fields input[type=text]"
+277
".form-fields input[type=email]"
+278
".form-fields input[type=password]"
+279
".form-fields select"
+280
".form-fields textarea")
+281
(display "block")
+282
(width "100%")
+283
(padding "0.5rem 0.75rem")
+284
(border "1px solid #d1d5db")
+285
(border-radius "4px")
+286
(font-size "0.95rem")
+287
(font-family "inherit")
+288
(line-height "1.5")
+289
(background "#fff"))
+290
(css (css-sel ".form-fields input:focus"
+291
".form-fields select:focus"
+292
".form-fields textarea:focus")
+293
(outline "none")
+294
(border-color "#2563eb")
+295
(box-shadow "0 0 0 3px rgba(37, 99, 235, 0.1)"))
296
(css ".field-error"
297
(color "#dc2626")
298
(font-size "0.8rem")
299
(margin-top "0.25rem")
300
(display "block"))
−263
(css-raw "button[type=\"submit\"] { margin-top: 1rem; }")
+301
(css "button[type=submit]"
+302
(margin-top "1rem"))
303
(css ".search-form"
304
(display "flex")
305
(gap "0.5rem")