TestBase64ImportURLInCSS
---------- /out/entry.css ----------
/* entry.css */
a {
background: url(data:image/png;base64,iVBORw0KGgo=);
}
================================================================================
TestBinaryImportURLInCSS
---------- /out/entry.css ----------
/* entry.css */
a {
background: url(data:application/octet-stream;base64,iVBORw0KGgo=);
}
================================================================================
TestCSSAndJavaScriptCodeSplittingIssue1064
---------- /out/a.js ----------
import {
shared_default
} from "./chunk-XTGNVFM6.js";
// a.js
console.log(shared_default() + 1);
---------- /out/b.js ----------
import {
shared_default
} from "./chunk-XTGNVFM6.js";
// b.js
console.log(shared_default() + 2);
---------- /out/chunk-XTGNVFM6.js ----------
// shared.js
function shared_default() {
return 3;
}
export {
shared_default
};
---------- /out/c.css ----------
/* shared.css */
body {
background: black;
}
/* c.css */
body {
color: red;
}
---------- /out/d.css ----------
/* shared.css */
body {
background: black;
}
/* d.css */
body {
color: blue;
}
================================================================================
TestCSSAtImport
---------- /out.css ----------
/* a.css */
.a {
color: green;
}
/* shared.css */
.shared {
color: black;
}
/* b.css */
.b {
color: blue;
}
/* entry.css */
.entry {
color: red;
}
================================================================================
TestCSSAtImportConditionsBundleExternal
---------- /out.css ----------
@import "https://example.com/print.css" print;
/* entry.css */
================================================================================
TestCSSAtImportConditionsBundleExternalConditionWithURL
---------- /out.css ----------
@import "https://example.com/foo.css" (foo: url(foo.png)) and (bar: url(bar.png));
/* entry.css */
================================================================================
TestCSSAtImportConditionsNoBundle
---------- /out.css ----------
@import "./print.css" print;
================================================================================
TestCSSAtImportExtensionOrderCollision
---------- /out.css ----------
/* test.css */
.css {
color: red;
}
/* entry.css */
================================================================================
TestCSSAtImportExternal
---------- /out/entry.css ----------
@charset "UTF-8";
@import "../external1.css";
@import "../external2.css";
@import "../external4.css";
@import "../external5.css";
@import "https://www.example.com/style2.css";
@import "../external3.css";
@import "https://www.example.com/style1.css";
@import "https://www.example.com/style3.css";
@import "../external5.css" screen;
/* internal.css */
.before {
color: red;
}
/* charset1.css */
.middle {
color: green;
}
/* charset2.css */
.after {
color: blue;
}
/* entry.css */
================================================================================
TestCSSEntryPoint
---------- /out.css ----------
/* entry.css */
body {
background: white;
color: black;
}
================================================================================
TestCSSExternalQueryAndHashMatchIssue1822
---------- /out.css ----------
/* entry.css */
a {
background: url(foo/bar.png?baz);
}
b {
background: url(foo/bar.png#baz);
}
================================================================================
TestCSSFromJSMissingStarImport
---------- /out/entry.js ----------
// entry.js
console.log(void 0);
---------- /out/entry.css ----------
/* a.css */
.a {
color: red;
}
================================================================================
TestCSSNestingOldBrowser
---------- /out/nested-@layer.css ----------
/* nested-@layer.css */
a {
@layer base {
color: red;
}
}
---------- /out/nested-@media.css ----------
/* nested-@media.css */
a {
@media screen {
color: red;
}
}
---------- /out/nested-ampersand-twice.css ----------
/* nested-ampersand-twice.css */
a {
&,
& {
color: red;
}
}
---------- /out/nested-ampersand-first.css ----------
/* nested-ampersand-first.css */
a {
&,
b {
color: red;
}
}
---------- /out/nested-attribute.css ----------
/* nested-attribute.css */
a {
[href] {
color: red;
}
}
---------- /out/nested-colon.css ----------
/* nested-colon.css */
a {
:hover {
color: red;
}
}
---------- /out/nested-dot.css ----------
/* nested-dot.css */
a {
.cls {
color: red;
}
}
---------- /out/nested-greaterthan.css ----------
/* nested-greaterthan.css */
a {
> b {
color: red;
}
}
---------- /out/nested-hash.css ----------
/* nested-hash.css */
a {
#id {
color: red;
}
}
---------- /out/nested-plus.css ----------
/* nested-plus.css */
a {
+ b {
color: red;
}
}
---------- /out/nested-tilde.css ----------
/* nested-tilde.css */
a {
~ b {
color: red;
}
}
---------- /out/toplevel-ampersand-twice.css ----------
/* toplevel-ampersand-twice.css */
&,
& {
color: red;
}
---------- /out/toplevel-ampersand-first.css ----------
/* toplevel-ampersand-first.css */
&,
a {
color: red;
}
---------- /out/toplevel-ampersand-second.css ----------
/* toplevel-ampersand-second.css */
a,
& {
color: red;
}
---------- /out/toplevel-attribute.css ----------
/* toplevel-attribute.css */
[href] {
color: red;
}
---------- /out/toplevel-colon.css ----------
/* toplevel-colon.css */
:hover {
color: red;
}
---------- /out/toplevel-dot.css ----------
/* toplevel-dot.css */
.cls {
color: red;
}
---------- /out/toplevel-greaterthan.css ----------
/* toplevel-greaterthan.css */
> b {
color: red;
}
---------- /out/toplevel-hash.css ----------
/* toplevel-hash.css */
#id {
color: red;
}
---------- /out/toplevel-plus.css ----------
/* toplevel-plus.css */
+ b {
color: red;
}
---------- /out/toplevel-tilde.css ----------
/* toplevel-tilde.css */
~ b {
color: red;
}
================================================================================
TestDataURLImportURLInCSS
---------- /out/entry.css ----------
/* entry.css */
a {
background: url(data:image/png;base64,iVBORw0KGgo=);
}
================================================================================
TestDeduplicateRules
---------- /out/yes0.css ----------
/* yes0.css */
a {
color: green;
color: red;
}
---------- /out/yes1.css ----------
/* yes1.css */
a {
color: green;
}
a {
color: red;
}
---------- /out/yes2.css ----------
/* yes2.css */
@media screen {
a {
color: red;
}
}
---------- /out/no0.css ----------
/* no0.css */
@media screen {
a {
color: red;
}
}
@media screen {
& a {
color: red;
}
}
---------- /out/no1.css ----------
/* no1.css */
@media screen {
a {
color: red;
}
}
@media screen {
a[x] {
color: red;
}
}
---------- /out/no2.css ----------
/* no2.css */
@media screen {
a {
color: red;
}
}
@media screen {
a.x {
color: red;
}
}
---------- /out/no3.css ----------
/* no3.css */
@media screen {
a {
color: red;
}
}
@media screen {
a#x {
color: red;
}
}
---------- /out/no4.css ----------
/* no4.css */
@media screen {
a {
color: red;
}
}
@media screen {
a:x {
color: red;
}
}
---------- /out/no5.css ----------
/* no5.css */
@media screen {
a:x {
color: red;
}
}
@media screen {
a:x(y) {
color: red;
}
}
---------- /out/no6.css ----------
/* no6.css */
@media screen {
a b {
color: red;
}
}
@media screen {
a + b {
color: red;
}
}
---------- /out/across-files.css ----------
/* across-files-0.css */
/* across-files-1.css */
a {
color: green;
}
/* across-files-2.css */
a {
color: red;
}
/* across-files.css */
---------- /out/across-files-url.css ----------
@import "http://example.com/some.css";
/* across-files-url-0.css */
/* across-files-url-1.css */
@font-face {
src: url(http://example.com/some.other.font);
}
/* across-files-url-2.css */
@font-face {
src: url(http://example.com/some.font);
}
/* across-files-url.css */
================================================================================
TestExternalImportURLInCSS
---------- /out/entry.css ----------
/* src/entry.css */
div:after {
content: 'If this is recognized, the path should become "../src/external.png"';
background: url(../src/external.png);
}
a {
background: url(http://example.com/images/image.png);
}
b {
background: url(https://example.com/images/image.png);
}
c {
background: url(//example.com/images/image.png);
}
d {
background: url(data:image/png;base64,iVBORw0KGgo=);
}
path {
fill: url(#filter);
}
================================================================================
TestFileImportURLInCSS
---------- /out/example-GDKWWYFY.data ----------
This is some data.
---------- /out/entry.css ----------
/* one.css */
a {
background: url(./example-GDKWWYFY.data);
}
/* two.css */
b {
background: url(./example-GDKWWYFY.data);
}
/* entry.css */
================================================================================
TestIgnoreURLsInAtRulePrelude
---------- /out/entry.css ----------
/* entry.css */
@supports (background: url(ignored.png)) {
a {
color: red;
}
}
================================================================================
TestImportCSSFromJS
---------- /out/entry.js ----------
// a.js
console.log("a");
// b.js
console.log("b");
---------- /out/entry.css ----------
/* a.css */
.a {
color: red;
}
/* b.css */
.b {
color: blue;
}
================================================================================
TestMetafileCSSBundleTwoToOne
---------- /out/js/UOATE6K4.js ----------
// foo/entry.js
console.log("foo");
---------- /out/css/DIO3TRUB.css ----------
/* common.css */
body {
color: red;
}
---------- /out/js/6ZCNL5VY.js ----------
// bar/entry.js
console.log("bar");
---------- metafile.json ----------
{
"inputs": {
"common.css": {
"bytes": 28,
"imports": []
},
"foo/entry.js": {
"bytes": 54,
"imports": [
{
"path": "common.css",
"kind": "import-statement",
"original": "../common.css"
}
],
"format": "esm"
},
"bar/entry.js": {
"bytes": 54,
"imports": [
{
"path": "common.css",
"kind": "import-statement",
"original": "../common.css"
}
],
"format": "esm"
}
},
"outputs": {
"out/js/UOATE6K4.js": {
"imports": [],
"exports": [],
"entryPoint": "foo/entry.js",
"cssBundle": "out/css/DIO3TRUB.css",
"inputs": {
"common.css": {
"bytesInOutput": 0
},
"foo/entry.js": {
"bytesInOutput": 20
}
},
"bytes": 36
},
"out/css/DIO3TRUB.css": {
"imports": [],
"inputs": {
"common.css": {
"bytesInOutput": 23
}
},
"bytes": 40
},
"out/js/6ZCNL5VY.js": {
"imports": [],
"exports": [],
"entryPoint": "bar/entry.js",
"cssBundle": "out/css/DIO3TRUB.css",
"inputs": {
"common.css": {
"bytesInOutput": 0
},
"bar/entry.js": {
"bytesInOutput": 20
}
},
"bytes": 36
}
}
}
================================================================================
TestPackageURLsInCSS
---------- /out/entry.css ----------
/* test.css */
.css {
color: red;
}
/* entry.css */
a {
background: url(data:image/png;base64,YS0x);
}
b {
background: url(data:image/png;base64,Yi0yLW5vZGVfbW9kdWxlcw==);
}
c {
background: url(data:image/png;base64,Yy0z);
}
================================================================================
TestTextImportURLInCSSText
---------- /out/entry.css ----------
/* entry.css */
a {
background: url(data:text/plain;base64,VGhpcyBpcyBzb21lIHRleHQu);
}