Graham/angular-cli
1
0
Fork 0
mirror of https://github.com/angular/angular-cli.git synced 2025-05-23 23:59:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(@angular-devkit/build-angular): account for styles specified as string literals and styleUrl

Browse Source 
An upcoming change in Angular will allow `style` specified as strings, in addition to a new `styleUrl` property. These changes update the JIT resource transform to support the change.
This commit is contained in:
Kristiyan Kostadinov 2023-09-11 14:14:37 +02:00 committed by Alan Agius
parent 828030da0f
commit 2f299fc7b5
1 changed files with 64 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
packages/angular_devkit/build_angular/src/tools/esbuild/angular/jit-resource-transformer.ts
View File

@ -143,46 +143,45 @@ function visitComponentMetadata(
switch (node.name.text) { switch (node.name.text) {
case 'templateUrl': case 'templateUrl':
// Only analyze string literals // Only analyze string literals
if ( if (!ts.isStringLiteralLike(node.initializer)) {
!ts.isStringLiteral(node.initializer) &&
!ts.isNoSubstitutionTemplateLiteral(node.initializer)
) {
return node; return node;
} }
const url = node.initializer.text; return node.initializer.text.length === 0
if (!url) { ? node
return node; : nodeFactory.updatePropertyAssignment(
}
return nodeFactory.updatePropertyAssignment(
node, node,
nodeFactory.createIdentifier('template'), nodeFactory.createIdentifier('template'),
createResourceImport( createResourceImport(
nodeFactory, nodeFactory,
generateJitFileUri(url, 'template'), generateJitFileUri(node.initializer.text, 'template'),
resourceImportDeclarations, resourceImportDeclarations,
), ),
); );
case 'styles': case 'styles':
if (!ts.isArrayLiteralExpression(node.initializer)) { if (ts.isStringLiteralLike(node.initializer)) {
return node; styleReplacements.unshift(
} createResourceImport(
nodeFactory,
generateJitInlineUri(node.initializer.text, 'style'),
resourceImportDeclarations,
),
);
const inlineStyles = ts.visitNodes(node.initializer.elements, (node) => {
if (!ts.isStringLiteral(node) && !ts.isNoSubstitutionTemplateLiteral(node)) {
return node;
}
const contents = node.text;
if (!contents) {
// An empty inline style is equivalent to not having a style element
return undefined; return undefined;
} }
return createResourceImport( if (ts.isArrayLiteralExpression(node.initializer)) {
const inlineStyles = ts.visitNodes(node.initializer.elements, (node) => {
if (!ts.isStringLiteralLike(node)) {
return node;
}
return node.text.length === 0
? undefined // An empty inline style is equivalent to not having a style element
: createResourceImport(
nodeFactory, nodeFactory,
generateJitInlineUri(contents, 'style'), generateJitInlineUri(node.text, 'style'),
resourceImportDeclarations, resourceImportDeclarations,
); );
}) as ts.NodeArray<ts.Expression>; }) as ts.NodeArray<ts.Expression>;
@ -192,26 +191,42 @@ function visitComponentMetadata(
// The inline styles will be added afterwards in combination with any external styles // The inline styles will be added afterwards in combination with any external styles
return undefined; return undefined;
}
return node;
case 'styleUrl':
if (ts.isStringLiteralLike(node.initializer)) {
styleReplacements.push(
createResourceImport(
nodeFactory,
generateJitFileUri(node.initializer.text, 'style'),
resourceImportDeclarations,
),
);
return undefined;
}
return node;
case 'styleUrls': case 'styleUrls':
if (!ts.isArrayLiteralExpression(node.initializer)) { if (!ts.isArrayLiteralExpression(node.initializer)) {
return node; return node;
} }
const externalStyles = ts.visitNodes(node.initializer.elements, (node) => { const externalStyles = ts.visitNodes(node.initializer.elements, (node) => {
if (!ts.isStringLiteral(node) && !ts.isNoSubstitutionTemplateLiteral(node)) { if (!ts.isStringLiteralLike(node)) {
return node; return node;
} }
const url = node.text; return node.text
if (!url) { ? createResourceImport(
return node;
}
return createResourceImport(
nodeFactory, nodeFactory,
generateJitFileUri(url, 'style'), generateJitFileUri(node.text, 'style'),
resourceImportDeclarations, resourceImportDeclarations,
); )
: undefined;
}) as ts.NodeArray<ts.Expression>; }) as ts.NodeArray<ts.Expression>;
// External styles are applied after any inline styles // External styles are applied after any inline styles