@readme/markdown 6.62.2 → 6.62.4

package/package.json

@@ -2,7 +2,7 @@
   "name": "@readme/markdown",
   "description": "ReadMe's React-based Markdown parser",
   "author": "Rafe Goldberg <rafe@readme.io>",
-  "version": "6.62.2",
+  "version": "6.62.4",
   "main": "dist/main.node.js",
   "browser": "dist/main.js",
   "files": [
@@ -13,7 +13,9 @@
   "scripts": {
     "build": "webpack --mode production",
     "heroku-postbuild": "make emojis && webpack --mode production --config ./webpack.dev.js",
-    "lint": "eslint . --ext .jsx --ext .js",
+    "lint": "npm run lint:js && npm run lint:css",
+    "lint:css": "stylelint '{components,styles}/**/*.{css,scss}'",
+    "lint:js": "eslint --ext ts,tsx,js,jsx .",
     "prepare": "husky install",
     "pretest": "npm run lint",
     "prettier": "prettier --list-different --write \"./**/**.{js,jsx}\"",
@@ -74,7 +76,8 @@
     "@commitlint/config-angular": "^17.1.0",
     "@commitlint/config-conventional": "^17.1.0",
     "@hot-loader/react-dom": "^16.14.0",
-    "@readme/eslint-config": "^10.1.1",
+    "@readme/eslint-config": "^10.5.2",
+    "@readme/stylelint-config": "^3.1.16",
     "@readme/variable": "^15.1.2",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/git": "^10.0.1",
@@ -96,6 +99,7 @@
     "jest-puppeteer": "^6.1.1",
     "mini-css-extract-plugin": "^2.6.1",
     "node-sass": "^7.0.3",
+    "postcss": "^8.4.23",
     "prettier": "^2.7.1",
     "puppeteer": "^19.0.0",
     "react": "^16.14.0",
@@ -105,6 +109,7 @@
     "sass-loader": "^13.1.0",
     "semantic-release": "^19.0.5",
     "string.prototype.trimend": "^1.0.5",
+    "stylelint": "^14.16.1",
     "terser-webpack-plugin": "^5.3.6",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",

package/styles/components.scss

@@ -1,10 +1,9 @@
-@import '../components/Image/style.scss';
-@import '../components/Table/style.scss';
-@import '../components/TableOfContents/style.scss';
-@import '../components/Code/style.scss';
-@import '../components/CodeTabs/style.scss';
-@import '../components/Callout/style.scss';
-@import '../components/Heading/style.scss';
-@import '../components/HTMLBlock/style.scss';
-@import '../components/Embed/style.scss';
-@import '../components/GlossaryItem/style.scss';
+@import '../components/Image/style';
+@import '../components/Table/style';
+@import '../components/TableOfContents/style';
+@import '../components/Code/style';
+@import '../components/CodeTabs/style';
+@import '../components/Callout/style';
+@import '../components/Heading/style';
+@import '../components/Embed/style';
+@import '../components/GlossaryItem/style';

package/styles/gfm.scss

@@ -1,19 +1,22 @@
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable declaration-block-no-duplicate-properties */
+/* stylelint-disable custom-property-pattern */
+/* stylelint-disable scss/selector-no-redundant-nesting-selector */
 @mixin gfm {
-  @include markdownDefaults;
-  @include markdownOverrides;
+  @include markdown-defaults;
+  @include markdown-overrides;
 }
 
-@mixin markdownDefaults {
-  & {
-    -ms-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
-    position: relative;
-    font-family: var(--markdown-font);
-    line-height: var(--markdown-line-height);
-    color: var(--markdown-text);
-    word-wrap: break-word;
-    @include _clearfix();
-  }
+@mixin markdown-defaults {
+  @include clearfix;
+
+  color: var(--markdown-text);
+  font-family: var(--markdown-font);
+  line-height: var(--markdown-line-height);
+  position: relative;
+  text-size-adjust: 100%;
+  word-wrap: break-word;
 
   ul {
     list-style: initial;
@@ -23,11 +26,11 @@
     float: left;
     line-height: 1;
     margin-left: -20px;
-    padding-right: 4px
+    padding-right: 4px;
   }
 
   .anchor:focus {
-    outline: 0
+    outline: 0;
   }
 
   h1:hover .anchor,
@@ -36,19 +39,19 @@
   h4:hover .anchor,
   h5:hover .anchor,
   h6:hover .anchor {
-    text-decoration: none
+    text-decoration: none;
   }
 
   details {
-    display: block
+    display: block;
   }
 
   summary {
-    display: list-item
+    display: list-item;
   }
 
   a {
-    transition: .15s ease;
+    transition: 0.15s ease;
 
     &:hover {
       text-decoration: underline;
@@ -57,68 +60,66 @@
 
   a:active,
   a:hover {
-    outline-width: 0
+    outline-width: 0;
   }
 
   a:not([href]) {
     color: inherit;
-    text-decoration: none
+    text-decoration: none;
   }
 
   strong {
     font-weight: inherit;
-    font-weight: bolder
+    font-weight: bolder;
   }
 
   h1 {
     font-size: 2em;
-    margin: .67em 0
+    margin: 0.67em 0;
   }
 
   hr {
-    box-sizing: content-box;
+    @include clearfix;
 
+    background: transparent;
+    border-bottom: 1px solid var(--markdown-edge, #dfe2e5);
+    border-width: 0 0 1px;
+    box-sizing: content-box;
     height: 0;
-    overflow: hidden;
     margin: 15px 0;
-
-    border-width: 0 0 1px;
-    border-bottom: 1px solid var(--markdown-edge, #dfe2e5);
-    background: transparent;
-
-    @include _clearfix();
+    overflow: hidden;
   }
 
   input {
     font: inherit;
-    margin: 0
+    margin: 0;
   }
 
   input {
-    overflow: visible
+    overflow: visible;
   }
 
-  [type=checkbox] {
+  [type='checkbox'] {
     box-sizing: border-box;
-    padding: 0
+    padding: 0;
   }
 
   * {
-    box-sizing: border-box
+    box-sizing: border-box;
   }
 
   input {
     font-family: inherit;
     font-size: inherit;
-    line-height: inherit
+    line-height: inherit;
   }
 
   strong {
-    font-weight: 600
+    font-weight: 600;
   }
 
   details summary {
-    cursor: pointer
+    cursor: pointer;
   }
 
   h1,
@@ -127,20 +128,20 @@
   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);
+    line-height: 1.25;
     margin-bottom: var(--markdown-title-marginBottom, 1rem);
+    margin-top: var(--markdown-title-marginTop, 1em);
   }
 
   h1 {
     font-size: 1.75em;
     font-size: var(--markdown-title-size, 1.75em);
   }
-  
+
   h2 {
     font-size: 1.5em;
     font-size: var(--markdown-title-size, 1.5em);
@@ -179,62 +180,62 @@
   }
 
   h5 {
-    font-size: .875em;
-    font-size: var(--markdown-title-size, .875em);
+    font-size: 0.875em;
+    font-size: var(--markdown-title-size, 0.875em);
   }
 
   h6 {
-    font-size: .85em;
-    font-size: var(--markdown-title-size, .85em);
     color: var(--markdown-title, #6a737d);
+    font-size: 0.85em;
+    font-size: var(--markdown-title-size, 0.85em);
   }
 
   p,
   .p {
     margin-bottom: 10px;
-    margin-top: 0
+    margin-top: 0;
   }
 
   blockquote {
-    margin: 0
+    margin: 0;
   }
 
   ol,
   ul {
     margin-bottom: 0;
     margin-top: 0;
-    padding-left: 0
+    padding-left: 0;
   }
 
   ol ol,
   ul ol {
-    list-style-type: lower-roman
+    list-style-type: lower-roman;
   }
 
   ol ol ol,
   ol ul ol,
   ul ol ol,
   ul ul ol {
-    list-style-type: lower-alpha
+    list-style-type: lower-alpha;
   }
 
   dd {
-    margin-left: 0
+    margin-left: 0;
   }
 
   input::-webkit-inner-spin-button,
   input::-webkit-outer-spin-button {
-    -webkit-appearance: none;
     appearance: none;
-    margin: 0
+    appearance: none;
+    margin: 0;
   }
 
-  &> :first-child {
-    margin-top: 0 !important
+  & > :first-child {
+    margin-top: 0 !important;
   }
 
-  &>:last-child {
-    margin-bottom: 0 !important
+  & > :last-child {
+    margin-bottom: 0 !important;
   }
 
   blockquote,
@@ -244,28 +245,28 @@
   pre,
   table,
   ul {
-    margin-top: 0;
     margin-bottom: 15px;
+    margin-top: 0;
   }
 
   blockquote {
-    display: block;
-    border-left: .25em solid #dfe2e5;
+    border-left: 0.25em solid #dfe2e5;
     color: #6a737d;
-    padding: 0 1em
+    display: block;
+    padding: 0 1em;
   }
 
-  blockquote>:first-child {
-    margin-top: 0
+  blockquote > :first-child {
+    margin-top: 0;
   }
 
-  blockquote>:last-child {
-    margin-bottom: 0
+  blockquote > :last-child {
+    margin-bottom: 0;
   }
 
   ol,
   ul {
-    padding-left: 2em
+    padding-left: 2em;
   }
 
   ol ol,
@@ -273,23 +274,23 @@
   ul ol,
   ul ul {
     margin-bottom: 0;
-    margin-top: 0
+    margin-top: 0;
   }
 
   li {
-    word-wrap: break-all
+    word-wrap: break-all;
   }
 
-  li>p {
-    margin-top: 1em
+  li > p {
+    margin-top: 1em;
   }
 
-  li+li {
-    margin-top: .25em
+  li + li {
+    margin-top: 0.25em;
   }
 
   dl {
-    padding: 0
+    padding: 0;
   }
 
   dl dt {
@@ -297,31 +298,31 @@
     font-style: italic;
     font-weight: 600;
     margin-top: 1em;
-    padding: 0
+    padding: 0;
   }
 
   dl dd {
     margin-bottom: 1em;
-    padding: 0 1em
+    padding: 0 1em;
   }
 
-  :checked+.radio-label {
+  :checked + .radio-label {
     border-color: var(--project-color-primary);
     position: relative;
-    z-index: 1
+    z-index: 1;
   }
 
   .task-list-item {
-    list-style-type: none
+    list-style-type: none;
   }
 
-  .task-list-item+.task-list-item {
-    margin-top: 3px
+  .task-list-item + .task-list-item {
+    margin-top: 3px;
   }
 
   .task-list-item input {
-    margin: 0 .2em .25em -1.6em;
-    vertical-align: middle
+    margin: 0 0.2em 0.25em -1.6em;
+    vertical-align: middle;
   }
 
   p.blank-line {
@@ -329,38 +330,40 @@
   }
 }
 
-@mixin markdownOverrides {
+@mixin markdown-overrides {
   h5,
   h6 {
-    font-size: .9em;
+    font-size: 0.9em;
   }
 
-
   blockquote h1:last-child,
   blockquote h2:last-child {
     border-bottom: 0;
   }
 
-
-  >* {
-    margin-top: 15px;
+  > * {
     margin-bottom: 15px !important;
+    margin-top: 15px;
   }
 
-
   .task-list-item input {
-    margin: 0 .5em .25em -1.25em;
+    margin: 0 0.5em 0.25em -1.25em;
   }
 
-  a[href], a:not([href=""]) {
-    text-decoration: underline
+  a[href],
+  a:not([href='']) {
+    text-decoration: underline;
   }
 }
 
-@mixin _clearfix() {
-  &:before, &:after {
-    content: "";
+@mixin clearfix() {
+  &::before,
+  &::after {
+    content: '';
     display: table;
   }
-  &:after { clear: both }
+
+  &::after {
+    clear: both;
+  }
 }

package/styles/main.scss

@@ -1,5 +1,5 @@
-@import './gfm.scss';
-@import './components.scss';
+@import './gfm';
+@import './components';
 
 :root {
   // --markdown-radius: 3px;
@@ -15,5 +15,6 @@
 .field-description,
 .markdown-body {
   @include gfm;
+
   font-size: var(--markdown-font-size, 14px);
-}
+}

package/components/HTMLBlock/style.scss

@@ -1,2 +0,0 @@
-.markdown-body {
-}