From 7d2a08f477c2dd258f936db205a63659a4e4703b Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Tue, 30 Aug 2022 23:19:30 +0900 Subject: [PATCH 1/4] Update test of minifyCSS option to confirm media params minification --- test/marp.ts | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/test/marp.ts b/test/marp.ts index 1102d3cf..e9e5c8da 100644 --- a/test/marp.ts +++ b/test/marp.ts @@ -887,17 +887,21 @@ function matchwo(a,b) ) // Custom theme - const customTheme = '/* @theme a */ div { color: #f00; }' + const customTheme = + '/* @theme a */ @media screen \t and ( min-width : 768px ) { div { color: #f00; } }' enabled.themeSet.add(customTheme) disabled.themeSet.add(customTheme) - expect(disabled.render('').css).toContain( - 'div { color: #f00; }' - ) - expect(enabled.render('').css).toContain( - 'div{color:#f00}' + const enabledCss = enabled.render('').css + const disabledCss = disabled.render('').css + + expect(disabledCss).toContain( + '@media screen \t and ( min-width : 768px )' ) + expect(disabledCss).toContain('div { color: #f00; }') + expect(enabledCss).toContain('@media screen and (min-width:768px)') + expect(enabledCss).toContain('div{color:#f00}') }) it('applies minifier by default', () => { From c16b600fd94566bb7208c8fee685d2625937af66 Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Wed, 31 Aug 2022 01:05:15 +0900 Subject: [PATCH 2/4] Prebundle PostCSS minify plugins --- package.json | 7 +++-- rollup.config.js | 37 +++++++++++++++++++++++- src/marp.ts | 12 ++------ src/prebundles/mocks/browserslist.ts | 4 +++ src/prebundles/postcss-minify-plugins.ts | 9 ++++++ yarn.lock | 8 +++++ 6 files changed, 63 insertions(+), 14 deletions(-) create mode 100644 src/prebundles/mocks/browserslist.ts create mode 100644 src/prebundles/postcss-minify-plugins.ts diff --git a/package.json b/package.json index 827f3686..ff7c2fed 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "@rollup/plugin-commonjs": "^22.0.2", "@rollup/plugin-json": "^4.1.0", "@rollup/plugin-node-resolve": "^13.3.0", + "@rollup/plugin-replace": "^4.0.0", "@rollup/plugin-typescript": "^8.3.4", "@types/jest": "^28.1.6", "@typescript-eslint/eslint-plugin": "^5.33.0", @@ -90,6 +91,9 @@ "mkdirp": "^1.0.4", "nodemon": "^2.0.19", "npm-run-all": "^4.1.5", + "postcss-minify-params": "^5.1.3", + "postcss-minify-selectors": "^5.2.1", + "postcss-normalize-whitespace": "^5.1.1", "postcss-url": "^10.1.3", "prettier": "^2.7.1", "rimraf": "^3.0.2", @@ -116,9 +120,6 @@ "markdown-it-emoji": "^2.0.2", "mathjax-full": "^3.2.2", "postcss": "^8.4.16", - "postcss-minify-params": "^5.1.3", - "postcss-minify-selectors": "^5.2.1", - "postcss-normalize-whitespace": "^5.1.1", "postcss-selector-parser": "^6.0.10", "twemoji": "^14.0.2", "xss": "^1.0.13" diff --git a/rollup.config.js b/rollup.config.js index 737c50bd..e53f05cf 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -3,6 +3,7 @@ import alias from '@rollup/plugin-alias' import commonjs from '@rollup/plugin-commonjs' import json from '@rollup/plugin-json' import { nodeResolve } from '@rollup/plugin-node-resolve' +import replace from '@rollup/plugin-replace' import typescript from '@rollup/plugin-typescript' import autoprefixer from 'autoprefixer' import cssnano from 'cssnano' @@ -19,7 +20,11 @@ const plugins = ({ browser = false } = {}) => [ entries: [ { find: /^.+browser-script$/, - replacement: path.resolve(__dirname, './lib/browser.js'), + replacement: path.resolve(__dirname, 'lib/browser.js'), + }, + { + find: /^.*prebundles[\\/]postcss-minify-plugins$/, + replacement: path.resolve(__dirname, 'tmp/postcss-minify-plugins.mjs'), }, ], }), @@ -53,10 +58,27 @@ const plugins = ({ browser = false } = {}) => [ !process.env.ROLLUP_WATCH && terser(), ] +const prebundlePlugins = () => [ + alias({ + entries: [ + { + find: 'browserslist', + replacement: path.resolve( + __dirname, + 'src/prebundles/mocks/browserslist.ts' + ), + }, + ], + }), + ...plugins(), + replace({ preventAssignment: true, __dirname: '""' }), +] + const external = (deps) => (id) => deps.some((dep) => dep === id || id.startsWith(`${dep}/`)) export default [ + // Browser helpers { input: 'scripts/browser.js', output: { file: 'lib/browser.js', format: 'iife' }, @@ -67,6 +89,19 @@ export default [ output: { exports: 'named', file: 'lib/browser.cjs.js', format: 'cjs' }, plugins: plugins({ browser: true }), }, + + // Prebundles + { + input: `src/prebundles/postcss-minify-plugins.ts`, + output: { + exports: 'named', + file: 'tmp/postcss-minify-plugins.mjs', + format: 'es', + }, + plugins: prebundlePlugins(), + }, + + // Main bundle { external: external(Object.keys(pkg.dependencies)), input: `src/${path.basename(pkg.main, '.js')}.ts`, diff --git a/src/marp.ts b/src/marp.ts index 592ae25d..e76c9b0c 100644 --- a/src/marp.ts +++ b/src/marp.ts @@ -1,9 +1,6 @@ import { Marpit, Options, ThemeSetPackOptions } from '@marp-team/marpit' import highlightjs from 'highlight.js' import postcss, { AcceptedPlugin } from 'postcss' -import postcssMinifyParams from 'postcss-minify-params' -import postcssMinifySelectors from 'postcss-minify-selectors' -import postcssNormalizeWhitespace from 'postcss-normalize-whitespace' import defaultTheme from '../themes/default.scss' import gaiaTheme from '../themes/gaia.scss' import uncoverTheme from '../themes/uncover.scss' @@ -12,6 +9,7 @@ import * as customElements from './custom-elements' import * as emojiPlugin from './emoji/emoji' import * as htmlPlugin from './html/html' import * as mathPlugin from './math/math' +import minifyPlugins from './prebundles/postcss-minify-plugins' import * as scriptPlugin from './script/script' import * as sizePlugin from './size/size' @@ -103,13 +101,7 @@ export class Marp extends Marpit { const original = super.renderStyle(theme) const postprocessorPlugins: AcceptedPlugin[] = [ customElements.css, - ...(this.options.minifyCSS - ? [ - postcssNormalizeWhitespace, - postcssMinifyParams, - postcssMinifySelectors, - ] - : []), + ...(this.options.minifyCSS ? minifyPlugins : []), ] const postprocessor = postcss(postprocessorPlugins) diff --git a/src/prebundles/mocks/browserslist.ts b/src/prebundles/mocks/browserslist.ts new file mode 100644 index 00000000..f276c4b4 --- /dev/null +++ b/src/prebundles/mocks/browserslist.ts @@ -0,0 +1,4 @@ +// postcss-minify-params is depending on browserslist to detect whether using +// IE. Marp does never use this detection so we will mock the module and return +// empty array. You can see the setting for pre-bundling in rollup.config.js. +export default () => [] diff --git a/src/prebundles/postcss-minify-plugins.ts b/src/prebundles/postcss-minify-plugins.ts new file mode 100644 index 00000000..520b6f8b --- /dev/null +++ b/src/prebundles/postcss-minify-plugins.ts @@ -0,0 +1,9 @@ +import postcssMinifyParams from 'postcss-minify-params' +import postcssMinifySelectors from 'postcss-minify-selectors' +import postcssNormalizeWhitespace from 'postcss-normalize-whitespace' + +export default [ + postcssNormalizeWhitespace, + postcssMinifyParams, + postcssMinifySelectors, +] diff --git a/yarn.lock b/yarn.lock index 39b18b21..1954d00b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -702,6 +702,14 @@ is-module "^1.0.0" resolve "^1.19.0" +"@rollup/plugin-replace@^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-4.0.0.tgz#e34c457d6a285f0213359740b43f39d969b38a67" + integrity sha512-+rumQFiaNac9y64OHtkHGmdjm7us9bo1PlbgQfdihQtuNxzjpaB064HbRnewUOggLQxVCCyINfStkgmBeQpv1g== + dependencies: + "@rollup/pluginutils" "^3.1.0" + magic-string "^0.25.7" + "@rollup/plugin-typescript@^8.3.4": version "8.3.4" resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-8.3.4.tgz#45cdc0787b658b37d0362c705d8de86bc8bc040e" From bdf4b465e5b56bbb2e915e45c814783b356a80c3 Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Fri, 9 Sep 2022 01:35:10 +0900 Subject: [PATCH 3/4] Disable collecting coverage from browserslist mock --- src/prebundles/mocks/browserslist.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/prebundles/mocks/browserslist.ts b/src/prebundles/mocks/browserslist.ts index f276c4b4..8e7c43e9 100644 --- a/src/prebundles/mocks/browserslist.ts +++ b/src/prebundles/mocks/browserslist.ts @@ -1,4 +1,6 @@ // postcss-minify-params is depending on browserslist to detect whether using // IE. Marp does never use this detection so we will mock the module and return // empty array. You can see the setting for pre-bundling in rollup.config.js. + +/* istanbul ignore next */ export default () => [] From e06a647a4406805313ded9e7911f1f60af92b4d0 Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Fri, 9 Sep 2022 01:57:45 +0900 Subject: [PATCH 4/4] [ci skip] Update CHANGELOG.md --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8d9df5d7..ccd1d0ad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## [Unreleased] +### Fixed + +- Prebundle PostCSS plugins for `minifyCSS` option, to fix incompatibility with ESM ([#314](https://github.com/marp-team/marp-core/issues/314), [#315](https://github.com/marp-team/marp-core/pull/315)) + ## v3.3.2 - 2022-08-12 ### Fixed