nolanlawson/imports.html

## imports.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS preparser: imports</title>
</head>
<body>
<h1>CSS preparser: imports</h1>
<pre id="display"></pre>
<script>
  const start = Date.now()
  while (Date.now() - start < 2000) {
    // block rendering
  }
</script>
<style>
    @import './one.css';
    @import './two.css';
</style>
<div>Hello world</div>
<script>
    display.innerHTML = performance
      .getEntriesByType('resource')
      .map(({ startTime, name }) => `${name.split('/').at(-1)} - startTime: ${startTime}ms`)
      .join('\n')
</script>
</body>
</html>

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Preparser tests</title>
</head>
<body>
<h1>Preparser tests</h1>
  <ul>
    <li>
      <a href="./links.html">Links</a>
    </li>
    <li>
      <a href="./imports.html">Imports</a>
    </li>
  </ul>
</body>
</html>

## links.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS preparser: links</title>
</head>
<body>
<h1>CSS preparser: links</h1>
<pre id="display"></pre>
<script>
  const start = Date.now()
  while (Date.now() - start < 2000) {
    // block rendering
  }
</script>
<link rel="stylesheet" href="./one.css">
<link rel="stylesheet" href="./two.css">
<div>Hello world</div>
<script>
  display.innerHTML = performance
    .getEntriesByType('resource')
    .map(({ startTime, name }) => `${name.split('/').at(-1)} - startTime: ${startTime}ms`)
    .join('\n')
</script>
</body>
</html>

## one.css
div {
    background: darkorange;
}

## two.css
div {
    color: white;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>CSS preparser: imports</title>
	</head>
	<body>
	<h1>CSS preparser: imports</h1>
	<pre id="display"></pre>
	<script>
	const start = Date.now()
	while (Date.now() - start < 2000) {
	// block rendering
	}
	</script>
	<style>
	@import './one.css';
	@import './two.css';
	</style>
	<div>Hello world</div>
	<script>
	display.innerHTML = performance
	.getEntriesByType('resource')
	.map(({ startTime, name }) => `${name.split('/').at(-1)} - startTime: ${startTime}ms`)
	.join('\n')
	</script>
	</body>
	</html>