Merge pull request #334 from marp-team/deprecate-setting-colors-short…

…hand Emit deprecation warning when used color shorthand
marp-team · May 21, 2022 · 3920ce7 · 3920ce7
2 parents c086862 + dbac81e
commit 3920ce7
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 50 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,9 +10,13 @@
 
 - Match `:root` selector specificity to original exactly ([#330](https://github.com/marp-team/marpit/issues/330), [#333](https://github.com/marp-team/marpit/pull/333))
 
+### Deprecated
+
+- Emit deprecation warning when used color setting shorthand via Markdown image syntax ([#331](https://github.com/marp-team/marpit/issues/331), [#334](https://github.com/marp-team/marpit/pull/334))
+
 ### Removed
 
-- Continuous test against Node.js 10 ([#291](https://github.com/marp-team/marpit/issues/291), [#332](https://github.com/marp-team/marpit/pull/332))
+- Continuous test against EoL Node.js 10 ([#291](https://github.com/marp-team/marpit/issues/291), [#332](https://github.com/marp-team/marpit/pull/332))
 
 ## v2.2.4 - 2022-04-12
 

diff --git a/docs/image-syntax.md b/docs/image-syntax.md
@@ -2,21 +2,17 @@
 
 Marpit has extended Markdown image syntax `![](image.jpg)` to be helpful creating beautiful slides.
 
-|              Features               |    Inline image    | [Slide BG][slide-bg] | [Advanced BG][advanced-bg] |
-| :---------------------------------: | :----------------: | :------------------: | :------------------------: |
-|  [Resizing by keywords][resizing]   |    `auto` only     |  :heavy_check_mark:  |     :heavy_check_mark:     |
-| [Resizing by percentage][resizing]  |        :x:         |  :heavy_check_mark:  |     :heavy_check_mark:     |
-|   [Resizing by length][resizing]    | :heavy_check_mark: |  :heavy_check_mark:  |     :heavy_check_mark:     |
-|      [Image filters][filters]       | :heavy_check_mark: |         :x:          |     :heavy_check_mark:     |
-|  [Multiple backgrounds][multiple]   |         -          |         :x:          |     :heavy_check_mark:     |
-|     [Split backgrounds][split]      |         -          |         :x:          |     :heavy_check_mark:     |
-|   [Setting text color][textcolor]   | :heavy_check_mark: |          -           |             -              |
-| [Setting background color][bgcolor] |         -          |  :heavy_check_mark:  |     :heavy_check_mark:     |
+|              Features              |    Inline image    | [Slide BG][slide-bg] | [Advanced BG][advanced-bg] |
+| :--------------------------------: | :----------------: | :------------------: | :------------------------: |
+|  [Resizing by keywords][resizing]  |    `auto` only     |  :heavy_check_mark:  |     :heavy_check_mark:     |
+| [Resizing by percentage][resizing] |        :x:         |  :heavy_check_mark:  |     :heavy_check_mark:     |
+|   [Resizing by length][resizing]   | :heavy_check_mark: |  :heavy_check_mark:  |     :heavy_check_mark:     |
+|      [Image filters][filters]      | :heavy_check_mark: |         :x:          |     :heavy_check_mark:     |
+|  [Multiple backgrounds][multiple]  |         -          |         :x:          |     :heavy_check_mark:     |
+|     [Split backgrounds][split]     |         -          |         :x:          |     :heavy_check_mark:     |
 
 [resizing]: #resizing-image
 [filters]: #image-filters
-[textcolor]: #shorthand-for-setting-colors
-[bgcolor]: #shorthand-for-setting-colors
 [slide-bg]: #slide-backgrounds
 [advanced-bg]: #advanced-backgrounds
 [multiple]: #multiple-backgrounds
@@ -191,7 +187,7 @@ This feature is similar to [Deckset's Split Slides](https://docs.decksetapp.com/
 
 #### Split size
 
-Since v1.1.0, Marpit can specify split size for background by percentage like `left:33%`.
+Marpit can specify split size for background by percentage like `left:33%`.
 
 <div class="example">
 
@@ -207,36 +203,3 @@ Since v1.1.0, Marpit can specify split size for background by percentage like `l
 
 </span>
 </div>
-
-## Shorthand for setting colors
-
-Through Markdown image syntax, Marpit allows the definition of [color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) instead of the image URL.
-
-<!-- prettier-ignore-start -->
-
-```markdown
-# Hex color (White BG + Black text)
-
-![bg](#fff)
-![](#000)
-
----
-
-# Named color (rebeccapurple BG + White text)
-
-![bg](rebeccapurple)
-![](white)
-
----
-
-# RGB values (Orange BG + White text)
-
-![bg](rgb(255,128,0))
-![](rgb(255,255,255))
-```
-
-<!-- prettier-ignore-end -->
-
-It is same as defining [`color` and `backgroundColor` spot directive](/directives?id=local-directives-1).
-
-!> By the spec of CommonMark, it should not allow including spaces without escape if you want using color function like `rgb()`.
diff --git a/src/markdown/image/apply.js b/src/markdown/image/apply.js
@@ -37,7 +37,7 @@ function applyImage(md) {
     }
   })
 
-  // Shorthand for color spot directive
+  // [DEPRECATED] Shorthand for color spot directive
   md.core.ruler.after(
     'marpit_inline_svg',
     'marpit_apply_color',

diff --git a/src/markdown/image/parse.js b/src/markdown/image/parse.js
@@ -197,11 +197,20 @@ function parseImage(md) {
           options,
         }
 
+        // [DEPRECATED]
         // Detect shorthand for setting color (Use value before normalization)
         if (
           !!colorString.get(originalUrl) ||
           originalUrl.toLowerCase() === 'currentcolor'
         ) {
+          const replacedDirective = options.some((opt) => opt.content === 'bg')
+            ? 'backgroundColor'
+            : 'color'
+
+          console.warn(
+            `Deprecation warning: Shorthand for setting colors via Markdown image syntax is deprecated now, and will remove in next major release. Please replace to a scoped local direcitve <!-- _${replacedDirective}: "${originalUrl}" -->, or use the scoped style <style scoped>.`
+          )
+
           token.meta.marpitImage.color = originalUrl
           token.hidden = true
         }

diff --git a/test/markdown/image.js b/test/markdown/image.js
@@ -109,7 +109,7 @@ describe('Marpit image plugin', () => {
     })
   })
 
-  describe('Shorthand for text color', () => {
+  describe('[DEPRECATED] Shorthand for text color', () => {
     const colorMd = (src, opts = '') => `![${opts}](${src})`
     const colorDirective = (markdown) => {
       const [firstSlide] = md().parse(markdown)

diff --git a/test/marpit.js b/test/marpit.js
@@ -346,7 +346,7 @@ describe('Marpit', () => {
       })
     })
 
-    describe('Color shorthand', () => {
+    describe('[DEPRECATED] Color shorthand', () => {
       const md = '![](red)![bg](blue)'
 
       it('applies color to the current slide', () => {