Skip to content

Commit

Permalink
fix(@angular-devkit/build-angular): account for styles specified as s…
Browse files Browse the repository at this point in the history
…tring literals and styleUrl

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.
  • Loading branch information
crisbeto authored and alan-agius4 committed Sep 13, 2023
1 parent 828030d commit 2f299fc
Showing 1 changed file with 64 additions and 49 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -143,75 +143,90 @@ function visitComponentMetadata(
switch (node.name.text) {
case 'templateUrl':
// Only analyze string literals
if (
!ts.isStringLiteral(node.initializer) &&
!ts.isNoSubstitutionTemplateLiteral(node.initializer)
) {
if (!ts.isStringLiteralLike(node.initializer)) {
return node;
}

const url = node.initializer.text;
if (!url) {
return node;
}

return nodeFactory.updatePropertyAssignment(
node,
nodeFactory.createIdentifier('template'),
createResourceImport(
nodeFactory,
generateJitFileUri(url, 'template'),
resourceImportDeclarations,
),
);
return node.initializer.text.length === 0
? node
: nodeFactory.updatePropertyAssignment(
node,
nodeFactory.createIdentifier('template'),
createResourceImport(
nodeFactory,
generateJitFileUri(node.initializer.text, 'template'),
resourceImportDeclarations,
),
);
case 'styles':
if (!ts.isArrayLiteralExpression(node.initializer)) {
return node;
if (ts.isStringLiteralLike(node.initializer)) {
styleReplacements.unshift(
createResourceImport(
nodeFactory,
generateJitInlineUri(node.initializer.text, 'style'),
resourceImportDeclarations,
),
);

return undefined;
}

const inlineStyles = ts.visitNodes(node.initializer.elements, (node) => {
if (!ts.isStringLiteral(node) && !ts.isNoSubstitutionTemplateLiteral(node)) {
return node;
}
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,
generateJitInlineUri(node.text, 'style'),
resourceImportDeclarations,
);
}) as ts.NodeArray<ts.Expression>;

// Inline styles should be placed first
styleReplacements.unshift(...inlineStyles);

// The inline styles will be added afterwards in combination with any external styles
return undefined;
}

const contents = node.text;
if (!contents) {
// An empty inline style is equivalent to not having a style element
return undefined;
}
return node;

return createResourceImport(
nodeFactory,
generateJitInlineUri(contents, 'style'),
resourceImportDeclarations,
case 'styleUrl':
if (ts.isStringLiteralLike(node.initializer)) {
styleReplacements.push(
createResourceImport(
nodeFactory,
generateJitFileUri(node.initializer.text, 'style'),
resourceImportDeclarations,
),
);
}) as ts.NodeArray<ts.Expression>;

// Inline styles should be placed first
styleReplacements.unshift(...inlineStyles);
return undefined;
}

return node;

// The inline styles will be added afterwards in combination with any external styles
return undefined;
case 'styleUrls':
if (!ts.isArrayLiteralExpression(node.initializer)) {
return node;
}

const externalStyles = ts.visitNodes(node.initializer.elements, (node) => {
if (!ts.isStringLiteral(node) && !ts.isNoSubstitutionTemplateLiteral(node)) {
return node;
}

const url = node.text;
if (!url) {
if (!ts.isStringLiteralLike(node)) {
return node;
}

return createResourceImport(
nodeFactory,
generateJitFileUri(url, 'style'),
resourceImportDeclarations,
);
return node.text
? createResourceImport(
nodeFactory,
generateJitFileUri(node.text, 'style'),
resourceImportDeclarations,
)
: undefined;
}) as ts.NodeArray<ts.Expression>;

// External styles are applied after any inline styles
Expand Down

0 comments on commit 2f299fc

Please sign in to comment.