Update theme asset builds

[cathysarisky]

Running gulp build after a bunch of renovate changes, to make the theme shippable again.

[coderabbitai]

Walkthrough

The pull request extends the styling foundation with a comprehensive CSS reset applied to screen.css, introducing default styles for typography, form controls, layout primitives, and theme variants (light/dark modes). Minor property reordering occurs in global.css. A new locale context mapping file is introduced at locales/context.json that links UI strings to corresponding template file paths. Additionally, eleven new locale files are added for internationalization support: German (Germany and Switzerland), French, Irish, Scottish Gaelic, Dutch, Brazilian Portuguese, Swedish, Ukrainian, and Simplified Chinese, each containing partial translations of UI strings with many entries left empty for future completion.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Update theme asset builds' accurately describes the main change in this PR, which comprises running gulp build to update compiled CSS assets and adding locale files for i18n support.
Description check	✅ Passed	The description 'Running gulp build after a bunch of renovate changes, to make the theme shippable again' is directly related to the changeset, explaining the motivation and purpose of the asset build updates.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch update-asset-builds

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 5

🧹 Nitpick comments (2)

locales/sv.json (1)

52-52: Inconsistent partial translations in accessibility hints.

Lines 52 and 64 mix Swedish and English within the same string:

• "Nästa (arrow right)" — "arrow right" remains in English
• "Föregående (arrow left)" — "arrow left" remains in English

For consistency, consider fully translating these accessibility hints (e.g., "Nästa (pil höger)" and "Föregående (pil vänster)") or keeping them entirely in English.

Suggested fix

-    "Next (arrow right)": "Nästa (arrow right)",
+    "Next (arrow right)": "Nästa (pil höger)",
...
-    "Previous (arrow left)": "Föregående (arrow left)",
+    "Previous (arrow left)": "Föregående (pil vänster)",

Also applies to: 64-64

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@locales/sv.json` at line 52, Partial translations in the accessibility hint
strings are inconsistent: update the two entries that currently read "Next
(arrow right)" and "Previous (arrow left)" (or their Swedish equivalents "Nästa
(arrow right)" and "Föregående (arrow left)") so they are consistently fully
translated into Swedish, e.g., change the parenthetical phrases to "pil höger"
and "pil vänster" resulting in "Nästa (pil höger)" and "Föregående (pil
vänster)".

assets/built/screen.css (1)

1-1: This is generated build output.

This file is the compiled/minified CSS output from the gulp build. The static analysis issues flagged (deprecated grid-gap, word-break: break-word, vendor prefixes, etc.) originate in the source CSS files and should be addressed there rather than in the build output.

Consider addressing these in the source files in a follow-up:

• Replace grid-gap with gap (5 occurrences)
• Replace deprecated word-break: break-word with overflow-wrap: break-word
• Fix ::not(.gh-content) pseudo-element syntax (should be :not(.gh-content))
• Deduplicate font-family: monospace, monospace

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@assets/built/screen.css` at line 1, The flagged issues are in the compiled
build CSS; fix them in the source Sass/CSS files (not the generated assets) by:
replace any usages of grid-gap with gap (search for "grid-gap" across source
styles), replace deprecated "word-break: break-word" with "overflow-wrap:
break-word" in rules that intend to break long words (e.g., selectors currently
using post-card, li, etc.), correct the malformed pseudo-selector
"::not(.gh-content)" to ":not(.gh-content)" in the source where that selector is
defined, and deduplicate the monospace font-family declaration (remove the
duplicate "monospace" entry) so the compiled screen.css no longer contains these
issues.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@assets/built/global.css`:
- Line 1: The CSS uses the invalid double-colon pseudo-element syntax
(::not(.gh-content) ...) which causes those selectors (e.g., ::not(.gh-content)
blockquote, ::not(.gh-content) dl, ::not(.gh-content) ol, ::not(.gh-content) p,
::not(.gh-content) ul) to be ignored; replace the double colon with a single
colon so the pseudo-class is :not(.gh-content) for each of those selectors to
restore the intended margin:0 0 1.5em rule.

In `@locales/en.json`:
- Around line 1-112: The en locale file contains 110 empty translation values
causing Ghost's {{t}} helper to render blank UI; populate critical keys (e.g.,
"Sign in", "Subscribe", "Account", "Menu", "Search posts, tags and authors",
"Read more", "Next", "Previous", "Subscribe to {sitetitle}", "Members only")
with their English strings or remove the en.json so Ghost falls back to keys;
update the same file entries referenced by templates like default.hbs (e.g., {{t
"Sign in"}}, {{t "Subscribe"}}, {{t "Account"}}) to ensure visible text in
navigation, CTAs and labels.

In `@locales/ga.json`:
- Line 6: The "% min read" translation uses the wrong placeholder "%m" causing
interpolation to fail; update the value for the "% min read" key to use "%"
(matching other locales) so it reads "Am léamha: %" instead of "Am léamha: %m".

In `@locales/nl.json`:
- Line 52: Replace the incorrect Dutch translation for the key "Next (arrow
right)" which currently reads "Volgende (pijl recht)" with the correct phrase
"Volgende (pijl rechts)" by updating the value for the "Next (arrow right)"
entry.

In `@locales/pt-BR.json`:
- Line 70: The translation for the key "Read more" currently contains a trailing
space ("Veja mais "), so remove the trailing whitespace from the value for the
"Read more" entry (update the translation string from "Veja mais " to "Veja
mais") to ensure consistent UI spacing and rendering.

---

Nitpick comments:
In `@assets/built/screen.css`:
- Line 1: The flagged issues are in the compiled build CSS; fix them in the
source Sass/CSS files (not the generated assets) by: replace any usages of
grid-gap with gap (search for "grid-gap" across source styles), replace
deprecated "word-break: break-word" with "overflow-wrap: break-word" in rules
that intend to break long words (e.g., selectors currently using post-card, li,
etc.), correct the malformed pseudo-selector "::not(.gh-content)" to
":not(.gh-content)" in the source where that selector is defined, and
deduplicate the monospace font-family declaration (remove the duplicate
"monospace" entry) so the compiled screen.css no longer contains these issues.

In `@locales/sv.json`:
- Line 52: Partial translations in the accessibility hint strings are
inconsistent: update the two entries that currently read "Next (arrow right)"
and "Previous (arrow left)" (or their Swedish equivalents "Nästa (arrow right)"
and "Föregående (arrow left)") so they are consistently fully translated into
Swedish, e.g., change the parenthetical phrases to "pil höger" and "pil vänster"
resulting in "Nästa (pil höger)" and "Föregående (pil vänster)".

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 476bfa35-40e4-4a26-8267-a2511dd9f6f1

📥 Commits

Reviewing files that changed from the base of the PR and between 5d1865c and b108fa7.

⛔ Files ignored due to path filters (3)

• assets/built/casper.js.map is excluded by !**/*.map
• assets/built/global.css.map is excluded by !**/*.map
• assets/built/screen.css.map is excluded by !**/*.map

📒 Files selected for processing (15)

• assets/built/casper.js
• assets/built/global.css
• assets/built/screen.css
• locales/context.json
• locales/de-CH.json
• locales/de.json
• locales/en.json
• locales/fr.json
• locales/ga.json
• locales/gd.json
• locales/nl.json
• locales/pt-BR.json
• locales/sv.json
• locales/uk.json
• locales/zh.json

[coderabbitai]

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find the source file containing the ::not bug
rg -l '::not\(' --type css --type scss
rg '::not\(' -C2

Repository: TryGhost/Casper

Length of output: 50418

---

🏁 Script executed:

#!/bin/bash
# Find SCSS/CSS source files
find . -type f \( -name "*.scss" -o -name "*.sass" \) | head -20

# Also check for any source directories
fd -t f -e scss -e sass | head -20

Repository: TryGhost/Casper

Length of output: 41

---

🏁 Script executed:

#!/bin/bash
# Check for build configuration
ls -la | grep -E "package.json|gulpfile|webpack|tsconfig|postcss"

# Look at directory structure
find . -maxdepth 2 -type d | head -20

# Check git log for SCSS files
git log --name-only --pretty=format: | grep -E "\.(scss|sass)$" | sort -u | head -10

Repository: TryGhost/Casper

Length of output: 349

---

🏁 Script executed:

#!/bin/bash
# Check source CSS directory
ls -la assets/css/

# Check if ::not appears in source
rg '::not\(' assets/css/

# Also search for :not (single colon) to see what's correct
rg ':not\(' assets/css/ | head -5

Repository: TryGhost/Casper

Length of output: 1060

---

🏁 Script executed:

#!/bin/bash
# Show the exact source code with context around ::not
head -50 assets/css/global.css | tail -20

# Show the valid :not syntax in screen.css
grep -n ':not(' assets/css/screen.css | head -3

Repository: TryGhost/Casper

Length of output: 426

---

🏁 Script executed:

#!/bin/bash
# Show the problematic selector in source global.css
rg -B2 -A5 '::not\(' assets/css/global.css

# Show the line number
rg -n '::not\(' assets/css/global.css

Repository: TryGhost/Casper

Length of output: 364

---

🌐 Web query:

CSS :not() pseudo-class selector double colon vs single colon syntax specification

💡 Result:

• :not() is defined as a pseudo-class (“The Negation (Matches-None) Pseudo-class: :not()”), so its correct/standard syntax is single-colon: :not(...). [1]
• The double-colon :: syntax is for pseudo-elements, introduced to distinguish pseudo-elements from pseudo-classes (with legacy single-colon forms like :before kept for backward compatibility). Therefore ::not(...) is not valid CSS and should not be used. [2][3]

Use: a:not(.active) { ... }
Do not use: a::not(.active) { ... }

Sources:
[1] W3C Selectors Level 4 – §4.3 :not() https://www.w3.org/TR/selectors-4/
[2] MDN – :not() pseudo-class https://developer.mozilla.org/en-US/docs/Web/CSS/:not
[3] web.dev – pseudo-class vs pseudo-element (: vs ::) https://web.dev/learn/css/selectors

---

Fix ::not() to :not() in source CSS (pseudo-class uses single colon).

The source file assets/css/global.css (lines 324–328) contains invalid CSS syntax. :not() is a pseudo-class and must use a single colon, not double colon. The double-colon syntax :: is reserved for pseudo-elements. Browsers will silently ignore these selectors, preventing the margin: 0 0 1.5em rule from applying to blockquote, dl, ol, p, and ul elements.

Change:

::not(.gh-content) p,
::not(.gh-content) ul,
::not(.gh-content) ol,
::not(.gh-content) dl,
::not(.gh-content) blockquote {

To:

:not(.gh-content) p,
:not(.gh-content) ul,
:not(.gh-content) ol,
:not(.gh-content) dl,
:not(.gh-content) blockquote {

🧰 Tools

🪛 Biome (2.4.4)

[error] 1-1: Duplicate font names are redundant and unnecessary: monospace

(lint/suspicious/noDuplicateFontNames)

---

[error] 1-1: Unexpected unknown pseudo-elements: not(.gh-content)

(lint/correctness/noUnknownPseudoElement)

---

[error] 1-1: Unexpected unknown pseudo-elements: not(.gh-content)

(lint/correctness/noUnknownPseudoElement)

---

[error] 1-1: Unexpected unknown pseudo-elements: not(.gh-content)

(lint/correctness/noUnknownPseudoElement)

---

[error] 1-1: Unexpected unknown pseudo-elements: not(.gh-content)

(lint/correctness/noUnknownPseudoElement)

---

[error] 1-1: Unexpected unknown pseudo-elements: not(.gh-content)

(lint/correctness/noUnknownPseudoElement)

🪛 Stylelint (17.4.0)

[error] 1-1: Unexpected duplicate font-family name monospace (font-family-no-duplicate-names)

(font-family-no-duplicate-names)

---

[error] 1-1: Unexpected vendor-prefixed selector "::-moz-selection" (selector-no-vendor-prefix)

(selector-no-vendor-prefix)

---

[error] 1-1: Unexpected unknown pseudo-element selector "::not" (selector-pseudo-element-no-unknown)

(selector-pseudo-element-no-unknown)

---

[error] 1-1: Unexpected unknown pseudo-element selector "::not" (selector-pseudo-element-no-unknown)

(selector-pseudo-element-no-unknown)

---

[error] 1-1: Unexpected unknown pseudo-element selector "::not" (selector-pseudo-element-no-unknown)

(selector-pseudo-element-no-unknown)

---

[error] 1-1: Unexpected unknown pseudo-element selector "::not" (selector-pseudo-element-no-unknown)

(selector-pseudo-element-no-unknown)

---

[error] 1-1: Unexpected unknown pseudo-element selector "::not" (selector-pseudo-element-no-unknown)

(selector-pseudo-element-no-unknown)

---

[error] 1-1: Expected "optimizeLegibility" to be "optimizelegibility" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "optimizeLegibility" to be "optimizelegibility" (value-keyword-case)

(value-keyword-case)

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@assets/built/global.css` at line 1, The CSS uses the invalid double-colon
pseudo-element syntax (::not(.gh-content) ...) which causes those selectors
(e.g., ::not(.gh-content) blockquote, ::not(.gh-content) dl, ::not(.gh-content)
ol, ::not(.gh-content) p, ::not(.gh-content) ul) to be ignored; replace the
double colon with a single colon so the pseudo-class is :not(.gh-content) for
each of those selectors to restore the intended margin:0 0 1.5em rule.

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

Critical: Empty English translations will render blank UI text.

All 110 translation keys map to empty strings. Ghost's {{t}} helper renders the translation value directly—when empty, users see blank navigation buttons, CTAs, and labels instead of readable text.

Per the relevant code snippets, templates like default.hbs use {{t "Sign in"}}, {{t "Subscribe"}}, and {{t "Account"}}. With empty values, English-locale users will see invisible buttons.

Either populate English values (e.g., "Subscribe": "Subscribe") or remove en.json entirely so Ghost falls back to the key names.

Example fix for critical UI strings

-    "Account": "",
+    "Account": "Account",
...
-    "Sign in": "",
+    "Sign in": "Sign in",
...
-    "Subscribe": "",
+    "Subscribe": "Subscribe",
...
-    "Featured": "",
+    "Featured": "Featured",

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@locales/en.json` around lines 1 - 112, The en locale file contains 110 empty
translation values causing Ghost's {{t}} helper to render blank UI; populate
critical keys (e.g., "Sign in", "Subscribe", "Account", "Menu", "Search posts,
tags and authors", "Read more", "Next", "Previous", "Subscribe to {sitetitle}",
"Members only") with their English strings or remove the en.json so Ghost falls
back to keys; update the same file entries referenced by templates like
default.hbs (e.g., {{t "Sign in"}}, {{t "Subscribe"}}, {{t "Account"}}) to
ensure visible text in navigation, CTAs and labels.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Placeholder format differs from other locales.

Same issue as gd.json: the translation uses %m instead of %. This should be consistent across locale files to ensure the i18n interpolation works correctly.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@locales/ga.json` at line 6, The "% min read" translation uses the wrong
placeholder "%m" causing interpolation to fail; update the value for the "% min
read" key to use "%" (matching other locales) so it reads "Am léamha: %" instead
of "Am léamha: %m".

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Minor typo: "pijl recht" should be "pijl rechts".

In Dutch, directional "right" is "rechts" (not "recht" which means "straight" or "legal right").

Suggested fix

-    "Next (arrow right)": "Volgende (pijl recht)",
+    "Next (arrow right)": "Volgende (pijl rechts)",

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	"Next (arrow right)": "Volgende (pijl recht)",
	"Next (arrow right)": "Volgende (pijl rechts)",

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@locales/nl.json` at line 52, Replace the incorrect Dutch translation for the
key "Next (arrow right)" which currently reads "Volgende (pijl recht)" with the
correct phrase "Volgende (pijl rechts)" by updating the value for the "Next
(arrow right)" entry.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Trailing space in translation value.

The translation for "Read more" has a trailing space ("Veja mais "), which may cause inconsistent rendering or spacing in the UI.

🔧 Suggested fix

-    "Read more": "Veja mais ",
+    "Read more": "Veja mais",

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	"Read more": "Veja mais ",
	"Read more": "Veja mais",

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@locales/pt-BR.json` at line 70, The translation for the key "Read more"
currently contains a trailing space ("Veja mais "), so remove the trailing
whitespace from the value for the "Read more" entry (update the translation
string from "Veja mais " to "Veja mais") to ensure consistent UI spacing and
rendering.