less.js
less.js copied to clipboard
less
less with @import on main thread - Chrome > 101
To reproduce:
<html>
<head>
<style type="text/less">
@import "test.less";
</style>
<script src="less.js"></script>
<script>
console.log("script resumed at main page");
<script>
</head>
<body>
test
</body>
</html>
// less code here test.css
body {
background-color: red;
}
Current behavior:
Chrome version > 101 - after less imports the test.less - the control never comes back to main page to continue the processing Chrome version < 101 - Everything works well
Environment information:
Tested with all versions of less to same result.
You make wrong script tag.
You make this.
<script> console.log("script resumed at main page"); </script>
More information:
This fails:
<style media="screen" type="text/less">
@fontSize: 12px;
@import url(/css/default/styles.less);
</style>
<style media="screen" type="text/less">
@import url(/css/default/login.less);
</style>
But this works fine:
<style media="screen" type="text/less">
@fontSize: 12px;
@import url(/css/default/styles.less);
@import url(/css/default/login.less);
</style>
And this is working, too:
<style media="screen" type="text/less">
@import url(/css/default/styles.less);
</style>
<style media="screen" type="text/less">
@import url(/css/default/login.less);
</style>
The content of the .less files don't matter, in this test they were completely empty.
The issue also occurs if the page content is replaced by JavaScript and the new content contains another
To make it even worse it seems that the problem is also triggered when the second imported less file itself contains variable definitions.