@marp-team/marpit - npm Package Compare versions

Comparing version 2.2.4 to 2.3.0

lib/markdown/image/apply.js

@@ -53,3 +53,3 @@ "use strict";
     }
-  }); // Shorthand for color spot directive
+  }); // [DEPRECATED] Shorthand for color spot directive
 
@@ -56,0 +56,0 @@ md.core.ruler.after('marpit_inline_svg', 'marpit_apply_color', ({

lib/markdown/image/parse.js

@@ -184,5 +184,8 @@ "use strict";
           options
-        }; // Detect shorthand for setting color (Use value before normalization)
+        }; // [DEPRECATED]
+        // Detect shorthand for setting color (Use value before normalization)
 
         if (!!_colorString.default.get(originalUrl) || originalUrl.toLowerCase() === 'currentcolor') {
+          const replacedDirective = options.some(opt => opt.content === 'bg') ? 'backgroundColor' : 'color';
+          console.warn(`Deprecation warning: Shorthand for setting colors via Markdown image syntax is deprecated now, and will remove in next major release. Please replace to a scoped local direcitve <!-- _${replacedDirective}: "${originalUrl}" -->, or use the scoped style <style scoped>.`);
           token.meta.marpitImage.color = originalUrl;
@@ -189,0 +192,0 @@ token.hidden = true;

lib/postcss/root/increasing_specificity.js

@@ -15,9 +15,10 @@ "use strict";
 exports.pseudoClass = pseudoClass;
-const matcher = new RegExp(`\\b${pseudoClass}\\b`, 'g');
+const matcher = new RegExp(`\\b(?:section)?${pseudoClass}\\b`, 'g');
 /**
  * Marpit PostCSS root increasing specificity plugin.
  *
- * Replace `:marpit-root` pseudo-class selector into `:not(a)`, to increase
- * specificity. `:marpit-root` is always added to `section` selector by root
- * replace plugin so `:not(a)` must always match too.
+ * 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.).
  *
@@ -28,5 +29,5 @@ * @alias module:postcss/root/increasing_specificity
 const plugin = (0, _postcss_plugin.default)('marpit-postcss-root-increasing-specificity', () => css => css.walkRules(rule => {
-  rule.selectors = rule.selectors.map(selector => selector.replace(matcher, ':not(a)'));
+  rule.selectors = rule.selectors.map(selector => selector.replace(matcher, ':where(section):not([\\20 root])'));
 }));
 var _default = plugin;
 exports.default = _default;

lib/postcss/root/replace.js

@@ -17,3 +17,5 @@ "use strict";
  *
- * Replace `:root` pseudo-class selector into `section`.
+ * Replace `:root` pseudo-class selector into `section`. It can add custom
+ * pseudo class through `pseudoClass` option to make distinguishable from
+ * `section` selector.
  *
@@ -20,0 +22,0 @@ * @alias module:postcss/root/replace

lib/postcss/section_size.js

@@ -22,11 +22,17 @@ "use strict";
 const plugin = (0, _postcss_plugin.default)('marpit-postcss-section-size', ({
-  pseudoClass
+  preferedPseudoClass
 } = {}) => {
-  const rootSectionMatcher = new RegExp(`^(?:section|\\*?:root)${pseudoClass ? `(?:${pseudoClass})?` : ''}$`);
+  const rootSectionMatcher = new RegExp(`^section${preferedPseudoClass ? `(${preferedPseudoClass})?` : ''}$`);
   return (css, {
     result
   }) => {
-    result.marpitSectionSize = result.marpitSectionSize || {};
+    const originalSize = result.marpitSectionSize || {};
+    const detectedSize = {};
+    const preferedSize = {};
+    let matched;
     css.walkRules(rule => {
-      if (rule.selectors.some(s => rootSectionMatcher.test(s))) {
+      if (rule.selectors.some(s => {
+        matched = s.match(rootSectionMatcher);
+        return !!matched;
+      })) {
         rule.walkDecls(/^(width|height)$/, decl => {
@@ -37,6 +43,17 @@ const {
           const value = decl.value.trim();
-          result.marpitSectionSize[prop] = value;
+
+          if (matched[1]) {
+            preferedSize[prop] = value;
+          } else {
+            detectedSize[prop] = value;
+          }
         });
       }
     });
+    const width = preferedSize.width || detectedSize.width || originalSize.width;
+    const height = preferedSize.height || detectedSize.height || originalSize.height;
+    result.marpitSectionSize = { ...originalSize
+    };
+    if (width) result.marpitSectionSize.width = width;
+    if (height) result.marpitSectionSize.height = height;
   };
@@ -43,0 +60,0 @@ });

lib/theme.js

@@ -14,2 +14,6 @@ "use strict";
 
+var _increasing_specificity = require("./postcss/root/increasing_specificity");
+
+var _replace = _interopRequireDefault(require("./postcss/root/replace"));
+
 var _section_size = _interopRequireDefault(require("./postcss/section_size"));
@@ -120,3 +124,7 @@
       metaType
-    }), _section_size.default, _parse.default]).process(cssString);
+    }), (0, _replace.default)({
+      pseudoClass: _increasing_specificity.pseudoClass
+    }), (0, _section_size.default)({
+      preferedPseudoClass: _increasing_specificity.pseudoClass
+    }), _parse.default]).process(cssString);
     if (!opts[_symbol.default] && !result.marpitMeta.theme) throw new Error('Marpit theme CSS requires @theme meta.');
@@ -123,0 +131,0 @@ const theme = new Theme(result.marpitMeta.theme, css);

package.json

 {
   "name": "@marp-team/marpit",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "description": "The skinny framework for creating slide deck from Markdown",
@@ -62,37 +62,37 @@ "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.8",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.0",
     "@babel/eslint-parser": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
-    "autoprefixer": "^10.4.4",
-    "cheerio": "^1.0.0-rc.10",
+    "@babel/preset-env": "^7.18.0",
+    "autoprefixer": "^10.4.7",
+    "cheerio": "^1.0.0-rc.11",
     "chokidar": "^3.5.3",
-    "cssnano": "^5.1.5",
+    "cssnano": "^5.1.9",
     "dedent": "^0.7.0",
     "docsify-themeable": "^0.8.6",
-    "eslint": "^8.12.0",
+    "eslint": "^8.16.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.25.4",
-    "jest": "^27.5.1",
-    "jest-junit": "^13.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "jest": "^28.1.0",
+    "jest-junit": "^13.2.0",
     "jsdoc": "^3.6.10",
     "minami": "^1.2.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.6.1",
+    "prettier": "^2.6.2",
     "rimraf": "^3.0.2",
-    "sass": "1.49.9",
+    "sass": "1.52.1",
     "serve-handler": "^6.1.3",
-    "stylelint": "^14.6.1",
+    "stylelint": "^14.8.2",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard-scss": "^3.0.0",
-    "ws": "^8.5.0"
+    "ws": "^8.6.0"
   },
   "dependencies": {
-    "color-string": "^1.9.0",
+    "color-string": "^1.9.1",
     "cssesc": "^3.0.0",
     "js-yaml": "^4.1.0",
     "lodash.kebabcase": "^4.1.1",
-    "markdown-it": "^12.3.2",
+    "markdown-it": "^13.0.1",
     "markdown-it-front-matter": "^0.2.3",
-    "postcss": "^8.4.12"
+    "postcss": "^8.4.14"
   },
@@ -99,0 +99,0 @@ "publishConfig": {

README.md

@@ -20,3 +20,3 @@ <p align="center">
 
-In fact, this framework is created for using as the base of [a core converter][marp-core] in [the next version of Marp][marp].
+In fact, this framework is created for using as the base of [a core converter][marp-core] in [Marp ecosystem][marp].
 
@@ -36,7 +36,7 @@ [marp]: https://github.com/marp-team/marp/
 
-### [:triangular_ruler: **Inline SVG slide**](https://marpit.marp.app/inline-svg) <i>(Experimental)</i>
+### [:triangular_ruler: **Inline SVG slide**](https://marpit.marp.app/inline-svg) _(Experimental)_
 
 Optionally `<svg>` element can use as the container of each slide page. It can be realized the pixel-perfect scaling of the slide only by CSS, so handling slides in integrated apps become simplified. The isolated layer made by `<foreignObject>` can provide [_advanced backgrounds_](https://marpit.marp.app/image-syntax?id=advanced-backgrounds) for the slide with keeping the original Markdown DOM structure.
 
-> :information_source: We not provide any themes because Marpit is just a framework. You can use [@marp-team/marp-core][marp-core] if you want. It has the official themes, and practical features extended from Marpit.
+> We not provide any themes because Marpit is just a framework. You can use [@marp-team/marp-core][marp-core] if you want. It has the official themes, and practical features extended from Marpit.
 
@@ -43,0 +43,0 @@ ## Getting started

No alert changes

Improved metrics

Total package byte prevSize

144292

increased by1.08%

Lines of code

3599

increased by0.78%

Dependency changes

• + Addedentities@3.0.1(transitive)

• + Addedlinkify-it@4.0.1(transitive)

• + Addedmarkdown-it@13.0.2(transitive)

• - Removedentities@2.1.0(transitive)

• - Removedlinkify-it@3.0.3(transitive)

• - Removedmarkdown-it@12.3.2(transitive)

• Updatedcolor-string@^1.9.1

• Updatedmarkdown-it@^13.0.1

• Updatedpostcss@^8.4.14