Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: Module types should support urls without quotes #2467

Merged
merged 1 commit into from
Aug 16, 2023
Merged

Fix: Module types should support urls without quotes #2467

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/extras/module-types.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ import { resolveUrl } from '../common.js';
return res.text()
.then(function (source) {
source = source.replace(/url\(\s*(?:(["'])((?:\\.|[^\n\\"'])+)\1|((?:\\.|[^\s,"'()\\])+))\s*\)/g, function (match, quotes, relUrl1, relUrl2) {
return 'url(' + quotes + resolveUrl(relUrl1 || relUrl2, url) + quotes + ')';
return ['url(', quotes, resolveUrl(relUrl1 || relUrl2, url), quotes, ')'].join('');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please explain the bug that this is resolving? This refactoring looks entirely equivalent to me?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, I should have probably added the following to the PR description...

It's valid CSS to not include quotes in urls like background-image: url(my/image.png);. However the code above that tries to resolve urls doesn't seem to cater for this. So if quotes is undefined the string concatenation adds undefined to the result and the image fails to load. e.g.

'url(' + undefined + 'my/image.png' + undefined + ')' // --> "url(undefinedmy/image.pngundefined)"

However using array.join we can take advantage of the spec to discard unwanted undefined from the result.

If element0 is undefined or null, let R be the empty String; otherwise, Let R be ToString(element0).

e.g.

['url(', undefined, 'my/image.png', undefined, ')'].join('') // --> "url(my/image.png)"

I'm more than happy to refactor if you feel the approach I've taken isn't explicit enough.

});
return new Response(new Blob([
'System.register([],function(e){return{execute:function(){var s=new CSSStyleSheet();s.replaceSync(' + JSON.stringify(source) + ');e("default",s)}}})'
Expand Down
11 changes: 11 additions & 0 deletions test/browser/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,17 @@ suite('SystemJS Standard Tests', function() {
});
});

test('should handle css modules with urls without quotes', function () {
return System.import('fixturesbase/css-modules/url-without-quotes.css').then(function (m) {
assert.ok(m);
assert.ok(isCSSStyleSheet(m.default));
assert.equal(m.default.cssRules[0].cssText,'.hello { background-image: url("http://localhost:8080/test/fixtures/css-modules/path/to/image.png"); }')
assert.equal(m.default.cssRules[1].cssText,'.world { background-image: url("http://localhost:8080/test/fixtures/css-modules/path/to/image.png"); }')
assert.equal(m.default.cssRules[2].cssText,'body { background-image: url("http://localhost:8080/test/fixtures/css-modules/path/to/image.png"); }')
document.adoptedStyleSheets = document.adoptedStyleSheets.concat(m.default);
});
});

test('should support application/javascript css module override', function () {
return System.import('fixturesbase/css-modules/javascript.css').then(function (m) {
assert.ok(m);
Expand Down
9 changes: 9 additions & 0 deletions test/fixtures/css-modules/url-without-quotes.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.hello {
background-image: url(./path/to/image.png);
}
.world {
background-image: url('./path/to/image.png');
}
body {
background-image: url("./path/to/image.png");
}