A calm place to write long-form, and publish it to the open social web.
skypress.blog/
Fix publish pill losing its styling to a premature CSS comment close
A `*/` inside the comment above `.studio__published` (in `--sun*/--ink`)
closed the comment early, so the trailing prose plus the selector collapsed
into one invalid rule that every CSS parser discards. The publish notice
rendered as an unstyled full-width paragraph instead of the centred sunrise
pill. Reword the comment to drop the literal `*/`.
Add a PostCSS-based regression test that asserts the rule survives parsing.
author
Jeremy Herve
date
(Jun 11, 2026, 8:37 AM +0200)
commit
27ac61d1
27ac61d1f0d9224ea0d808102ee8d9b68248cc88
parent
96634b6e
96634b6e08958c3b66848c8d686c34270c486529
+44
-1
+1
-1
src/styles/editor-chrome.css
+1
-1
src/styles/editor-chrome.css
···
344
344
}
345
345
346
346
/* Publish success pill — sunrise callback, rises into view (Studio-owned).
347
-
Deliberately uses a fixed warm palette, NOT the --sun*/--ink tokens: those
347
+
Deliberately uses a fixed warm palette, NOT the --sun* or --ink tokens: those
348
348
flip with the colour scheme, and no single text colour stays legible over a
349
349
gradient whose --sun-tint end goes near-black in dark mode. A constant light
350
350
sunrise gradient + dark ink keeps the look and clears WCAG AA in both schemes
+43
src/styles/editor-chrome.test.ts
+43
src/styles/editor-chrome.test.ts
···
1
+
import { readFileSync } from 'node:fs';
2
+
import { dirname, join } from 'node:path';
3
+
import { fileURLToPath } from 'node:url';
4
+
import postcss from 'postcss';
5
+
import { describe, expect, it } from 'vitest';
6
+
7
+
/**
8
+
* Regression guard for editor-chrome.css.
9
+
*
10
+
* A comment once read "NOT the --sun[star][slash]--ink tokens": that adjacent
11
+
* star-then-slash pair closed the CSS comment early, so the trailing prose plus
12
+
* the next selector collapsed into one invalid rule and the whole
13
+
* `.studio__published` block (gradient, pill shape, centring) was silently
14
+
* dropped by every CSS parser — the publish pill rendered as an unstyled
15
+
* full-width paragraph.
16
+
*
17
+
* Parsing with PostCSS reproduces the browser's tokeniser (first comment close
18
+
* wins), so asserting the styled rule survives catches any future premature
19
+
* comment close.
20
+
*/
21
+
describe( 'editor-chrome.css', () => {
22
+
it( 'keeps the .studio__published pill rule intact (no premature comment close)', () => {
23
+
const here = dirname( fileURLToPath( import.meta.url ) );
24
+
const css = readFileSync( join( here, './editor-chrome.css' ), 'utf8' );
25
+
const root = postcss.parse( css );
26
+
27
+
let pill: postcss.Rule | undefined;
28
+
root.walkRules( '.studio__published', ( rule ) => {
29
+
if ( rule.some( ( node ) => node.type === 'decl' && node.prop === 'background' ) ) {
30
+
pill = rule;
31
+
}
32
+
} );
33
+
34
+
expect( pill, '.studio__published rule with a background was dropped' ).toBeDefined();
35
+
const background = pill!.nodes.find(
36
+
( node ): node is postcss.Declaration => node.type === 'decl' && node.prop === 'background'
37
+
);
38
+
expect( background?.value ).toContain( 'linear-gradient' );
39
+
expect(
40
+
pill!.some( ( node ) => node.type === 'decl' && node.prop === 'width' )
41
+
).toBe( true );
42
+
} );
43
+
} );