I spent some time this week making the Style Generator less fragile. If you’ve ever imported a theme and watched the preview turn into a pale imitation of the original, this is the fix.

The parser used to give up early

The old splitter was basically “find the first brace and call it a rule.” That’s fine until a stylesheet does something anything other than ordinary.

A CriticMarkup closer used to end the rule in the middle of the string:

span.critic.comment::after {
  content: " <<}";
}

Google Fonts imports had a similar problem. A family list has semicolons inside the URL, and the parser treated the first one as the end of the line. Nested @media blocks got clipped at the first inner rule, so the rest of the query spilled out as broken CSS.

It now reads strings and nested blocks the way a stylesheet actually works. A brace inside quotes stays inside the quotes. A media query keeps the rules that belong to it.

Importing a theme keeps what you wrote

Opening a style for editing used to copy a few colors into the form and throw the rest away. Variable colors were the worst consequence of this. A headline written as color: var(--coral) got stripped, the form never received a real color, and the preview fell back to a default.

Custom properties had a second problem. The preview scopes rules under #wrapper, which turned :root into a selector that never matched. The palette was defined and then immediately unreachable. Fonts went with it. One @import that listed Syne, Hanken Grotesk, and IBM Plex Mono kept only the first family, so the display face never loaded.

A page title could shrink for a sillier reason. The real h1 might be 2.7rem, and a table-of-contents label further down might be 0.72rem. The importer treated that later label as the page heading.

Literal colors still land in the controls, so you can tweak a hex value from the sidebar. Anything the form can’t represent stays in the custom CSS and shows up in the preview: var(), a header-cell color that isn’t the body-cell color, the real h1 size, and every family in the font import.

Make one yours

The style gallery is the easiest way in. Open a style, hit Customize, and it loads in the Style Generator as a copy. Change the type, the palette, the spacing, then save it as your own.

You can also steal and tweak a style from your own blog or favorite site using Marked’s Style Stealer, and then clicking the edit button in the Style Manager.

Styles you build in the generator aren’t limited to Marked. nvUltra and MultiMarkdow Composer can work with these themes, and nvALT’s Markdown preview is themeable now, so a stylesheet from the Style Generator works there too.