add initial marp implementation with sample content and build configuration

node_modules/@marp-team/marpit/lib/postcss/root/font_size.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rootFontSizeCustomProp = exports.rootFontSize = exports.default = void 0;
+var _postcss_plugin = _interopRequireDefault(require("../../helpers/postcss_plugin"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** @module */
+
+const rootFontSizeCustomProp = exports.rootFontSizeCustomProp = '--marpit-root-font-size';
+
+/**
+ * Marpit PostCSS root font size plugin.
+ *
+ * Inject CSS variable based on the root slide container `section` for correct
+ * calculation of `rem` unit in the context of Marpit.
+ *
+ * @function rootFontSize
+ */
+const rootFontSize = exports.rootFontSize = (0, _postcss_plugin.default)('marpit-postcss-root-font-size', () => (css, postcss) => css.walkRules(rule => {
+  const injectSelector = new Set();
+  for (const selector of rule.selectors) {
+    // Detect whether the selector is targeted to section
+    const parentSelectors = selector.split(/(\s+|\s*[>~+]\s*)/);
+    const targetSelector = parentSelectors.pop();
+    const delimiterMatched = targetSelector.match(/[.:#[]/);
+    const target = delimiterMatched ? targetSelector.slice(0, delimiterMatched.index) : targetSelector;
+    if (target === 'section' || target.endsWith('*') || target === '') {
+      // Generate selector for injection
+      injectSelector.add([...parentSelectors, target === 'section' ? 'section' : ':marpit-container > :marpit-slide section',
+      // Universal selector is targeted to the children `section` of root `section`
+      delimiterMatched ? targetSelector.slice(delimiterMatched.index) : ''].join(''));
+    }
+  }
+  if (injectSelector.size === 0) return;
+
+  // Inject CSS variable
+  const injectRule = postcss.rule({
+    selectors: [...injectSelector.values()]
+  });
+  rule.walkDecls('font-size', decl => {
+    injectRule.append(decl.clone({
+      prop: rootFontSizeCustomProp
+    }));
+  });
+  if (injectRule.nodes.length > 0) rule.parent.insertAfter(rule, injectRule);
+}));
+var _default = exports.default = rootFontSize;

node_modules/@marp-team/marpit/lib/postcss/root/increasing_specificity.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rootIncreasingSpecificity = exports.pseudoClass = exports.default = void 0;
+var _postcss_plugin = _interopRequireDefault(require("../../helpers/postcss_plugin"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** @module */
+
+const pseudoClass = exports.pseudoClass = ':marpit-root';
+const matcher = new RegExp(`\\b(?:section)?${pseudoClass}\\b`, 'g');
+
+/**
+ * Marpit PostCSS root increasing specificity plugin.
+ *
+ * Replace specific pseudo-class selector to `:where(section):not([\20 root])`,
+ * to increase specificity. `:marpit-root` is always added to `section` selector
+ * by root replace plugin so `:where(section):not([\20 root])` must always match
+ * too (HTML does not allow U+0020 SPACE in the attribute name.).
+ *
+ * @function rootIncreasingSpecificity
+ */
+const rootIncreasingSpecificity = exports.rootIncreasingSpecificity = (0, _postcss_plugin.default)('marpit-postcss-root-increasing-specificity', () => css => css.walkRules(rule => {
+  rule.selectors = rule.selectors.map(selector => selector.replace(matcher, ':where(section):not([\\20 root])'));
+}));
+var _default = exports.default = rootIncreasingSpecificity;

node_modules/@marp-team/marpit/lib/postcss/root/rem.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rem = exports.default = void 0;
+var _postcss_plugin = _interopRequireDefault(require("../../helpers/postcss_plugin"));
+var _font_size = require("./font_size");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** @module */
+
+const skipParsingMatcher = /("[^"]*"|'[^']*'|(?:attr|url|var)\([^)]*\))/g;
+
+/**
+ * Marpit PostCSS rem plugin.
+ *
+ * Replace `rem` unit to calculated value from CSS variable.
+ *
+ * @function rem
+ */
+const rem = exports.rem = (0, _postcss_plugin.default)('marpit-postcss-rem', () => css => css.walkDecls(decl => {
+  decl.value = decl.value.split(skipParsingMatcher).map((v, i) => {
+    if (i % 2) return v;
+    return v.replace(/(\d*\.?\d+)rem\b/g, (_, num) => `calc(var(${_font_size.rootFontSizeCustomProp}, 1rem) * ${num})`);
+  }).join('');
+}));
+var _default = exports.default = rem;

node_modules/@marp-team/marpit/lib/postcss/root/replace.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rootReplace = exports.default = void 0;
+var _postcss_plugin = _interopRequireDefault(require("../../helpers/postcss_plugin"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** @module */
+
+/**
+ * Marpit PostCSS root replace plugin.
+ *
+ * Replace `:root` pseudo-class selector into `section`. It can add custom
+ * pseudo class through `pseudoClass` option to make distinguishable from
+ * `section` selector.
+ *
+ * @function rootReplace
+ */
+const rootReplace = exports.rootReplace = (0, _postcss_plugin.default)('marpit-postcss-root-replace', ({
+  pseudoClass
+} = {}) => css => css.walkRules(rule => {
+  // Replace `:root` pseudo-class selectors into `section`
+  rule.selectors = rule.selectors.map(selector => selector.replace(/(^|[\s>+~(])(?:section)?:root\b/g, (_, s) => `${s}section${pseudoClass || ''}`));
+}));
+var _default = exports.default = rootReplace;