Prebundle PostCSS plugins for minifyCSS option

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

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"

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`,

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)

src/prebundles/mocks/browserslist.ts

@@ -0,0 +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 () => []

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,
+]

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('<!-- theme: a -->').css).toContain(
-        'div { color: #f00; }'
-      )
-      expect(enabled.render('<!-- theme: a -->').css).toContain(
-        'div{color:#f00}'
+      const enabledCss = enabled.render('<!-- theme: a -->').css
+      const disabledCss = disabled.render('<!-- theme: a -->').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', () => {

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"