| 1 | // Based on Marpit PostCSS rem plugin |
| 2 | // https://github.com/marp-team/marpit/blob/main/src/postcss/root/rem.js |
| 3 | |
| 4 | const rootFontSizeCustomProp = '--root-font-size' |
| 5 | const skipParsingMatcher = /("[^"]*"|'[^']*'|(?:attr|url|var)\([^)]*\))/g |
| 6 | |
| 7 | module.exports = () => ({ |
| 8 | postcssPlugin: 'marp-rem', |
| 9 | Once: (css) => |
| 10 | css.walkDecls((decl) => { |
| 11 | if (decl.prop === rootFontSizeCustomProp) return |
| 12 | |
| 13 | decl.value = decl.value |
| 14 | .split(skipParsingMatcher) |
| 15 | .map((v, i) => { |
| 16 | if (i % 2) return v |
| 17 | |
| 18 | return v.replace( |
| 19 | /(-?\d*\.?\d+)rem\b/g, |
| 20 | (_, num) => `calc(var(${rootFontSizeCustomProp}, 1rem) * ${num})` |
| 21 | ) |
| 22 | }) |
| 23 | .join('') |
| 24 | }), |
| 25 | }) |
| 26 | |
| 27 | module.exports.postcss = true |
| 28 |