Skip to content

Commit

Permalink
fix(@angular/build): improve Sass rebaser ident token detection
Browse files Browse the repository at this point in the history
When rebasing URLs within Sass files, the `url` token will now
be more accurately detected by ensuring it is not part of a larger
token. This prevents custom Sass functions that happen to have a
name the ends with `url` from being incorrectly detected.

(cherry picked from commit f17b78d)
  • Loading branch information
clydin authored and alan-agius4 committed May 29, 2024
1 parent a6a3c6e commit 346df49
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,33 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
harness.expectFile('dist/browser/media/logo.svg').toExist();
});

it('should not rebase Sass function definition with name ending in "url"', async () => {
await harness.writeFiles({
'src/styles.scss': `@use 'theme/a';`,
'src/theme/a.scss': `
@import './b';
.a {
$asset: my-function-url('logo');
background-image: url($asset)
}
`,
'src/theme/b.scss': `@function my-function-url($name) { @return "./images/" + $name + ".svg"; }`,
'src/theme/images/logo.svg': `<svg></svg>`,
});

harness.useTarget('build', {
...BASE_OPTIONS,
outputHashing: OutputHashing.None,
styles: ['src/styles.scss'],
});

const { result } = await harness.executeOnce();
expect(result?.success).toBeTrue();

harness.expectFile('dist/browser/styles.css').content.toContain(`url("./media/logo.svg")`);
harness.expectFile('dist/browser/media/logo.svg').toExist();
});

it('should not process a URL that has been marked as external', async () => {
await harness.writeFiles({
'src/styles.scss': `@use 'theme/a';`,
Expand Down
15 changes: 14 additions & 1 deletion packages/angular/build/src/tools/sass/lexer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,22 @@ export function* findUrls(

// Based on https://www.w3.org/TR/css-syntax-3/#consume-ident-like-token
while ((pos = contents.indexOf('url(', pos)) !== -1) {
width = 1;

// Ensure whitespace, comma, or colon before `url(`
if (pos > 0) {
pos -= 2;
next();
if (!isWhitespace(current) && current !== 0x0027 && current !== 0x003a) {
// Skip - not a url token
pos += 3;
continue;
}
pos += 1;
}

// Set to position of the (
pos += 3;
width = 1;

// Consume all leading whitespace
while (isWhitespace(next())) {
Expand Down

0 comments on commit 346df49

Please sign in to comment.