Fix RDMD titles' font size issue. (#699)

* chore(markdown): use lodash kebabcase single package

* style(markdown/headings): fix font size css

* sync lockfiles

packages/markdown/components/Heading/style.scss

@@ -21,7 +21,7 @@
     right: 100%;
     top: unset !important;
     margin-right: -.8rem;
-    padding: .8em .2em .8em 0 !important;
+    padding: .8rem .2rem .8rem 0 !important;
     font-size: .8rem !important;
     text-decoration: none;
     color: inherit;

packages/markdown/package.json

@@ -15,7 +15,7 @@
     "copy-to-clipboard": "^3.3.1",
     "hast-util-sanitize": "^1.2.0",
     "hast-util-to-string": "^1.0.3",
-    "lodash": "^4.17.15",
+    "lodash.kebabcase": "^4.1.1",
     "prop-types": "^15.7.2",
     "react": "^16.4.2",
     "rehype-raw": "^4.0.1",

packages/markdown/processor/plugin/section-anchor-id.js

@@ -1,5 +1,5 @@
 const flatMap = require('unist-util-flatmap');
-const kebabCase = require('lodash/kebabCase');
+const kebabCase = require('lodash.kebabcase');
 
 const matchTag = /^h[1-6]$/g;
 

packages/markdown/styles/gfm.scss

@@ -120,6 +120,21 @@
     cursor: pointer
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.25;
+    color: var(--markdown-title);
+    font-family: var(--markdown-title-font);
+    font-size: var(--markdown-title-size);
+    font-weight: var(--markdown-title-weight, 600);
+    margin-top: var(--markdown-title-marginTop, 1em);
+    margin-bottom: var(--markdown-title-marginBottom, 1rem);
+  }
+
   h1,
   h2 {
     font-size: 1.5em;
@@ -169,21 +184,6 @@
     color: var(--markdown-title, #6a737d);
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.25;
-    color: var(--markdown-title);
-    font-family: var(--markdown-title-font);
-    font-size: var(--markdown-title-size);
-    font-weight: var(--markdown-title-weight, 600);
-    margin-top: var(--markdown-title-marginTop, 1em);
-    margin-bottom: var(--markdown-title-marginBottom, 1rem);
-  }
-
   p,
   .p {
     margin-bottom: 10px;