Add inline stylesheets

package.json

@@ -5,13 +5,15 @@
   "main": "src/index",
   "scripts": {
     "test-inline-script-tags": "inline-script-tags test/testInlineScriptTags/index.html index.html; cat index.html",
+    "test-inline-stylesheets": "inline-stylesheets test/testInlineStylesheets/index.html index.html; cat index.html",
     "test-inline-requires": "inline-requires test/testInlineRequires/main.js temp.js; cat temp.js; echo '\n'; node temp.js",
     "test-inline-requires-2": "inline-requires test/testInlineRequires/nested/main2.js temp.js; cat temp.js; echo '\n'; node temp.js",
     "test-inline-environment-variables": "PORT=3000 inline-environment-variables test/testInlineEnvironmentVariables/main.js temp.js; cat temp.js",
     "postversion": "git push && npm publish"
   },
   "bin": {
     "inline-script-tags": "src/cli/inlineScriptTags.js",
+    "inline-stylesheets": "src/cli/inlineStylesheets.js",
     "inline-requires": "src/cli/inlineRequires.js",
     "inline-environment-variables": "src/cli/inlineEnvironmentVariables.js"
   },

readme.md

@@ -4,6 +4,8 @@ This package contains scripts that help build client code:
 
 - `inline-script-tags` inlines files referenced by `<script>` tags into an output HTML.
 
+- `inline-stylesheets` inlines stylesheets referenced by `<link>` tags into an output HTML.
+
 - `inline-requires` bundles `require` dependencies inside a single output JS.
 
 - `inline-environment-variables` replaces references to `process.env.<envVarName>` with their values in a JS file.
@@ -28,13 +30,38 @@ console.log('Welcome');
 ```
 
 `$ inline-scripts src/index.html out/index.html`
- 
+
 ```html
 <!-- out/index.html -->
 <p>Welcome</p>
 <script>console.log('Welcome');</script>
 ```
 
+## `inline-stylesheets`
+
+```html
+<!-- src/index.html -->
+<p>Welcome</p>
+<link rel="stylesheet" href="style.css">
+```
+
+```css
+/* src/style.css */
+body {
+	color: red;
+}
+```
+
+`$ inline-stylesheets src/index.html out/index.html`
+
+```html
+<!-- out/index.html -->
+<p>Welcome</p>
+<style>body {
+	color: red;
+}</style>
+```
+
 ## `inline-requires`
 
 ```js
@@ -55,7 +82,7 @@ module.exports = {
 ```
 
 `$ inline-requires src/main.js out/main.js`
- 
+
 ```js
 // out/main.js
 let dependencies = {
@@ -111,7 +138,7 @@ console.log('server URL is' + 'https://api.github.com');
 
 ## Note on parameters
 
-All 3 scripts usually take 2 parameters: the input and output files. 
+All scripts usually take 2 parameters: the input and output files.
 
 `$ inline-scripts src/index.html out/index.html .`
 
@@ -123,4 +150,4 @@ For convenience, if the 2nd parameter is `.`, the output will replace the input
 
 `const {inlineEnvironmentVariables, inlineRequires, inlineScriptTags} = require(inline-scripts);`
 
-Each of the functions take a string path to the entry file as their single parameter and return a proimse that resolves to the computed output.
+Each of the functions take a string path to the entry file as their single parameter and return a promise that resolves to the computed output.

src/cli/inlineStylesheets.js

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+
+const wrapper = require('./wrapper');
+const script = require('../inlineStylesheets');
+
+wrapper(script);

src/inlineRequires.js

@@ -4,7 +4,7 @@ const fs = require('fs').promises;
 const path = require('path');
 
 let getDependencies = async jsPath => {
-	const requireRegex = /require\([`'"]([\w\/.]*)[`'"]\)/;
+	const requireRegex = /require\([`'"]([\w\-\/.]*)[`'"]\)/;
 
 	let added = [];
 	let pending = [path.resolve(jsPath)];

src/inlineScriptTags.js

@@ -4,7 +4,7 @@ const fs = require('fs').promises;
 const path = require('path');
 
 let inlineHtmlScripts = async htmlPath => {
-	const scriptTagRegex = /<script src="([\w.\/]+)"><\/script>/;
+	const scriptTagRegex = /<script src="([\w.\-\/]+)"><\/script>/;
 	let html = await fs.readFile(htmlPath, 'utf8');
 	let scriptPromises = html
 		.match(new RegExp(scriptTagRegex, 'g'))

src/inlineStylesheets.js

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+
+const fs = require('fs').promises;
+const path = require('path');
+
+let inlineHtmlStyles = async htmlPath => {
+	const linkTagRegex = /<link (?:.* )?rel="stylesheet"(?:.* )?href="([\w.\-\/]+)".*>|<link (?:.* )?href="([\w.\-\/]+)"(?:.* )?rel="stylesheet".*>/;
+	let html = await fs.readFile(htmlPath, 'utf8');
+	let stylesheetPromises = html
+		.match(new RegExp(linkTagRegex, 'g'))
+		.map(linkTag => {
+			let m = linkTag.match(linkTagRegex);
+			return m[1] || m[2];
+		})
+		.map(relPath => path.resolve(path.dirname(htmlPath), relPath))
+		.map(stylesheetPath => fs.readFile(stylesheetPath, 'utf8'));
+	let i = 0;
+	return Promise.all(stylesheetPromises).then(stylesheets =>
+		html.replace(new RegExp(linkTagRegex, 'g'), () =>
+			`<style>${stylesheets[i++]}</style>`));
+};
+
+module.exports = inlineHtmlStyles;

test/testInlineScriptTags/index.html

@@ -1,3 +1,9 @@
-<p>Welcome</p>
+<p>hi from index.html</p>
 
-<script src="main.js"></script>
+<script src="myScript.js"></script>
+
+<p>line 2</p>
+
+<script src="nested/myNestedScript.js"></script>
+
+<p>line 3</p>

test/testInlineStylesheets/index.html

@@ -0,0 +1,20 @@
+Link tags without `rel="stylesheet"` should not be replaced.
+
+Not a stylesheet
+<link href="/author.html" rel="author">
+
+Missing rel attribute
+<link href="myStyle.css">
+
+Incorrect syntax
+<linkrel="stylesheet" href="myStyle.css">
+
+
+Link tags with `rel="stylesheet"` should be replaced.
+
+<link href="myStyle.css" rel="stylesheet">
+
+Space between attributes is optional
+<link rel="stylesheet"href="myStyle.css">
+
+<link href="nested/myNestedStylesheet.css" rel="stylesheet" />

test/testInlineStylesheets/myStyle.css

@@ -0,0 +1,3 @@
+p {
+    background: red;
+}

test/testInlineStylesheets/nested/myNestedStylesheet.css

@@ -0,0 +1,3 @@
+p {
+    color: green;
+}