Merge pull request #448 from marp-team/transition-v2

Update transition experiment for bespoke template (second iteration)

Author: yhatt

.stylelintrc.yml

@@ -11,5 +11,23 @@ rules:
     - true
     - ignoreProperties:
         - content-visibility
+  selector-pseudo-element-no-unknown:
+    - true
+    - ignorePseudoElements:
+        - /^page-transition-/
+  selector-type-no-unknown:
+    - true
+    - ignoreTypes:
+        - __bespoke_marp_transition_osc__
   scss/at-rule-no-unknown:
     - true
+
+overrides:
+  - files:
+      - src/engine/transition/keyframes/**/*.scss
+      - src/engine/transition/keyframes/**/*.css
+    rules:
+      block-no-empty:
+        - null
+      keyframes-name-pattern:
+        - marp-(incoming-|outgoing-)?transition-(backward-)?__builtin__[a-z0-9-]+

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+### Changed
+
+- ⚡️ Updates of experimental transition for bespoke template `--bespoke.transition` ([#447](https://github.com/marp-team/marp-cli/issues/447), [#448](https://github.com/marp-team/marp-cli/pull/448))
+  - More built-in transitions (5 transitions -> 33 transitions)
+  - Define custom transitions by `@keyframes` declaration in CSS
+  - Update spec of `transition` local directive
+  - Opt-out transition animation by preferring `prefers-reduced-motion` media query
+
 ## v1.7.2 - 2022-04-24
 
 ### Changed

README.md

@@ -271,9 +271,9 @@ The `bespoke` template is using [Bespoke.js](https://github.com/bespokejs/bespok
 - **Fragmented list**: Recognize [Marpit's fragmented list](https://github.com/marp-team/marpit/issues/145) and appear list one-by-one if used `*` and `1)` as the bullet marker.
 - **Presenter view**: Open presenter view in external window by hitting <kbd>p</kbd> key.
 - **Progress bar** (optional): By setting `--bespoke.progress` option, you can add a progress bar on the top of the deck.
-- [**Slide transitions** _(EXPERIMENTAL)_][transitions]: You may turn on slide transitions support powered by [Shared Element Transitions API proposal](https://github.com/WICG/shared-element-transitions) by `--bespoke.transition` option. Refer to [marp-team/marp-cli#382][transitions] for details.
+- [**Slide transitions** _(EXPERIMENTAL)_][transitions]: You may turn on slide transitions support powered by [Shared Element Transitions API proposal](https://github.com/WICG/shared-element-transitions) by `--bespoke.transition` option. Refer to [marp-team/marp-cli#447][transitions] for details.
 
-[transitions]: https://github.com/marp-team/marp-cli/issues/382
+[transitions]: https://github.com/marp-team/marp-cli/issues/447
 
 > ℹ️ Presenter view may be disabled if [the browser restricted using localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#Feature-detecting_localStorage) (e.g. Open HTML in the old Safari with private browsing, or open the _local_ HTML file with Chrome that has blocked 3rd party cookies in `chrome://settings/content/cookies`).
 

package.json

@@ -41,6 +41,10 @@
   "pkg": {
     "scripts": "lib/**/*.js"
   },
+  "browserslist": [
+    "> 1% and last 3 versions",
+    "Firefox ESR"
+  ],
   "scripts": {
     "build": "yarn -s clean && rollup -c",
     "build:standalone": "run-s build standalone",
@@ -74,7 +78,7 @@
     "@tsconfig/node12": "^1.0.9",
     "@types/cheerio": "^0.22.31",
     "@types/express": "^4.17.13",
-    "@types/jest": "^27.4.1",
+    "@types/jest": "^27.5.1",
     "@types/markdown-it": "^12.2.3",
     "@types/node": "~16.11.25",
     "@types/pug": "^2.0.6",
@@ -100,7 +104,8 @@
     "globby": "^13.1.1",
     "image-size": "^1.0.1",
     "is-docker": "^3.0.0",
-    "jest": "^27.5.1",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
     "jest-junit": "^13.1.0",
     "nanoid": "^3.3.2",
     "npm-run-all": "^4.1.5",
@@ -127,7 +132,7 @@
     "stylelint-config-standard-scss": "^3.0.0",
     "supertest": "^6.2.2",
     "tar-stream": "^2.2.0",
-    "ts-jest": "^27.1.4",
+    "ts-jest": "^28.0.2",
     "ts-key-enum": "^3.0.11",
     "tslib": "^2.3.1",
     "typed-emitter": "^2.1.0",

postcss.config.js

@@ -0,0 +1,24 @@
+const autoprefixer = require('autoprefixer')
+const cssnano = require('cssnano')
+const postcssUrl = require('postcss-url')
+
+const plugins = (opts = {}) => {
+  const preserveEmptyDefinitions = opts.preserveEmptyDefinitions || false
+
+  return [
+    postcssUrl({
+      filter: '**/assets/**/*.svg',
+      encodeType: 'base64',
+      url: 'inline',
+    }),
+    autoprefixer(),
+    cssnano({
+      preset: [
+        'default',
+        { autoprefixer: false, discardEmpty: !preserveEmptyDefinitions },
+      ],
+    }),
+  ]
+}
+
+module.exports = Object.assign(() => ({ plugins: plugins() }), { plugins })

rollup.config.js

@@ -6,10 +6,7 @@ import { nodeResolve } from '@rollup/plugin-node-resolve'
 import replace from '@rollup/plugin-replace'
 import typescript from '@rollup/plugin-typescript'
 import url from '@rollup/plugin-url'
-import autoprefixer from 'autoprefixer'
 import builtinModules from 'builtin-modules'
-import cssnano from 'cssnano'
-import postcssUrl from 'postcss-url'
 import license from 'rollup-plugin-license'
 import postcss from 'rollup-plugin-postcss'
 import pugPlugin from 'rollup-plugin-pug'
@@ -40,18 +37,7 @@ const plugins = (opts = {}) => [
   }),
   commonjs(),
   typescript({ noEmitOnError: false }),
-  postcss({
-    inject: false,
-    plugins: [
-      postcssUrl({
-        filter: '**/assets/**/*.svg',
-        encodeType: 'base64',
-        url: 'inline',
-      }),
-      autoprefixer(),
-      cssnano({ preset: 'default' }),
-    ],
-  }),
+  postcss({ inject: false }),
   pugPlugin({ pugRuntime: 'pug-runtime' }),
   url({
     sourceDir: path.join(__dirname, 'lib'),

src/config.ts

@@ -130,7 +130,7 @@ export class MarpCLIConfig {
               (preview
                 ? ''
                 : `Recommend to use with ${chalk.yellow`--preview`} option for trying transitions. `) +
-              `Track the latest information at ${chalk.blueBright`https://github.com/marp-team/marp-cli/issues/382`}.`
+              `Track the latest information at ${chalk.blueBright`https://github.com/marp-team/marp-cli/issues/447`}.`
           )
         }
 

src/converter.ts

@@ -8,6 +8,7 @@ import { silence, warn } from './cli'
 import { Engine, ResolvedEngine } from './engine'
 import infoPlugin, { engineInfo, EngineInfo } from './engine/info-plugin'
 import metaPlugin from './engine/meta-plugin'
+import { engineTransition, EngineTransition } from './engine/transition-plugin'
 import { error } from './error'
 import { File, FileType } from './file'
 import templates, {
@@ -163,11 +164,13 @@ export class Converter {
 
         const ret = engine.render(stripBOM(`${markdown}${additionals}`))
         const info = engine[engineInfo]
+        const transition: EngineTransition | undefined =
+          engine[engineTransition]
 
         if (isFile(file))
           this.options.themeSet.observe(file.absolutePath, info?.theme)
 
-        return { ...ret, ...info! }
+        return { ...ret, ...info!, transition }
       },
     })
   }