Currently, I am working on creating standalone error pages (404/503) as individual HTML files. My server-side setup involves Node.js, but these specific files will be hosted directly in Nginx. One of the challenges I am facing is automatically including a stylesheet at the top of an HTML document. I have been exploring options for tools that can assist with this task, yet my searches on platforms like Stack Overflow and Google primarily provide solutions for inline CSS used in emails, which is not what I require.
To provide context, let's consider the following example:
before.css
.body { color: black }before.html
<!DOCTYPE html>
<html>
<head>
<title>A Question</title>
<link rel="stylesheet" href="before.css">
</head>
<body>
<p>Here be the answer</p>
</body>
</html>Upon completing the process, I envision the file structure to transform into:
after.html
<!DOCTYPE html>
<html>
<head>
<title>A Question</title>
<style>.body { color: black }</style>
</head>
<body>
<p>Here be the answer</p>
</body>
</html>Ideally, I am seeking a solution that involves a Gulp plugin or suggestions on how to develop one. If necessary, I am willing to explore JavaScript implementations. It's worth noting that I already use EJS and Stylus to generate the original "before" files.
Thank you for your assistance.