/(@[^@{};]+(?:;|(({(?:(?>[^{}"']+|\s+|"(?:\\\\|\\"|\\\n|[^"\n])*?"|'(?:\\\\|\\'|\\\n|[^'\n])*?')|(?-2))*})))|[^@{}\s][^@{}]*(({(?:(?>[^{}"']+|\s+|"(?:\\\\|\\"|\\\n|[^"\n])*?"|'(?:\\\\|\\'|\\\n|[^'\n])*?')|(?-2))*})))/su

【1】 @import url("a%40b%7Bc%7Dd%3Be.css");
【2】 @import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
【3】 @import url("flexy.css") supports(not (display: grid) and (display: flex)) screen
  and (max-width: 400px);
【4】 @import url("lands%cape.css") screen and (orientation: landscape);
【5】 @import url("whatever.css") supports((selector(h2 > p)) and
    (font-tech(color-COLRv1)));
【6】 @import "foo1.css";
【7】 @import "foo2.css" layer(layer-name) supports(display:inline);
【8】 @import "foo3.css" supports(display:inline), screen;
【9】 @import "tes!#$%^&*()_+-=\][|?><,./t.css" aaabbbb;
【10】 @import url('https://fonts.googleapis.com/css2?family=Comforter&display=swap');
【11】 .test {
	margin:30px;
	padding:30px;
	border:1px solid black;
	font-family: 'Comforter', cursive;
	font-size:64px;
	color:green;
}
【12】 .test:hover{
	color:red;
}