@marp-team/marpit - npm Package Compare versions

Comparing version 1.6.0 to 1.6.1

CHANGELOG.md

@@ -5,2 +5,9 @@ # Change Log
 
+## v1.6.1 - 2020-05-17
+
+### Fixed
+
+- Slide size defined in `:root` selector does not reflect to the theme instance ([#244](https://github.com/marp-team/marpit/issues/244), [#246](https://github.com/marp-team/marpit/pull/246))
+- `:root` selector in Marpit is not following the specification of specificity ([#245](https://github.com/marp-team/marpit/issues/245), [#247](https://github.com/marp-team/marpit/pull/247))
+
 ## v1.6.0 - 2020-05-09
@@ -7,0 +14,0 @@

lib/postcss/root/rem.js

@@ -10,3 +10,3 @@ "use strict";
 
-var _replace = require("./replace");
+var _font_size = require("./font_size");
 
@@ -28,3 +28,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
     if (i % 2) return v;
-    return v.replace(/(\d*\.?\d+)rem\b/g, (_, num) => `calc(var(${_replace.rootFontSizeCustomProp}, 1rem) * ${num})`);
+    return v.replace(/(\d*\.?\d+)rem\b/g, (_, num) => `calc(var(${_font_size.rootFontSizeCustomProp}, 1rem) * ${num})`);
   }).join('');
@@ -31,0 +31,0 @@ }));

lib/postcss/root/replace.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = exports.rootFontSizeCustomProp = void 0;
+exports.default = void 0;
 
@@ -14,45 +14,15 @@ var _postcss = _interopRequireDefault(require("postcss"));
 /** @module */
-const rootFontSizeCustomProp = '--marpit-root-font-size';
+
 /**
  * Marpit PostCSS root replace plugin.
  *
- * Replace `:root` pseudo-class selector into `section`, and inject CSS variable
- * for correct calculation of rem unit in `font-size` declaration.
+ * Replace `:root` pseudo-class selector into `section`.
  *
  * @alias module:postcss/root/replace
  */
-
-exports.rootFontSizeCustomProp = rootFontSizeCustomProp;
-
-const plugin = _postcss.default.plugin('marpit-postcss-root-replace', () => css => css.walkRules(rule => {
-  const injectSelector = new Set();
-  rule.selectors = rule.selectors.map(selector => {
-    // Replace `:root` pseudo-class selectors into `section`
-    const replaced = selector.replace(/(^|[\s>+~(])(?:section)?:root\b/g, (_, s) => `${s}section`); // Detect whether the selector is targeted to section
-
-    const parentSelectors = replaced.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(''));
-    }
-
-    return replaced;
-  });
-  if (injectSelector.size === 0) return; // Inject CSS variable
-
-  const injectRule = _postcss.default.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);
+const plugin = _postcss.default.plugin('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 || ''}`));
 }));
@@ -59,0 +29,0 @@

lib/postcss/section_size.js

@@ -17,19 +17,24 @@ "use strict";
  *
- * Parse width and height declartaion on section selector.
+ * Parse width and height declartaion on `section` selector.
  *
  * @alias module:postcss/section_size
  */
-const plugin = _postcss.default.plugin('marpit-postcss-section-size', () => (css, ret) => {
-  ret.marpitSectionSize = ret.marpitSectionSize || {};
-  css.walkRules(rule => {
-    if (rule.selectors.includes('section')) {
-      rule.walkDecls(/^(width|height)$/, decl => {
-        const {
-          prop
-        } = decl;
-        const value = decl.value.trim();
-        ret.marpitSectionSize[prop] = value;
-      });
-    }
-  });
+const plugin = _postcss.default.plugin('marpit-postcss-section-size', ({
+  pseudoClass
+} = {}) => {
+  const rootSectionMatcher = new RegExp(`^(?:section|\\*?:root)${pseudoClass ? `(?:${pseudoClass})?` : ''}$`);
+  return (css, ret) => {
+    ret.marpitSectionSize = ret.marpitSectionSize || {};
+    css.walkRules(rule => {
+      if (rule.selectors.some(s => rootSectionMatcher.test(s))) {
+        rule.walkDecls(/^(width|height)$/, decl => {
+          const {
+            prop
+          } = decl;
+          const value = decl.value.trim();
+          ret.marpitSectionSize[prop] = value;
+        });
+      }
+    });
+  };
 });
@@ -36,0 +41,0 @@

lib/theme_set.js

@@ -26,2 +26,6 @@ "use strict";
 
+var _font_size = _interopRequireDefault(require("./postcss/root/font_size"));
+
+var _increasing_specificity = _interopRequireWildcard(require("./postcss/root/increasing_specificity"));
+
 var _rem = _interopRequireDefault(require("./postcss/root/rem"));
@@ -288,3 +292,5 @@
       height: this.getThemeProp(theme, 'height')
-    }), theme !== _scaffold.default && (css => css.first.before(_scaffold.default.css)), opts.inlineSVG && _advanced_background.default, _pagination.default, _replace3.default, _prepend.default, (0, _replace2.default)(opts.containers, slideElements), opts.printable && _printable.postprocess, _rem.default, _rollup.default].filter(p => p));
+    }), theme !== _scaffold.default && (css => css.first.before(_scaffold.default.css)), opts.inlineSVG && _advanced_background.default, _pagination.default, (0, _replace3.default)({
+      pseudoClass: _increasing_specificity.pseudoClass
+    }), _font_size.default, _increasing_specificity.default, _prepend.default, (0, _replace2.default)(opts.containers, slideElements), opts.printable && _printable.postprocess, _rem.default, _rollup.default].filter(p => p));
     return packer.process(theme.css).css;
@@ -291,0 +297,0 @@ }

package.json

 {
   "name": "@marp-team/marpit",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "The skinny framework for creating slide deck from Markdown",
@@ -5,0 +5,0 @@ "license": "MIT",

No alert changes

Improved metrics

Total package byte prevSize

171610

increased by1.45%

Number of package files

56

increased by3.7%

Lines of code

3389

increased by1.53%

No dependency changes