Add transparentBackground option

Fixes #16

Author: sindresorhus

cli.js

@@ -9,22 +9,23 @@ const cli = meow(
     github-markdown-css > <filename>
 
   Options
-    --list                List available themes
+    --list                     List available themes
 
     Set theme:
-    --light               Light theme name from --list values
-    --dark                Dark theme name from --list values
-    --theme               Theme name: 'auto', light', 'dark', or another from --list values.
-                          'auto' means using the media query (prefers-color-scheme)
-                          to switch between the 'light' and 'dark' theme.
+    --light                    Light theme name from --list values
+    --dark                     Dark theme name from --list values
+    --theme                    Theme name: 'auto', light', 'dark', or another from --list values.
+                               'auto' means using the media query (prefers-color-scheme)
+                               to switch between the 'light' and 'dark' theme.
 
     Output options:
-    --preserve-variables   Preserve variables in the output. Only applies if light
-                           and dark themes match or if type is not 'auto'
-    --only-style           Only output the styles, forces --preserve-variables on
-    --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'
+    --preserve-variables       Preserve variables in the output. Only applies if light
+                               and dark themes match or if type is not 'auto'
+    --only-style               Only output the styles, forces --preserve-variables on
+    --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'
+    --transparent-background   Make the background transparent instead of white/black
 
   Examples
     $ github-markdown-css --list
@@ -79,6 +80,9 @@ const cli = meow(
 				type: 'boolean',
 				default: true,
 			},
+			transparentBackground: {
+				type: 'boolean',
+			},
 		},
 	},
 );
@@ -91,6 +95,7 @@ const {
 	onlyVariables,
 	rootSelector,
 	useFixture,
+	transparentBackground,
 } = cli.flags;
 
 let {light, dark} = cli.flags;
@@ -147,5 +152,6 @@ console.log(
 		onlyVariables,
 		rootSelector,
 		useFixture,
+		transparentBackground,
 	}),
 );

index.js

@@ -230,6 +230,7 @@ In "single" mode, the output will apply the values of all variables to the rules
 @param {boolean} [options.onlyStyles=false] - Only output the style part of the CSS without any variables. Forces `preserveVariables` to be `true` and ignores the theme values. Useful to get the base styles to use multiple themes.
 @param {boolean} [options.useFixture=true] - Include extra styles from GitHub Flavored Markdown, like code snippets.
 @param {string} [options.rootSelector=.markdown-body] - Set the root selector of the rendered Markdown body as it should appear in the output CSS. Defaults to `.markdown-body`.
+@param {boolean} [options.transparentBackground=false] - If `true`, the background color will be set to `transparent`. Useful when you want to embed the Markdown content in a page with a custom background color.
 */
 // eslint-disable-next-line complexity
 export default async function getCSS({
@@ -241,6 +242,7 @@ export default async function getCSS({
 	onlyStyles = false,
 	useFixture = true,
 	rootSelector = '.markdown-body',
+	transparentBackground = false,
 } = {}) {
 	if (onlyVariables && onlyStyles) {
 		// Would result in an empty output
@@ -300,6 +302,21 @@ export default async function getCSS({
 		return colors.join('\n');
 	}
 
+	if (transparentBackground) {
+		for (const theme of [colors[light], colors[dark], colors.shared]) {
+			if (!theme) {
+				continue;
+			}
+
+			const property = '--bgColor-default';
+			const index = theme.findIndex(declaration => declaration.prop === property);
+			if (index !== -1) {
+				theme[index].value = 'transparent';
+				theme[property] = 'transparent';
+			}
+		}
+	}
+
 	rules = reverseUnique(rules, rule => rule.toString());
 
 	rules = classifyRules(rules).rules;

readme.md

@@ -46,6 +46,9 @@ console.log(await githubMarkdownCss({
 		// Set the root selector of the rendered Markdown body as it should appear
 		// in the output CSS. Defaults to `.markdown-body`.
 		rootSelector: '.markdown-body',
+		// Make the background transparent instead of white/black. Useful when
+		// embedding the Markdown content in a page with a custom background.
+		transparentBackground: false,
 	}
 ));
 //=> '.markdown-body { …'
@@ -64,22 +67,23 @@ $ github-markdown-css --help
     github-markdown-css > <filename>
 
   Options
-    --list                List available themes
+    --list                     List available themes
 
     Set theme:
-    --light               Light theme name from --list values
-    --dark                Dark theme name from --list values
-    --theme               Theme name: 'auto', light', 'dark', or another from --list values.
-                          'auto' means using the media query (prefers-color-scheme)
-                          to switch between the 'light' and 'dark' theme.
+    --light                    Light theme name from --list values
+    --dark                     Dark theme name from --list values
+    --theme                    Theme name: 'auto', light', 'dark', or another from --list values.
+                               'auto' means using the media query (prefers-color-scheme)
+                               to switch between the 'light' and 'dark' theme.
 
     Output options:
-    --preserve-variables   Preserve variables in the output. Only applies if light
-                           and dark themes match or if type is not 'auto'
-    --only-style           Only output the styles, forces --preserve-variables on
-    --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'
+    --preserve-variables       Preserve variables in the output. Only applies if light
+                               and dark themes match or if type is not 'auto'
+    --only-style               Only output the styles, forces --preserve-variables on
+    --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'
+    --transparent-background   Make the background transparent instead of white/black
 
   Examples
     $ github-markdown-css --list

test.js

@@ -1,4 +1,6 @@
+import assert from 'node:assert/strict';
 import fs from 'node:fs';
+import {test} from 'node:test';
 import {renderMarkdown} from './utilities.js';
 import githubMarkdownCss from './index.js';
 
@@ -87,3 +89,28 @@ ${fixture}
 `;
 
 fs.writeFileSync('dist/vars/index.html', htmlVars);
+
+test('transparentBackground - auto mode', async () => {
+	const css = await githubMarkdownCss({transparentBackground: true});
+	assert.ok(css.includes('--bgColor-default: transparent'), 'should set --bgColor-default to transparent in auto mode');
+});
+
+test('transparentBackground - single mode inlines transparent', async () => {
+	const css = await githubMarkdownCss({light: 'light', dark: 'light', transparentBackground: true});
+	assert.ok(css.includes('background-color: transparent'), 'should inline transparent as background-color');
+});
+
+test('transparentBackground - single mode with preserveVariables', async () => {
+	const css = await githubMarkdownCss({light: 'dark', dark: 'dark', transparentBackground: true, preserveVariables: true});
+	assert.ok(css.includes('--bgColor-default: transparent'), 'should set --bgColor-default to transparent');
+});
+
+test('transparentBackground - onlyVariables', async () => {
+	const css = await githubMarkdownCss({transparentBackground: true, onlyVariables: true});
+	assert.ok(css.includes('--bgColor-default: transparent'), 'should set --bgColor-default to transparent');
+});
+
+test('no transparentBackground by default', async () => {
+	const css = await githubMarkdownCss();
+	assert.ok(!css.includes('--bgColor-default: transparent'), 'should not have transparent background by default');
+});