new approach to stripping leading whitespace

source/_includes/function.liquid

@@ -1,5 +1,5 @@
-{%- for name in names offset: 1 -%}<div id="{{ name }}">{%- endfor -%}
-  <div class="sl-c-callout sl-c-callout--function" id="{{ names[0] }}"><pre class="signature language-scss"><a class="anchor" href="#{{ names[0] }}"></a><code class="language-scss">{{ signatures }}{% if returns %} <span class="token comment">//=&gt; {{ returns }}</span>{% endif %}</code></pre>
-    {{ content }}
-  </div>
-{%- for name in names offset: 1 -%}</div>{%- endfor -%}
+{% for name in names offset: 1 %}<div id="{{ name }}">{% endfor %}
+<div class="sl-c-callout sl-c-callout--function" id="{{ names[0] }}"><pre class="signature language-scss"><a class="anchor" href="#{{ names[0] }}"></a><code class="language-scss">{{ signatures }}{% if returns %} <span class="token comment">//=&gt; {{ returns }}</span>{% endif %}</code></pre>
+  {{ content }}
+</div>
+{% for name in names offset: 1 %}</div>{% endfor %}

source/documentation/modules/color.md

@@ -254,16 +254,14 @@ title: sass:color
   the HSL lightness of `$color` by that amount.
 
   {% headsUp %}
-    {% stripIndent %}
-      The `darken()` function decreases lightness by a fixed amount, which is
-      often not the desired effect. To make a color a certain percentage darker
-      than it was before, use [`color.scale()`](#scale) instead.
+    The `darken()` function decreases lightness by a fixed amount, which is
+    often not the desired effect. To make a color a certain percentage darker
+    than it was before, use [`color.scale()`](#scale) instead.
 
-      Because `darken()` is usually not the best way to make a color darker,
-      it's not included directly in the new module system. However, if you have
-      to preserve the existing behavior, `darken($color, $amount)` can be
-      written [`color.adjust($color, $lightness: -$amount)`](#adjust).
-    {% endstripIndent %}
+    Because `darken()` is usually not the best way to make a color darker, it's
+    not included directly in the new module system. However, if you have to
+    preserve the existing behavior, `darken($color, $amount)` can be written
+    [`color.adjust($color, $lightness: -$amount)`](#adjust).
 
     {% codeExample 'color-darken', false %}
       // #036 has lightness 20%, so when darken() subtracts 30% it just returns black.
@@ -308,17 +306,14 @@ title: sass:color
   the HSL saturation of `$color` by that amount.
 
   {% headsUp %}
-    {% stripIndent %}
-      The `desaturate()` function decreases saturation by a fixed amount, which
-      is often not the desired effect. To make a color a certain percentage less
-      saturated than it was before, use [`color.scale()`](#scale) instead.
+    The `desaturate()` function decreases saturation by a fixed amount, which is
+    often not the desired effect. To make a color a certain percentage less
+    saturated than it was before, use [`color.scale()`](#scale) instead.
 
-      Because `desaturate()` is usually not the best way to make a color less
-      saturated, it's not included directly in the new module system. However,
-      if you have to preserve the existing behavior, `desaturate($color,
-      $amount)` can be written [`color.adjust($color, $saturation:
-      -$amount)`](#adjust).
-    {% endstripIndent %}
+    Because `desaturate()` is usually not the best way to make a color less
+    saturated, it's not included directly in the new module system. However, if
+    you have to preserve the existing behavior, `desaturate($color, $amount)`
+    can be written [`color.adjust($color, $saturation: -$amount)`](#adjust).
 
     {% codeExample 'color-desaturate', false %}
       // #d2e1dd has saturation 20%, so when desaturate() subtracts 30% it just
@@ -505,16 +500,14 @@ title: sass:color
   the HSL lightness of `$color` by that amount.
 
   {% headsUp %}
-    {% stripIndent %}
-      The `lighten()` function increases lightness by a fixed amount, which is
-      often not the desired effect. To make a color a certain percentage lighter
-      than it was before, use [`scale()`](#scale) instead.
+    The `lighten()` function increases lightness by a fixed amount, which is
+    often not the desired effect. To make a color a certain percentage lighter
+    than it was before, use [`scale()`](#scale) instead.
 
-      Because `lighten()` is usually not the best way to make a color lighter,
-      it's not included directly in the new module system. However, if you have
-      to preserve the existing behavior, `lighten($color, $amount)` can be
-      written [`adjust($color, $lightness: $amount)`](#adjust).
-    {% endstripIndent %}
+    Because `lighten()` is usually not the best way to make a color lighter,
+    it's not included directly in the new module system. However, if you have to
+    preserve the existing behavior, `lighten($color, $amount)` can be written
+    [`adjust($color, $lightness: $amount)`](#adjust).
 
     {% codeExample 'color-lighten', false %}
       // #e1d7d2 has lightness 85%, so when lighten() adds 30% it just returns white.
@@ -606,17 +599,14 @@ title: sass:color
   alpha channel of `$color` by that amount.
 
   {% headsUp %}
-    {% stripIndent %}
-      The `opacify()` function increases the alpha channel by a fixed amount,
-      which is often not the desired effect. To make a color a certain
-      percentage more opaque than it was before, use [`scale()`](#scale)
-      instead.
+    The `opacify()` function increases the alpha channel by a fixed amount,
+    which is often not the desired effect. To make a color a certain percentage
+    more opaque than it was before, use [`scale()`](#scale) instead.
 
-      Because `opacify()` is usually not the best way to make a color more
-      opaque, it's not included directly in the new module system. However, if
-      you have to preserve the existing behavior, `opacify($color, $amount)` can
-      be written [`adjust($color, $alpha: -$amount)`](#adjust).
-    {% endstripIndent %}
+    Because `opacify()` is usually not the best way to make a color more opaque,
+    it's not included directly in the new module system. However, if you have to
+    preserve the existing behavior, `opacify($color, $amount)` can be written
+    [`adjust($color, $alpha: -$amount)`](#adjust).
 
     {% codeExample 'color-opacify', false %}
       // rgba(#036, 0.7) has alpha 0.7, so when opacify() adds 0.3 it returns a fully
@@ -678,16 +668,14 @@ title: sass:color
   the HSL saturation of `$color` by that amount.
 
   {% headsUp %}
-    {% stripIndent %}
-      The `saturate()` function increases saturation by a fixed amount, which is
-      often not the desired effect. To make a color a certain percentage more
-      saturated than it was before, use [`scale()`](#scale) instead.
+    The `saturate()` function increases saturation by a fixed amount, which is
+    often not the desired effect. To make a color a certain percentage more
+    saturated than it was before, use [`scale()`](#scale) instead.
 
-      Because `saturate()` is usually not the best way to make a color more
-      saturated, it's not included directly in the new module system. However,
-      if you have to preserve the existing behavior, `saturate($color, $amount)`
-      can be written [`adjust($color, $saturation: $amount)`](#adjust).
-    {% endstripIndent %}
+    Because `saturate()` is usually not the best way to make a color more
+    saturated, it's not included directly in the new module system. However, if
+    you have to preserve the existing behavior, `saturate($color, $amount)` can
+    be written [`adjust($color, $saturation: $amount)`](#adjust).
 
     {% codeExample 'color-saturate', false %}
       // #0e4982 has saturation 80%, so when saturate() adds 30% it just becomes
@@ -803,18 +791,16 @@ title: sass:color
   alpha channel of `$color` by that amount.
 
   {% headsUp %}
-    {% stripIndent %}
-      The `transparentize()` function decreases the alpha channel by a fixed
-      amount, which is often not the desired effect. To make a color a certain
-      percentage more transparent than it was before, use
-      [`color.scale()`](#scale) instead.
+    The `transparentize()` function decreases the alpha channel by a fixed
+    amount, which is often not the desired effect. To make a color a certain
+    percentage more transparent than it was before, use
+    [`color.scale()`](#scale) instead.
 
-      Because `transparentize()` is usually not the best way to make a color
-      more transparent, it's not included directly in the new module system.
-      However, if you have to preserve the existing behavior,
-      `transparentize($color, $amount)` can be written [`color.adjust($color,
-      $alpha: -$amount)`](#adjust).
-    {% endstripIndent %}
+    Because `transparentize()` is usually not the best way to make a color more
+    transparent, it's not included directly in the new module system. However,
+    if you have to preserve the existing behavior, `transparentize($color,
+    $amount)` can be written [`color.adjust($color, $alpha:
+    -$amount)`](#adjust).
 
     {% codeExample 'transparentize', false %}
       // rgba(#036, 0.3) has alpha 0.3, so when transparentize() subtracts 0.3 it

source/documentation/modules/index.md

@@ -112,15 +112,13 @@ Sass provides the following built-in modules:
   `0%` and `100%` (inclusive).
 
   {% funFact %}
-    {% stripIndent %}
-      You can pass [special functions][] like `calc()` or `var()` in place of
-      any argument to `hsl()`. You can even use `var()` in place of multiple
-      arguments, since it might be replaced by multiple values! When a color
-      function is called this way, it returns an unquoted string using the same
-      signature it was called with.
+    You can pass [special functions][] like `calc()` or `var()` in place of any
+    argument to `hsl()`. You can even use `var()` in place of multiple
+    arguments, since it might be replaced by multiple values! When a color
+    function is called this way, it returns an unquoted string using the same
+    signature it was called with.
 
-      [special functions]: /documentation/syntax/special-functions
-    {% endstripIndent %}
+    [special functions]: /documentation/syntax/special-functions
 
     {% codeExample 'hsl-special', false %}
       @debug hsl(210deg 100% 20% / var(--opacity)); // hsl(210deg 100% 20% / var(--opacity))
@@ -202,15 +200,13 @@ Sass provides the following built-in modules:
   [unitless]: /documentation/values/numbers#units
 
   {% funFact %}
-    {% stripIndent %}
-      You can pass [special functions][] like `calc()` or `var()` in place of
-      any argument to `rgb()`. You can even use `var()` in place of multiple
-      arguments, since it might be replaced by multiple values! When a color
-      function is called this way, it returns an unquoted string using the same
-      signature it was called with.
+    You can pass [special functions][] like `calc()` or `var()` in place of any
+    argument to `rgb()`. You can even use `var()` in place of multiple
+    arguments, since it might be replaced by multiple values! When a color
+    function is called this way, it returns an unquoted string using the same
+    signature it was called with.
 
-      [special functions]: /documentation/syntax/special-functions
-    {% endstripIndent %}
+    [special functions]: /documentation/syntax/special-functions
 
     {% codeExample 'rgb-special', false %}
       @debug rgb(0 51 102 / var(--opacity)); // rgb(0 51 102 / var(--opacity))

source/helpers/components/codeExample.ts

@@ -1,7 +1,7 @@
 import sass from 'sass';
-import stripIndent from 'strip-indent';
 
 import {liquidEngine} from '../engines';
+import {stripIndent} from '../type';
 
 /**
  * Renders a code example.
@@ -61,11 +61,10 @@ export default async function codeExample(
     throw new Error('`{% codeExample %}` tags require a unique name.');
   }
   const code = generateCodeExample(contents, autogenCSS, syntax);
-  const html = await liquidEngine.renderFile('code_examples/code_example', {
+  return liquidEngine.renderFile('code_examples/code_example', {
     code,
     exampleName,
   });
-  return html.trim();
 }
 
 const generateCodeExample = (

source/helpers/components/compatibility.ts

@@ -1,6 +1,5 @@
-import stripIndent from 'strip-indent';
-
 import {liquidEngine} from '../engines';
+import {stripIndent} from '../type';
 
 /**
  * Renders a status dashboard for each implementation's support for a feature.

source/helpers/components/index.ts

@@ -1,8 +1,8 @@
 import {highlight, languages} from 'prismjs';
 import PrismLoader from 'prismjs/components/index';
-import stripIndent from 'strip-indent';
 
 import {liquidEngine} from '../engines';
+import {stripIndent} from '../type';
 import {default as codeExample} from './codeExample';
 import {compatibility, implStatus} from './compatibility';
 import {getDocTocData, getToc} from './toc';
@@ -16,12 +16,10 @@ export {getDocTocData, getToc};
  * documentation.
  */
 export const funFact = async (contents: string, useMarkdown = true) => {
-  const html = await liquidEngine.renderFile('fun_fact', {
-    // Un-indent nested markup to prevent unwanted `<p>` tags.
-    contents: stripIndent(contents).replaceAll(/^ +</gm, '<'),
+  return liquidEngine.renderFile('fun_fact', {
+    contents: stripIndent(contents),
     useMarkdown,
   });
-  return html.trim();
 };
 
 /**
@@ -29,12 +27,10 @@ export const funFact = async (contents: string, useMarkdown = true) => {
  * documentation.
  */
 export const headsUp = async (contents: string, useMarkdown = true) => {
-  const html = await liquidEngine.renderFile('heads_up', {
-    // Un-indent nested markup to prevent unwanted `<p>` tags.
-    contents: stripIndent(contents).replaceAll(/^ +</gm, '<'),
+  return liquidEngine.renderFile('heads_up', {
+    contents: stripIndent(contents),
     useMarkdown,
   });
-  return html.trim();
 };
 
 /**

source/helpers/function.ts

@@ -1,8 +1,8 @@
 import * as cheerio from 'cheerio';
-import stripIndent from 'strip-indent';
 
 import {codeBlock} from './components';
 import {liquidEngine} from './engines';
+import {stripIndent} from './type';
 
 const links: Record<string, string> = {
   number: '/documentation/values/numbers',
@@ -77,13 +77,12 @@ export async function _function(content: string, ...signatures: string[]) {
   });
 
   // Render the final HTML
-  const html = await liquidEngine.renderFile('function', {
+  return liquidEngine.renderFile('function', {
     names,
     signatures: highlightedSignatures.join('\n'),
     content,
     returns: returns ? returnTypeLink(returns) : null,
   });
-  return html.trim();
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

source/helpers/type.ts

@@ -1,5 +1,5 @@
 import {LoremIpsum} from 'lorem-ipsum';
-import stripIndent from 'strip-indent';
+import stripInd from 'strip-indent';
 import truncate from 'truncate-html';
 import {typogrify} from 'typogr';
 
@@ -27,6 +27,25 @@ export const getLorem = (type: string, number = 1) => {
   return '';
 };
 
+/**
+ * Strips leading whitespace from each line of a string.
+ * First strips based on the line with the least amount of leading whitespace,
+ * then strips based on the whitespace of the first line.
+ *
+ * @see https://github.com/sindresorhus/strip-indent
+ */
+export const stripIndent = (contents: string) => {
+  // Strip leading whitespace based on line with least leading whitespace
+  let text = stripInd(contents);
+  // Find leading whitespace of first line (ignoring initial newlines)
+  const match = text.replace(/^[\n\r]/, '').match(/^[ \t]*(?=\S)/g);
+  if (match?.[0]?.length) {
+    // Strip leading whitespace based on first line
+    text = text.replaceAll(new RegExp(`^[ \\t]{${match[0].length}}`, 'gm'), '');
+  }
+  return text;
+};
+
 /**
  * Truncates an HTML string without breaking tags.
  *
@@ -66,13 +85,6 @@ export const replaceInternalLinks = (content: string, url: string) =>
  */
 export const startsWith = (str: string, check: string) => str.startsWith(check);
 
-/**
- * Strips leading whitespace from each line in a string.
- *
- * @see https://github.com/sindresorhus/strip-indent
- */
-export const stripInd = (str: string) => stripIndent(str);
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export default function typePlugin(eleventyConfig: any) {
   // filters...
@@ -82,7 +94,6 @@ export default function typePlugin(eleventyConfig: any) {
   eleventyConfig.addLiquidFilter('typogr', typogr);
   eleventyConfig.addLiquidFilter('replaceInternalLinks', replaceInternalLinks);
   eleventyConfig.addLiquidFilter('startsWith', startsWith);
-  eleventyConfig.addLiquidFilter('stripIndent', stripInd);
 
   // shortcodes...
   eleventyConfig.addLiquidShortcode('lorem', getLorem);
@@ -90,5 +101,4 @@ export default function typePlugin(eleventyConfig: any) {
   // paired shortcodes...
   eleventyConfig.addPairedLiquidShortcode('markdown', markdown);
   eleventyConfig.addPairedLiquidShortcode('typogr', typogr);
-  eleventyConfig.addPairedLiquidShortcode('stripIndent', stripInd);
 }