diff --git a/lib/css/CssParser.js b/lib/css/CssParser.js index bc56d1596..c0e435d56 100644 --- a/lib/css/CssParser.js +++ b/lib/css/CssParser.js @@ -495,6 +495,11 @@ class CssParser extends Parser { case CSS_MODE_AT_IMPORT_EXPECT_URL: throw new Error(`Expected URL for @import at ${start}`); case CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA: { + if (modeData.url === undefined) { + throw new Error( + `Expected URL for @import at ${modeData.atRuleStart}` + ); + } const semicolonPos = end; const { line: sl, column: sc } = locConverter.get( modeData.atRuleStart @@ -506,7 +511,7 @@ class CssParser extends Parser { .slice(modeData.lastPos, semicolonPos - 1) .trim(); const dep = new CssImportDependency( - modeData.url, + modeData.url.trim(), [modeData.start, end], modeData.layer, modeData.supports, @@ -514,6 +519,7 @@ class CssParser extends Parser { ); dep.setLoc(sl, sc, el, ec); module.addDependency(dep); + modeData = undefined; mode = CSS_MODE_TOP_LEVEL; break; } diff --git a/test/__snapshots__/ConfigTestCases.basictest.js.snap b/test/__snapshots__/ConfigTestCases.basictest.js.snap index 42e6774ea..86eb67d8a 100644 --- a/test/__snapshots__/ConfigTestCases.basictest.js.snap +++ b/test/__snapshots__/ConfigTestCases.basictest.js.snap @@ -138,12 +138,110 @@ body { background: green; } } +a { + color: red; +} + +a { + color: red; +} + +a { + color: red; +} + +a { + color: red; +} + +a { + color: red; +} + +a { + color: red; +} + +a { + color: red; +} + +a { + color: red; +} + +a { + color: red; +} + +@media screen and (orientation:landscape) { + a { + color: red; + } +} +@media SCREEN AND (ORIENTATION: LANDSCAPE) { + a { + color: red; + } +} +@media (min-width: 100px) { + a { + color: red; + } +} +.class { + content: \\"style.css\\"; + color: red; +} + +.class { + content: \\"style.css\\"; + color: red; +} + +.class { + content: \\"style.css\\"; + color: red; +} + +.class { + content: \\"style.css\\"; + color: red; +} + +.class { + content: \\"style4.css\\"; +} + +.class { + content: \\"style4.css\\"; +} + +.class { + content: \\"style4.css\\"; +} + +a { + color: red; +} + +@media layer { + a { + color: red; + } +} +@media unknown(default) unknown(display: flex) unknown { + + body { + background: red; + } +} body { background: red; } -head{--webpack-main:\\\\.\\\\/print\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=9,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=10,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=11,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=12,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=13,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=14,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=15,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=16,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=17,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=18,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=19,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=20,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=21,\\\\.\\\\/imported\\\\.css\\\\?2fc7,\\\\.\\\\/imported\\\\.css\\\\?8e23,\\\\.\\\\/imported\\\\.css\\\\?daf4,\\\\.\\\\/imported\\\\.css\\\\?7a8d,\\\\.\\\\/style\\\\.css;}", +head{--webpack-main:\\\\.\\\\/print\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=9,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=10,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=11,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=12,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=13,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=14,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=15,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=16,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=17,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=18,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=19,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=20,\\\\.\\\\/print\\\\.css\\\\?foo\\\\=21,\\\\.\\\\/imported\\\\.css\\\\?2fc7,\\\\.\\\\/imported\\\\.css\\\\?8e23,\\\\.\\\\/imported\\\\.css\\\\?daf4,\\\\.\\\\/imported\\\\.css\\\\?7a8d,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=4,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=5,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=6,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=7,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=8,\\\\.\\\\/style2\\\\.css\\\\?foo\\\\=9,\\\\.\\\\/style2\\\\.css\\\\?3989,\\\\.\\\\/style2\\\\.css\\\\?1933,\\\\.\\\\/style2\\\\.css\\\\?6611,\\\\.\\\\/style3\\\\.css\\\\?bar\\\\=1,\\\\.\\\\/style3\\\\.css\\\\?bar\\\\=2,\\\\.\\\\/style3\\\\.css\\\\?bar\\\\=3,\\\\.\\\\/style3\\\\.css\\\\?\\\\=bar4,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=1,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=2,\\\\.\\\\/style4\\\\.css\\\\?foo\\\\=3,\\\\.\\\\/style2\\\\.css\\\\?ee8c,\\\\.\\\\/style2\\\\.css\\\\?b7b2,\\\\.\\\\/style\\\\.css\\\\?8266,\\\\.\\\\/style\\\\.css\\\\?bc96;}", ] `; diff --git a/test/configCases/css/css-import/external.css b/test/configCases/css/css-import/external.css new file mode 100644 index 000000000..2da62ee07 --- /dev/null +++ b/test/configCases/css/css-import/external.css @@ -0,0 +1,3 @@ +body { + externally-imported: true; +} diff --git a/test/configCases/css/css-import/style.css b/test/configCases/css/css-import/style.css index b1dfb5f8d..87780b43c 100644 --- a/test/configCases/css/css-import/style.css +++ b/test/configCases/css/css-import/style.css @@ -29,6 +29,164 @@ @import "imported.css" supports(display: flex); @import "imported.css" screen, print; +@import url(style2.css?foo=1); +@import url('style2.css?foo=2'); +@import url("style2.css?foo=3"); +@IMPORT url(style2.css?foo=4); +@import URL(style2.css?foo=5); +@import url(style2.css?foo=6 ); +@import url( style2.css?foo=7); +@import url( style2.css?foo=8 ); +@import url( +style2.css?foo=9 +); +/*@import url(); +@import url(''); +@import url(""); +@import "style2.css?foo=10"; +@import 'style2.css?foo=11'; +@import ''; +@import ""; +@import " "; +@import "\ +"; +@import url(); +@import url(''); +@import url("");*/ +@import url(style2.css) screen and (orientation:landscape); +@import url(style2.css) SCREEN AND (ORIENTATION: LANDSCAPE); +@import url(style2.css)screen and (orientation:landscape); +@import url(style2.css) screen and (orientation:landscape); +@import url(style2.css) screen and (orientation:landscape); +@import url(style2.css) (min-width: 100px); +/*@import url(https://test.cases/path/../../../../configCases/css/css-import/external.css);*/ +/*@import url(https://test.cases/path/../../../../configCases/css/css-import/external.css);*/ +/*@import url(https://test.cases/path/../../../../configCases/css/css-import/external.css#hash);*/ +/*@import url(https://test.cases/path/../../../../configCases/css/css-import/external.css?#hash);*/ +/*@import url(https://test.cases/path/../../../../configCases/css/css-import/external.css?foo=bar#hash);*/ +/*@import url(https://test.cases/path/../../../../configCases/css/css-import/external.css) screen and (orientation:landscape);*/ +/*@import url(https://test.cases/path/../../../../configCases/css/css-import/external.css) screen and (orientation:landscape);*/ +/*@import url("//example.com/style.css");*/ +/*@import url(~package/test.css);*/ +/*@import ;*/ +/*@import foo-bar;*/ +/*@import-normalize;*/ +/*@import url('http://') :root {}*/ +/*@import url('query.css?foo=1&bar=1');*/ +/*@import url('other-query.css?foo=1&bar=1#hash');*/ +/*@import url('other-query.css?foo=1&bar=1#hash') screen and (orientation:landscape);*/ +/*@import url('https://fonts.googleapis.com/css?family=Roboto');*/ +/*@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');*/ +/*@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC|Roboto');*/ + +@import './sty\ +le3.css?bar=1'; +@import './sty\ +\ +\ +le3.css?bar=2'; +@import url('./sty\ +le3.css?bar=3'); +@import url('./sty\ +\ +\ +le3.css?=bar4'); + +/*@import "./te'st.css";*/ +/*@import url("./te'st.css");*/ +/*@import './te\'st.css';*/ +/*@import url('./te\'st.css');*/ +/*@import './test test.css';*/ +/*@import url('./test test.css');*/ +/*@import './test\ test.css';*/ +/*@import url('./test\ test.css');*/ +/*@import './test%20test.css';*/ +/*@import url('./test%20test.css');*/ +/*@import './\74\65\73\74.css';*/ +/*@import url('./\74\65\73\74.css');*/ +/*@import './t\65\73\74.css';*/ +/*@import url('./t\65\73\74.css');*/ +/*@import url(./test\ test.css);*/ +/*@import url(./t\65st%20test.css);*/ +/*@import url('./t\65st%20test.css');*/ +/*@import url("./t\65st%20test.css");*/ +/*@import "./t\65st%20test.css";*/ +/*@import './t\65st%20test.css';*/ +/*@import url( test.css );*/ +/*@import nourl(test.css);*/ +/*@import '\*/ +/*\*/ +/*\*/ +/*';*/ +/*@import url('!!../../helpers/string-loader.js?esModule=false!~package/tilde.css');*/ +/*@import url(test.css?foo=bar);*/ +/*@import url(test.css?foo=bar#hash);*/ +/*@import url(test.css?#hash);*/ +/*@import "test.css" supports(display: flex);*/ +/*@import "test.css" supports(display: flex) screen and (orientation:landscape);*/ + +@import " ./style4.css?foo=1 "; +@import url(' ./style4.css?foo=2 '); +@import url( ./style4.css?foo=3 ); + +/*@import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D);*/ + +/*@import url(' https://fonts.googleapis.com/css?family=Roboto ');*/ +/*@import url('!!../../helpers/string-loader.js?esModule=false!');*/ +/*@import url(' !!../../helpers/string-loader.js?esModule=false!~package/tilde.css ');*/ +/*@import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D);*/ + +/*!*!* Prefer relative *!* +/*@import url(package/first.css);*/ +/*@import url(package/second.css);*/ + +/*@import url("./style5.css") supports();*/ +/*@import url("./test.css") supports(unknown);*/ +/*@import url("./test.css") supports(display: flex);*/ +/*@import url("./test.css") supports(display: flex !important);*/ +/*@import url("./test.css") supports(display: flex) screen and (min-width: 400px);*/ +/*@import url("./test.css") layer;*/ +/*@import url("./test.css") layer(default);*/ +/*@import url("./test.css") layer(default) supports(display: flex) screen and (min-width: 400px);*/ +/*@import url("./test.css") layer supports(display: flex) screen and (min-width: 400px);*/ +/*@import url("./test.css") layer() supports(display: flex) screen and (min-width: 400px);*/ +/*@import url("./test.css") layer();*/ +/*@import url("http://example.com/style.css") supports(display: flex) screen and (min-width: 400px);*/ +/*@import url("./test.css")layer(default)supports(display: flex)screen and (min-width:400px);*/ +/*@import url("./test.css")screen and (min-width: 400px);*/ +/*@import url("./test.css") layer( default ) supports( display : flex ) screen and ( min-width : 400px );*/ +/*@import url("./test.css") LAYER(DEFAULT) SUPPORTS(DISPLAY: FLEX) SCREEN AND (MIN-WIDTH: 400PX);*/ +/*@import url("./test.css") !* Comment *! layer(!* Comment *!default!* Comment *!) !* Comment *! supports(!* Comment *!display!* Comment *!:!* Comment *! flex!* Comment *!)!* Comment *! screen!* Comment *! and!* Comment *! (!* Comment *!min-width!* Comment *!: !* Comment *!400px!* Comment *!);*/ +/*@import url(test.css) !* Comment *!;*/ +/*@import !* Comment *! url(test.css) !* Comment *!;*/ +/*@import url(test.css) !* Comment *! print and (orientation:landscape);*/ +/*@import !* Comment *! url(test.css) !* Comment *! print and (orientation:landscape);*/ + +/*@import url("./import-with-media.css") screen and (min-width: 400px);*/ +/*@import url("./deep-import-with-media.css") (prefers-color-scheme: dark);*/ +/*@import url("./import-with-supports.css") supports(display: flex);*/ +/*@import url("./import-with-supports.css") supports(((display: flex)));*/ +/*@import url("./deep-import-with-supports.css") supports(display: flex);*/ +/*@import url('./test.css') supports(display: grid);*/ +/*@import url("./import-with-supports-and-media.css") supports(display: flex) screen and (min-width: 400px);*/ +/*@import url("./import-deep-with-supports-and-media.css") supports(display: flex) screen and (min-width: 400px);*/ +/*@import url("./test.css") layer(framework);*/ +/*@import url("./import-with-layer.css") layer(framework);*/ +/*@import url("./deep-import-with-layer.css") layer(framework);*/ +/*@import url("./import-multiple-with-layer.css") layer(default);*/ +/*@import url("./import-with-layer-unnamed.css") layer(default);*/ +/*@import url("./import-unnamed-layer.css") layer(base);*/ +/*@import url("./import-multiple-unnamed-layer.css") layer(base);*/ +/*@import url("./import-with-layer-and-supports.css") layer(default) supports(display: flex);*/ +/*@import url("./import-with-layer-and-supports-and-media.css") layer(default) supports(display: flex) screen and (min-width: 400px);*/ + +/* anonymous */ +@import "style2.css" layer(); +@import "style2.css" layer; + +/* All unknown parser as media for compatibility */ +@import url("./style.css") unknown(default) unknown(display: flex) unknown; + body { background: red; } diff --git a/test/configCases/css/css-import/style2.css b/test/configCases/css/css-import/style2.css new file mode 100644 index 000000000..195b6bcf6 --- /dev/null +++ b/test/configCases/css/css-import/style2.css @@ -0,0 +1,3 @@ +a { + color: red; +} diff --git a/test/configCases/css/css-import/style3.css b/test/configCases/css/css-import/style3.css new file mode 100644 index 000000000..3da7fa6f9 --- /dev/null +++ b/test/configCases/css/css-import/style3.css @@ -0,0 +1,4 @@ +.class { + content: "style.css"; + color: red; +} diff --git a/test/configCases/css/css-import/style4.css b/test/configCases/css/css-import/style4.css new file mode 100644 index 000000000..ffafcc6bc --- /dev/null +++ b/test/configCases/css/css-import/style4.css @@ -0,0 +1,3 @@ +.class { + content: "style4.css"; +} diff --git a/test/configCases/css/css-import/style5.css b/test/configCases/css/css-import/style5.css new file mode 100644 index 000000000..762f796a6 --- /dev/null +++ b/test/configCases/css/css-import/style5.css @@ -0,0 +1,3 @@ +.class { + content: "style5.css"; +}