From eecf9d8d66c33248896f5120cfc99fd57648ed49 Mon Sep 17 00:00:00 2001
From: Andrew E <andrewe@icloud.com>
Date: Mon, 22 Sep 2025 21:57:57 -0400
Subject: [PATCH] feat: `--include` flag to prepend `include.css`

added `--include` boolean flag to CLI options:

- reads `include.css` from package directory;
- replaces `root_selector` placeholders in `include.css` with actual root selector value; and
- prepends generated stylesheets with `include.css`
---
 cli.js       |  5 +++++
 include.css  | 12 ++++++++++++
 index.js     | 12 ++++++++++++
 package.json |  3 ++-
 readme.md    |  1 +
 5 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 include.css

diff --git a/cli.js b/cli.js
index f9f3e23..49d4511 100755
--- a/cli.js
+++ b/cli.js
@@ -75,6 +75,9 @@ const cli = meow(
 			rootSelector: {
 				type: 'string',
 			},
+			include: {
+				type: 'boolean',
+			},
 			useFixture: {
 				type: 'boolean',
 				default: true,
@@ -90,6 +93,7 @@ const {
 	onlyStyle,
 	onlyVariables,
 	rootSelector,
+	include,
 	useFixture,
 } = cli.flags;
 
@@ -146,6 +150,7 @@ console.log(
 		onlyStyles: onlyStyle,
 		onlyVariables,
 		rootSelector,
+		include,
 		useFixture,
 	}),
 );
diff --git a/include.css b/include.css
new file mode 100644
index 0000000..2a62792
--- /dev/null
+++ b/include.css
@@ -0,0 +1,12 @@
+root_selector {
+  box-sizing: border-box;
+  min-width: 200px;
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 45px;
+}
+@media (max-width: 767px) {
+  root_selector {
+    padding: 15px;
+  }
+}
diff --git a/index.js b/index.js
index 7f4de0e..eebc376 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,4 @@
+import fs from 'node:fs';
 import postcss from 'postcss';
 import {cachedFetch, getUniqueClasses, renderMarkdown, reverseUnique, unique, zip} from './utilities.js';
 import {ALLOW_CLASS, ALLOW_TAGS, manuallyAddedStyle} from './constants.js';
@@ -241,6 +242,7 @@ export default async function getCSS({
 	onlyStyles = false,
 	useFixture = true,
 	rootSelector = '.markdown-body',
+	include = false,
 } = {}) {
 	if (onlyVariables && onlyStyles) {
 		// Would result in an empty output
@@ -426,5 +428,15 @@ export default async function getCSS({
 		string = string.replaceAll('.markdown-body', rootSelector);
 	}
 
+	if (include) {
+		try {
+			const includeCss = fs.readFileSync(new URL('include.css', import.meta.url), 'utf8');
+			const processedIncludeCss = includeCss.replaceAll('root_selector', rootSelector);
+			string = processedIncludeCss + string;
+		} catch {
+			// If include.css doesn't exist, continue without it
+		}
+	}
+
 	return string;
 }
diff --git a/package.json b/package.json
index d53c335..f313ec6 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,8 @@
 		"cli.js",
 		"utilities.js",
 		"constants.js",
-		"fixture.md"
+		"fixture.md",
+		"include.css"
 	],
 	"keywords": [
 		"cli-app",
diff --git a/readme.md b/readme.md
index d2a7df5..a9409bb 100644
--- a/readme.md
+++ b/readme.md
@@ -80,6 +80,7 @@ $ github-markdown-css --help
     --only-variables       Only output the variables for the specified themes
     --no-use-fixture       Exclude generated classes that come from GitHub Markdown API rendered fixture.md
     --root-selector        Specify the root selector when outputting styles, default '.markdown-body'
+	--include              Prepends base styling and responsive padding
 
   Examples
     $ github-markdown-css --list