@se-studio/contentful-rest-api 1.0.128 → 1.0.129
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,6 +2,25 @@
|
|
|
2
2
|
* SVG processing utilities for icon sprite generation.
|
|
3
3
|
* These functions fetch and process SVG content during data conversion.
|
|
4
4
|
*/
|
|
5
|
+
export type SvgIssueCode = 'CSS_FILL_STROKE' | 'CSS_COMPLEX_SELECTORS' | 'CSS_AT_RULES' | 'CSS_VARS' | 'DEFS_REFERENCES' | 'NESTED_USE' | 'EMBEDDED_IMAGE';
|
|
6
|
+
export interface SvgIssue {
|
|
7
|
+
severity: 'warn';
|
|
8
|
+
code: SvgIssueCode;
|
|
9
|
+
message: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Inspects raw SVG content for patterns that are known to render incorrectly
|
|
13
|
+
* or unreliably when the SVG is embedded as a <symbol> in a sprite sheet and
|
|
14
|
+
* referenced via <use>.
|
|
15
|
+
*
|
|
16
|
+
* Call this before or alongside processSvgForSprite to surface actionable
|
|
17
|
+
* warnings in server logs at conversion time.
|
|
18
|
+
*
|
|
19
|
+
* @param svgContent - The raw SVG content
|
|
20
|
+
* @param iconId - Unique identifier used in log messages
|
|
21
|
+
* @returns Array of issues found (empty = no known problems)
|
|
22
|
+
*/
|
|
23
|
+
export declare function detectSvgIssues(svgContent: string, iconId: string): SvgIssue[];
|
|
5
24
|
/**
|
|
6
25
|
* Fetches SVG content from a URL.
|
|
7
26
|
* Uses the parent request's cache tags (page-level) for revalidation.
|
|
@@ -14,6 +33,8 @@ export declare function fetchSvgContent(url: string): Promise<string>;
|
|
|
14
33
|
/**
|
|
15
34
|
* Processes SVG content for use in a sprite sheet.
|
|
16
35
|
* Extracts the SVG content and wraps it in a symbol element.
|
|
36
|
+
* Emits console.warn for any patterns that are known to render incorrectly
|
|
37
|
+
* or unreliably via <use> (see detectSvgIssues).
|
|
17
38
|
*
|
|
18
39
|
* @param svgContent - The raw SVG content
|
|
19
40
|
* @param iconId - Unique identifier for the icon
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"svgProcessor.d.ts","sourceRoot":"","sources":["../../src/converters/svgProcessor.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;;GAOG;AACH,wBAAsB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAMlE;AAED
|
|
1
|
+
{"version":3,"file":"svgProcessor.d.ts","sourceRoot":"","sources":["../../src/converters/svgProcessor.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,YAAY,GACpB,iBAAiB,GACjB,uBAAuB,GACvB,cAAc,GACd,UAAU,GACV,iBAAiB,GACjB,YAAY,GACZ,gBAAgB,CAAC;AAErB,MAAM,WAAW,QAAQ;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,EAAE,CA4F9E;AAED;;;;;;;GAOG;AACH,wBAAsB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAMlE;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAwB9E"}
|
|
@@ -2,6 +2,95 @@
|
|
|
2
2
|
* SVG processing utilities for icon sprite generation.
|
|
3
3
|
* These functions fetch and process SVG content during data conversion.
|
|
4
4
|
*/
|
|
5
|
+
/**
|
|
6
|
+
* Inspects raw SVG content for patterns that are known to render incorrectly
|
|
7
|
+
* or unreliably when the SVG is embedded as a <symbol> in a sprite sheet and
|
|
8
|
+
* referenced via <use>.
|
|
9
|
+
*
|
|
10
|
+
* Call this before or alongside processSvgForSprite to surface actionable
|
|
11
|
+
* warnings in server logs at conversion time.
|
|
12
|
+
*
|
|
13
|
+
* @param svgContent - The raw SVG content
|
|
14
|
+
* @param iconId - Unique identifier used in log messages
|
|
15
|
+
* @returns Array of issues found (empty = no known problems)
|
|
16
|
+
*/
|
|
17
|
+
export function detectSvgIssues(svgContent, iconId) {
|
|
18
|
+
const issues = [];
|
|
19
|
+
// --- CSS <style> block analysis ---
|
|
20
|
+
const styleBlockMatch = svgContent.match(/<style[^>]*>([\s\S]*?)<\/style>/i);
|
|
21
|
+
if (styleBlockMatch) {
|
|
22
|
+
const styleContent = styleBlockMatch[1] ?? '';
|
|
23
|
+
// fill/stroke rules → class names collide across icons in the same sprite
|
|
24
|
+
// sheet; CSS may also not cross the <use> shadow boundary in all browsers
|
|
25
|
+
if (/\b(fill|stroke)\s*:/i.test(styleContent)) {
|
|
26
|
+
issues.push({
|
|
27
|
+
severity: 'warn',
|
|
28
|
+
code: 'CSS_FILL_STROKE',
|
|
29
|
+
message: `Icon "${iconId}" uses CSS class-based fill/stroke (e.g. Illustrator's .st0). ` +
|
|
30
|
+
'Class names collide when multiple SVGs share the sprite sheet, and the styles ' +
|
|
31
|
+
'may not apply through <use>. Convert fills/strokes to inline presentation attributes.',
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
// Complex selectors that can't be mechanically inlined
|
|
35
|
+
// Matches: child/sibling operators (> ~ +), attribute selectors ([...]),
|
|
36
|
+
// pseudo-classes (:), compound class selectors (.a.b), element+class (path.x)
|
|
37
|
+
if (/[>~+[\]:]|[a-z]\.[\w-]|\.[\w-]+\.[\w-]/i.test(styleContent)) {
|
|
38
|
+
issues.push({
|
|
39
|
+
severity: 'warn',
|
|
40
|
+
code: 'CSS_COMPLEX_SELECTORS',
|
|
41
|
+
message: `Icon "${iconId}" uses complex CSS selectors that cannot be automatically inlined. ` +
|
|
42
|
+
'Manual SVG cleanup is required.',
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
// @font-face / @keyframes won't scope correctly inside a sprite sheet
|
|
46
|
+
if (/@font-face|@keyframes/i.test(styleContent)) {
|
|
47
|
+
issues.push({
|
|
48
|
+
severity: 'warn',
|
|
49
|
+
code: 'CSS_AT_RULES',
|
|
50
|
+
message: `Icon "${iconId}" contains @font-face or @keyframes rules inside a <style> block. ` +
|
|
51
|
+
'These will not scope correctly when embedded in a sprite sheet.',
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
// CSS custom properties — must be defined on the host document to take effect
|
|
56
|
+
if (/var\s*\(/i.test(svgContent)) {
|
|
57
|
+
issues.push({
|
|
58
|
+
severity: 'warn',
|
|
59
|
+
code: 'CSS_VARS',
|
|
60
|
+
message: `Icon "${iconId}" uses CSS custom properties (var(...)). ` +
|
|
61
|
+
'These must be defined on the host document; they will have no fallback inside the sprite.',
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
// url(#...) references to <defs> (gradients, filters, clipPaths, patterns)
|
|
65
|
+
// Work in modern browsers but are fragile across the <use> boundary in older ones
|
|
66
|
+
if (/url\(#[^)]+\)/i.test(svgContent)) {
|
|
67
|
+
issues.push({
|
|
68
|
+
severity: 'warn',
|
|
69
|
+
code: 'DEFS_REFERENCES',
|
|
70
|
+
message: `Icon "${iconId}" uses url(#...) references (gradients, filters, or clipPaths). ` +
|
|
71
|
+
'These work in modern browsers but may fail in older ones when used inside a sprite.',
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
// Nested <use> — internal href targets break when the SVG moves into a foreign sprite sheet
|
|
75
|
+
if (/<use[\s>]/i.test(svgContent)) {
|
|
76
|
+
issues.push({
|
|
77
|
+
severity: 'warn',
|
|
78
|
+
code: 'NESTED_USE',
|
|
79
|
+
message: `Icon "${iconId}" contains nested <use> elements. ` +
|
|
80
|
+
'Internal href targets may not resolve correctly inside a sprite sheet.',
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
// Embedded <image> — unusual in an icon; raster content bloats the sprite
|
|
84
|
+
if (/<image[\s>]/i.test(svgContent)) {
|
|
85
|
+
issues.push({
|
|
86
|
+
severity: 'warn',
|
|
87
|
+
code: 'EMBEDDED_IMAGE',
|
|
88
|
+
message: `Icon "${iconId}" contains an embedded <image> element. ` +
|
|
89
|
+
'Raster images inside a sprite sheet are unusual and may not render as expected.',
|
|
90
|
+
});
|
|
91
|
+
}
|
|
92
|
+
return issues;
|
|
93
|
+
}
|
|
5
94
|
/**
|
|
6
95
|
* Fetches SVG content from a URL.
|
|
7
96
|
* Uses the parent request's cache tags (page-level) for revalidation.
|
|
@@ -20,12 +109,19 @@ export async function fetchSvgContent(url) {
|
|
|
20
109
|
/**
|
|
21
110
|
* Processes SVG content for use in a sprite sheet.
|
|
22
111
|
* Extracts the SVG content and wraps it in a symbol element.
|
|
112
|
+
* Emits console.warn for any patterns that are known to render incorrectly
|
|
113
|
+
* or unreliably via <use> (see detectSvgIssues).
|
|
23
114
|
*
|
|
24
115
|
* @param svgContent - The raw SVG content
|
|
25
116
|
* @param iconId - Unique identifier for the icon
|
|
26
117
|
* @returns Processed SVG symbol element as a string
|
|
27
118
|
*/
|
|
28
119
|
export function processSvgForSprite(svgContent, iconId) {
|
|
120
|
+
// Warn about known problematic patterns before processing
|
|
121
|
+
const issues = detectSvgIssues(svgContent, iconId);
|
|
122
|
+
for (const issue of issues) {
|
|
123
|
+
console.warn(`[SVG sprite] ${issue.message}`);
|
|
124
|
+
}
|
|
29
125
|
// Parse the SVG to extract viewBox and content
|
|
30
126
|
// Handle optional spaces around equals sign
|
|
31
127
|
const viewBoxMatch = svgContent.match(/viewBox\s*=\s*["']([^"']+)["']/i);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"svgProcessor.js","sourceRoot":"","sources":["../../src/converters/svgProcessor.ts"],"names":[],"mappings":"AAAA;;;GAGG;
|
|
1
|
+
{"version":3,"file":"svgProcessor.js","sourceRoot":"","sources":["../../src/converters/svgProcessor.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED