create-nextblock 0.15.5 → 0.15.9

package/templates/nextblock-template/lib/blocks/blockColors.test.ts

@@ -39,12 +39,26 @@ describe('resolveTextColor', () => {
     expect(resolveTextColor(undefined)).toEqual({});
     expect(resolveTextColor(null)).toEqual({});
     expect(resolveTextColor('')).toEqual({});
-    expect(resolveTextColor('chartreuse')).toEqual({});
+    expect(resolveTextColor('notacolour')).toEqual({});
     expect(resolveTextColor('javascript:alert(1)')).toEqual({});
     expect(resolveTextColor('url(https://evil.test/x.png)')).toEqual({});
+    // A valid name with anything appended is not a name — this is the injection case,
+    // and it must stay rejected even though `red` on its own is now accepted.
     expect(resolveTextColor('red; background: url(x)')).toEqual({});
   });
 
+  it('accepts CSS named colours, which seeded and AI-authored content actually uses', () => {
+    // The seeded contact-page heading is `textColor: "white"`. It matched neither a
+    // token nor the hex/rgb/hsl pattern, so it resolved to {} and the white-on-dark hero
+    // rendered dark-on-dark with nothing reporting a problem.
+    expect(resolveTextColor('white')).toEqual({ style: { color: 'white' } });
+    expect(resolveTextColor('Black')).toEqual({ style: { color: 'Black' } });
+    expect(resolveTextColor('  transparent ')).toEqual({ style: { color: 'transparent' } });
+
+    // Still distinguishable from a theme token, which resolves to a class instead.
+    expect(resolveTextColor('accent')).toEqual({ className: 'text-accent' });
+  });
+
   it('never emits an interpolated class name', () => {
     for (const token of TEXT_COLOR_TOKENS) {
       const { className } = resolveTextColor(token);
@@ -73,7 +87,11 @@ describe('guards', () => {
     expect(isTextColorToken('accent')).toBe(true);
     expect(isTextColorToken('#FFF')).toBe(false);
     expect(isCustomCssColor('#FFF')).toBe(true);
+    expect(isCustomCssColor('white')).toBe(true);
+    // A theme token is not a literal colour: the two share one field and are told apart
+    // only here, so this must keep answering false.
     expect(isCustomCssColor('accent')).toBe(false);
+    expect(isCustomCssColor('notacolour')).toBe(false);
   });
 });
 
@@ -103,7 +121,9 @@ describe('HeadingBlockSchema.textColor', () => {
   });
 
   it('rejects values that are neither a token nor a colour', () => {
-    for (const bad of ['nonsense', 'url(x)', 'red', '']) {
+    // 'red' was in this list only because named colours used to be rejected wholesale.
+    // It is a real colour and is now accepted; the genuinely invalid values stay here.
+    for (const bad of ['nonsense', 'url(x)', 'red; background: url(x)', '']) {
       expect(HeadingBlockSchema.safeParse({ ...base, textColor: bad }).success).toBe(false);
     }
   });

package/templates/nextblock-template/lib/blocks/blockColors.ts

@@ -82,12 +82,55 @@ export const TEXT_COLOR_TOKEN_OPTIONS = TEXT_COLOR_TOKENS.map((token) => ({
 export const CSS_COLOR_PATTERN =
   /^(#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})|rgba?\([^)]+\)|hsla?\([^)]+\))$/i;
 
+/**
+ * CSS named colours, which the picker never emits but hand-authored and AI-authored
+ * content does.
+ *
+ * The seeded contact page sets `textColor: "white"` on its heading. That is perfectly
+ * valid CSS, but it matched neither a theme token nor the literal pattern above, so
+ * `resolveTextColor` returned `{}` and the heading quietly inherited the dark default —
+ * a white-on-dark hero rendering dark-on-dark, with nothing anywhere reporting a problem.
+ *
+ * Spelled out as a set rather than folded into the pattern as `[a-z]+`, because
+ * `isCustomCssColor` has to keep answering false for a theme token like `accent`: the
+ * two are stored in the same field and told apart only by these predicates.
+ */
+const CSS_NAMED_COLORS = new Set(
+  (
+    'aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue ' +
+    'blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk ' +
+    'crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkgrey darkkhaki ' +
+    'darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen ' +
+    'darkslateblue darkslategray darkslategrey darkturquoise darkviolet deeppink deepskyblue ' +
+    'dimgray dimgrey dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite ' +
+    'gold goldenrod gray green greenyellow grey honeydew hotpink indianred indigo ivory khaki ' +
+    'lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan ' +
+    'lightgoldenrodyellow lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen ' +
+    'lightskyblue lightslategray lightslategrey lightsteelblue lightyellow lime limegreen linen ' +
+    'magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen ' +
+    'mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream ' +
+    'mistyrose moccasin navajowhite navy oldlace olive olivedrab orange orangered orchid ' +
+    'palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum ' +
+    'powderblue purple rebeccapurple red rosybrown royalblue saddlebrown salmon sandybrown ' +
+    'seagreen seashell sienna silver skyblue slateblue slategray slategrey snow springgreen ' +
+    'steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow ' +
+    'yellowgreen transparent currentcolor'
+  ).split(' ')
+);
+
+export function isCssNamedColor(value: unknown): value is string {
+  return typeof value === 'string' && CSS_NAMED_COLORS.has(value.trim().toLowerCase());
+}
+
 export function isTextColorToken(value: unknown): value is TextColorToken {
   return typeof value === 'string' && (TEXT_COLOR_TOKENS as readonly string[]).includes(value);
 }
 
 export function isCustomCssColor(value: unknown): value is string {
-  return typeof value === 'string' && CSS_COLOR_PATTERN.test(value.trim());
+  return (
+    (typeof value === 'string' && CSS_COLOR_PATTERN.test(value.trim())) ||
+    isCssNamedColor(value)
+  );
 }
 
 export interface ResolvedTextColor {