Upgrade to PostCSS 8

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+### Breaking
+
+- Marpit requires Node.js >= 10 to install ([#284](https://github.com/marp-team/marpit/pull/284))
+
+### Changed
+
+- Upgrade to PostCSS 8 ([#260](https://github.com/marp-team/marpit/issues/260), [#284](https://github.com/marp-team/marpit/pull/284))
+
 ## v1.6.4 - 2021-02-06
 
 ### Fixed

package.json

@@ -27,7 +27,7 @@
     "url": "https://github.com/marp-team/marpit"
   },
   "engines": {
-    "node": ">=8"
+    "node": ">=10"
   },
   "main": "lib/index.js",
   "types": "index.d.ts",
@@ -62,7 +62,7 @@
     "@babel/cli": "^7.12.13",
     "@babel/core": "^7.12.13",
     "@babel/preset-env": "^7.12.13",
-    "autoprefixer": "^9.8.6",
+    "autoprefixer": "^10.2.5",
     "babel-eslint": "^10.1.0",
     "cheerio": "^1.0.0-rc.5",
     "chokidar": "^3.5.1",
@@ -95,7 +95,7 @@
     "lodash.kebabcase": "^4.1.1",
     "markdown-it": "^12.0.4",
     "markdown-it-front-matter": "^0.2.3",
-    "postcss": "^7.0.32"
+    "postcss": "^8.2.8"
   },
   "publishConfig": {
     "access": "public"

src/helpers/postcss_plugin.js

@@ -0,0 +1,29 @@
+/** @module */
+
+/**
+ * Generate PostCSS plugin.
+ *
+ * This is a glue code generator to migrate existed plugins to support
+ * PostCSS 8.
+ *
+ * @param {string} name Plugin name.
+ * @param {(Function|Object)} func Function with PostCSS plugin interface.
+ * @returns {Function} A PostCSS plugin.
+ */
+function plugin(name, func) {
+  return Object.defineProperty(
+    function intrface(...args) {
+      const retFunc = func.apply(this, args)
+
+      return Object.defineProperty(
+        typeof retFunc === 'function' ? { Once: retFunc } : retFunc,
+        'postcssPlugin',
+        { value: name }
+      )
+    },
+    'postcss',
+    { value: true }
+  )
+}
+
+export default plugin

src/markdown/style/assign.js

@@ -1,5 +1,6 @@
 /** @module */
 import postcss from 'postcss'
+import postcssPlugin from '../../helpers/postcss_plugin'
 import marpitPlugin from '../../plugin'
 
 const uniqKeyChars =
@@ -17,7 +18,7 @@ const generateUniqKey = (length = 8) => {
   return ret
 }
 
-const injectScopePostCSSplugin = postcss.plugin(
+const injectScopePostCSSplugin = postcssPlugin(
   'marpit-style-assign-postcss-inject-scope',
   (key, keyframeSet) => (css) =>
     css.each(function inject(node) {
@@ -42,7 +43,7 @@ const injectScopePostCSSplugin = postcss.plugin(
     })
 )
 
-const scopeKeyframesPostCSSPlugin = postcss.plugin(
+const scopeKeyframesPostCSSPlugin = postcssPlugin(
   'marpit-style-assign-postcss-scope-keyframes',
   (key, keyframeSet) => (css) => {
     if (keyframeSet.size === 0) return

src/postcss/advanced_background.js

@@ -1,5 +1,5 @@
 /** @module */
-import postcss from 'postcss'
+import postcssPlugin from '../helpers/postcss_plugin'
 
 /**
  * Marpit PostCSS advanced background plugin.
@@ -8,7 +8,7 @@ import postcss from 'postcss'
  *
  * @alias module:postcss/advanced_background
  */
-const plugin = postcss.plugin(
+const plugin = postcssPlugin(
   'marpit-postcss-advanced-background',
   () => (css) => {
     css.last.after(

src/postcss/import/parse.js

@@ -1,6 +1,6 @@
 /* eslint consistent-return: 0 */
 /** @module */
-import postcss from 'postcss'
+import postcssPlugin from '../../helpers/postcss_plugin'
 
 /**
  * @typedef {object} ImportMeta
@@ -26,9 +26,9 @@ import postcss from 'postcss'
  *
  * @alias module:postcss/import/parse
  */
-const plugin = postcss.plugin(
+const plugin = postcssPlugin(
   'marpit-postcss-import-parse',
-  () => (css, ret) => {
+  () => (css, { result }) => {
     const imports = { import: [], importTheme: [] }
     let allowImport = true
 
@@ -70,7 +70,7 @@ const plugin = postcss.plugin(
       }
     })
 
-    ret.marpitImport = [...imports.importTheme, ...imports.import]
+    result.marpitImport = [...imports.importTheme, ...imports.import]
   }
 )
 

src/postcss/import/replace.js

@@ -1,5 +1,5 @@
 /** @module */
-import postcss from 'postcss'
+import postcssPlugin from '../../helpers/postcss_plugin'
 import postcssImportParse from './parse'
 
 /**
@@ -13,41 +13,45 @@ import postcssImportParse from './parse'
  * @alias module:postcss/import/replace
  * @param {ThemeSet} themeSet ThemeSet instance.
  */
-const plugin = postcss.plugin(
-  'marpit-postcss-import-replace',
-  (themeSet, importedThemes = []) =>
-    postcss([
-      postcssImportParse,
-      (css) => {
-        const prepends = []
-
-        css.walk((node) => {
-          const name = node.marpitImportParse
-
-          if (name) {
-            const theme = themeSet.get(name)
-
-            if (theme) {
-              if (importedThemes.includes(name))
-                throw new Error(`Circular "${name}" theme import is detected.`)
-
-              const processed = postcss([
-                plugin(themeSet, [...importedThemes, name]),
-              ]).process(theme.css)
-
-              if (node.name === 'import') {
-                node.replaceWith(processed.root)
-              } else {
-                node.remove()
-                prepends.unshift(processed.root)
+const plugin = (themeSet, importedThemes = []) =>
+  postcssPlugin('marpit-postcss-import-replace', () => ({
+    plugins: [
+      postcssImportParse(),
+      postcssPlugin(
+        'marpit-postcss-import-replace-processor',
+        () => (css, { postcss }) => {
+          const prepends = []
+
+          css.walk((node) => {
+            const name = node.marpitImportParse
+
+            if (name) {
+              const theme = themeSet.get(name)
+
+              if (theme) {
+                if (importedThemes.includes(name))
+                  throw new Error(
+                    `Circular "${name}" theme import is detected.`
+                  )
+
+                const processed = postcss([
+                  plugin(themeSet, [...importedThemes, name]),
+                ]).process(theme.css)
+
+                if (node.name === 'import') {
+                  node.replaceWith(processed.root)
+                } else {
+                  node.remove()
+                  prepends.unshift(processed.root)
+                }
               }
             }
-          }
-        })
+          })
 
-        for (const root of prepends) css.first.before(root)
-      },
-    ])
-)
+          for (const root of prepends) css.first.before(root)
+        }
+      )(),
+    ],
+  }))
 
 export default plugin

src/postcss/import/rollup.js

@@ -1,5 +1,5 @@
 /** @module */
-import postcss from 'postcss'
+import postcssPlugin from '../../helpers/postcss_plugin'
 
 /**
  * Marpit PostCSS import rollup plugin.
@@ -12,7 +12,7 @@ import postcss from 'postcss'
  *
  * @alias module:postcss/import/rollup
  */
-const plugin = postcss.plugin('marpit-postcss-import-rollup', () => (css) => {
+const plugin = postcssPlugin('marpit-postcss-import-rollup', () => (css) => {
   const rolluped = {
     charset: undefined,
     imports: [],

src/postcss/import/suppress.js

@@ -1,5 +1,5 @@
 /** @module */
-import postcss from 'postcss'
+import postcssPlugin from '../../helpers/postcss_plugin'
 import postcssImportParse from './parse'
 
 /**
@@ -13,16 +13,16 @@ import postcssImportParse from './parse'
  * @alias module:postcss/import/suppress
  * @param {ThemeSet} themeSet ThemeSet instance.
  */
-const plugin = postcss.plugin('marpit-postcss-import-suppress', (themeSet) =>
-  postcss([
-    postcssImportParse,
-    (css) => {
+const plugin = postcssPlugin('marpit-postcss-import-suppress', (themeSet) => ({
+  plugins: [
+    postcssImportParse(),
+    postcssPlugin('marpit-postcss-import-suppress', () => (css) => {
       css.walk((node) => {
         if (node.marpitImportParse && themeSet.has(node.marpitImportParse))
           node.replaceWith(`${node.raw('before')}/* ${node.toString()}; */`)
       })
-    },
-  ])
-)
+    })(),
+  ],
+}))
 
 export default plugin

src/postcss/meta.js

@@ -1,5 +1,5 @@
 /** @module */
-import postcss from 'postcss'
+import postcssPlugin from '../helpers/postcss_plugin'
 
 /**
  * Marpit PostCSS meta plugin.
@@ -10,26 +10,26 @@ import postcss from 'postcss'
  * @param {Object} [opts.metaType] An object for defined types for metadata.
  * @alias module:postcss/meta
  */
-const plugin = postcss.plugin(
+const plugin = postcssPlugin(
   'marpit-postcss-meta',
-  (opts = {}) => (css, ret) => {
+  (opts = {}) => (css, { result }) => {
     const metaType = opts.metaType || {}
 
-    ret.marpitMeta = ret.marpitMeta || {}
+    result.marpitMeta = result.marpitMeta || {}
 
     css.walkComments((comment) => {
       comment.text
         .slice(0)
         .replace(/^[*!\s]*@([\w-]+)\s+(.+)$/gim, (_, metaName, value) => {
           if (metaType[metaName] === Array) {
             // Array meta
-            ret.marpitMeta[metaName] = [
-              ...(ret.marpitMeta[metaName] || []),
+            result.marpitMeta[metaName] = [
+              ...(result.marpitMeta[metaName] || []),
               value,
             ]
           } else {
             // String meta (default)
-            ret.marpitMeta[metaName] = value
+            result.marpitMeta[metaName] = value
           }
         })
     })

src/postcss/pagination.js

@@ -1,5 +1,5 @@
 /** @module */
-import postcss from 'postcss'
+import postcssPlugin from '../helpers/postcss_plugin'
 
 /**
  * Marpit PostCSS pagination plugin.
@@ -13,7 +13,7 @@ import postcss from 'postcss'
  *
  * @alias module:postcss/pagination
  */
-const plugin = postcss.plugin('marpit-postcss-pagination', () => (css) => {
+const plugin = postcssPlugin('marpit-postcss-pagination', () => (css) => {
   css.walkRules((rule) => {
     if (
       rule.selectors.some((selector) =>

src/postcss/printable.js

@@ -1,5 +1,5 @@
 /** @module */
-import postcss from 'postcss'
+import postcssPlugin from '../helpers/postcss_plugin'
 
 const marpitPrintContainerStyle = `
 html, body {
@@ -20,7 +20,7 @@ html, body {
  * @param {string} opts.height
  * @alias module:postcss/printable
  */
-const plugin = postcss.plugin('marpit-postcss-printable', (opts) => (css) => {
+const plugin = postcssPlugin('marpit-postcss-printable', (opts) => (css) => {
   css.walkAtRules('media', (rule) => {
     if (rule.params === 'marpit-print') rule.remove()
   })
@@ -61,7 +61,7 @@ const plugin = postcss.plugin('marpit-postcss-printable', (opts) => (css) => {
  *
  * @alias module:postcss/printable.postprocess
  */
-export const postprocess = postcss.plugin(
+export const postprocess = postcssPlugin(
   'marpit-postcss-printable-postprocess',
   () => (css) =>
     css.walkAtRules('media', (rule) => {

src/postcss/pseudo_selector/prepend.js

@@ -1,5 +1,5 @@
 /** @module */
-import postcss from 'postcss'
+import postcssPlugin from '../../helpers/postcss_plugin'
 
 /**
  * Marpit PostCSS pseudo selector prepending plugin.
@@ -9,7 +9,7 @@ import postcss from 'postcss'
  *
  * @alias module:postcss/pseudo_selector/prepend
  */
-const plugin = postcss.plugin(
+const plugin = postcssPlugin(
   'marpit-postcss-pseudo-selector-prepend',
   () => (css) =>
     css.walkRules((rule) => {

src/postcss/pseudo_selector/replace.js

@@ -1,6 +1,6 @@
 /** @module */
 import cssesc from 'cssesc'
-import postcss from 'postcss'
+import postcssPlugin from '../../helpers/postcss_plugin'
 import wrapArray from '../../helpers/wrap_array'
 
 const buildSelector = (elms) =>
@@ -28,7 +28,7 @@ const buildSelector = (elms) =>
  * @param {Element|Element[]} [elements] Container elements
  * @param {Element|Element[]} [slideElements={ tag: 'section' }] Slide elements
  */
-const plugin = postcss.plugin(
+const plugin = postcssPlugin(
   'marpit-postcss-pseudo-selector-replace',
   (elements, slideElements = { tag: 'section' }) => {
     const container = buildSelector([...wrapArray(elements)])