Merge pull request #360 from marp-team/enable-container-query

Enable CSS container query support by default

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- Enabled [`cssContainerQuery` constructor option from Marpit framework](https://marpit-api.marp.app/marpit#Marpit) by default ([#360](https://github.com/marp-team/marp-core/pull/360))
+
 ### Changed
 
 - Upgrade Marpit to [v2.6.1](https://github.com/marp-team/marpit/releases/v2.6.1) ([#358](https://github.com/marp-team/marp-core/pull/358))

README.md

@@ -44,7 +44,7 @@ _We will only explain features extended in marp-core._ Please refer to [Marpit f
 **Marp Markdown** is a custom Markdown flavor based on [Marpit](https://marpit.marp.app) and [CommonMark](https://commonmark.org/). Following are principle differences from the original:
 
 - **Marpit**
-  - Enabled [inline SVG slide](https://marpit.marp.app/inline-svg) and [loose YAML parsing](https://marpit-api.marp.app/marpit#Marpit) by default.
+  - Enabled [inline SVG slide](https://marpit.marp.app/inline-svg), [CSS container query support and loose YAML parsing](https://marpit-api.marp.app/marpit#Marpit) by default.
 
 * **CommonMark**
   - For making secure, we will deny most of HTML tags used in Markdown by default. Allowed HTML tags are `<br>` only for now.

src/marp.ts

@@ -48,6 +48,7 @@ export class Marp extends Marpit {
     }
 
     super({
+      cssContainerQuery: true,
       inlineSVG: true,
       looseYAML: true,
       math: true,

test/marp.ts

@@ -58,6 +58,30 @@ describe('Marp', () => {
     })
   })
 
+  describe('Marpit options', () => {
+    describe('cssContainerQuery option', () => {
+      it('is enabled by default', () => {
+        const { css } = marp().render('')
+        expect(css).toContain('container-type:size')
+      })
+
+      it('can disable by setting cssContainerQuery constructor option as false', () => {
+        const { css } = marp({ cssContainerQuery: false }).render('')
+        expect(css).not.toContain('container-type')
+      })
+
+      it('can assign container name by setting cssContainerQuery constructor option as string or the array of strings', () => {
+        const single = marp({ cssContainerQuery: 'name' }).render('')
+        expect(single.css).toContain('container-type:size')
+        expect(single.css).toContain('container-name:name')
+
+        const multi = marp({ cssContainerQuery: ['name1', 'name2'] }).render('')
+        expect(multi.css).toContain('container-type:size')
+        expect(multi.css).toContain('container-name:name1 name2')
+      })
+    })
+  })
+
   describe('emoji option', () => {
     describe('shortcode option', () => {
       it('converts emoji shorthand to twemoji image by default', () => {