chore(deps): update dependency stylelint to v14 (#32609)

* chore(deps): update dependency stylelint to v14 * Update package.json * fix some stylelint * fix some stylelint * fix some stylelint errors * fix some stylelint errors * fix some stylelint errors * fix some stylelint errors * fix some stylelint errors Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: afc163 <afc163@gmail.com>
2025-01-18 14:13:37 +08:00 · 2021-10-22 13:35:36 +08:00 · 2021-10-22 13:35:36 +08:00 · b6bd4c18b4
commit b6bd4c18b4
parent 628836505a
36 changed files with 68 additions and 87 deletions
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@ -4,14 +4,20 @@
    "stylelint-config-rational-order",
    "stylelint-config-prettier"
  ],
+  "customSyntax": "postcss-less",
  "plugins": ["stylelint-declaration-block-no-ignored-properties"],
  "rules": {
-    "comment-empty-line-before": null,
    "function-name-case": ["lower", { "ignoreFunctions": ["/colorPalette/"] }],
-    "no-invalid-double-slash-comments": null,
    "no-descending-specificity": null,
    "no-invalid-position-at-import-rule": null,
-    "declaration-empty-line-before": null
+    "declaration-empty-line-before": null,
+    "keyframes-name-pattern": null,
+    "custom-property-pattern": null,
+    "number-max-precision": 8,
+    "alpha-value-notation": "number",
+    "color-function-notation": "legacy",
+    "selector-class-pattern": null,
+    "selector-id-pattern": null
  },
  "ignoreFiles": ["components/style/color/{bezierEasing,colorPalette,tinyColor}.less"]
 }
--- a/components/badge/style/index.less
+++ b/components/badge/style/index.less
@ -193,8 +193,10 @@

 // Safari will blink with transform when inner element has absolute style.
 .safari-fix-motion() {
+  /* stylelint-disable property-no-vendor-prefix */
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
+  /* stylelint-enable property-no-vendor-prefix */
 }

 .@{number-prefix-cls} {
--- a/components/button/style/rtl.less
+++ b/components/button/style/rtl.less
@ -68,20 +68,14 @@
  > .@{btnClassName}:first-child:not(:last-child),
  > span:first-child:not(:last-child) > .@{btnClassName} {
    .@{btnClassName}-group-rtl& {
-      border-top-left-radius: 0;
-      border-top-right-radius: @btn-border-radius-base;
-      border-bottom-right-radius: @btn-border-radius-base;
-      border-bottom-left-radius: 0;
+      border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
    }
  }

  > .@{btnClassName}:last-child:not(:first-child),
  > span:last-child:not(:first-child) > .@{btnClassName} {
    .@{btnClassName}-group-rtl& {
-      border-top-left-radius: @btn-border-radius-base;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: @btn-border-radius-base;
+      border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
    }
  }

@ -89,20 +83,14 @@
    > .@{btnClassName}:first-child:not(:last-child),
    > span:first-child:not(:last-child) > .@{btnClassName} {
      .@{btnClassName}-group-rtl& {
-        border-top-left-radius: 0;
-        border-top-right-radius: @btn-border-radius-sm;
-        border-bottom-right-radius: @btn-border-radius-sm;
-        border-bottom-left-radius: 0;
+        border-radius: 0 @btn-border-radius-sm @btn-border-radius-sm 0;
      }
    }

    > .@{btnClassName}:last-child:not(:first-child),
    > span:last-child:not(:first-child) > .@{btnClassName} {
      .@{btnClassName}-group-rtl& {
-        border-top-left-radius: @btn-border-radius-sm;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: @btn-border-radius-sm;
+        border-radius: @btn-border-radius-sm 0 0 @btn-border-radius-sm;
      }
    }
  }
--- a/components/carousel/style/index.less
+++ b/components/carousel/style/index.less
@ -10,7 +10,6 @@
    position: relative;
    display: block;
    box-sizing: border-box;
-    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
--- a/components/date-picker/style/panel.less
+++ b/components/date-picker/style/panel.less
@ -665,7 +665,7 @@
 // Fix IE11 render bug by css hacks
 // https://github.com/ant-design/ant-design/issues/21559
 // https://codepen.io/afc163-1472555193/pen/mdJRaNj?editors=0110
-/* stylelint-disable-next-line */
+/* stylelint-disable-next-line selector-type-no-unknown,selector-no-vendor-prefix */
 _:-ms-fullscreen,
 :root {
  .@{picker-prefix-cls}-range-wrapper {
--- a/components/date-picker/style/rtl.less
+++ b/components/date-picker/style/rtl.less
@ -192,10 +192,7 @@
        left: 0;
        border-right: @border-width-base dashed @picker-date-hover-range-border-color;
        border-left: none;
-        border-top-left-radius: 0;
-        border-top-right-radius: @border-radius-base;
-        border-bottom-right-radius: @border-radius-base;
-        border-bottom-left-radius: 0;
+        border-radius: 0 @border-radius-base @border-radius-base 0;
      }
    }

@ -209,10 +206,7 @@
        left: 6px;
        border-right: none;
        border-left: @border-width-base dashed @picker-date-hover-range-border-color;
-        border-top-left-radius: @border-radius-base;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: @border-radius-base;
+        border-radius: @border-radius-base 0 0 @border-radius-base;
      }
    }

--- a/components/drawer/style/drawer.less
+++ b/components/drawer/style/drawer.less
@ -195,8 +195,7 @@

  &-wrapper-body {
    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
+    flex-flow: column nowrap;
    width: 100%;
    height: 100%;
  }
--- a/components/dropdown/style/index.less
+++ b/components/dropdown/style/index.less
@ -80,10 +80,7 @@
  &-placement-topLeft > &-arrow,
  &-placement-topRight > &-arrow {
    bottom: @popover-distance - @popover-arrow-width + 2.2px;
-    border-top-color: transparent;
-    border-right-color: @popover-bg;
-    border-bottom-color: @popover-bg;
-    border-left-color: transparent;
+    border-color: transparent @popover-bg @popover-bg transparent;
    box-shadow: 3px 3px 7px fade(@black, 7%);
  }

@ -104,10 +101,7 @@
  &-placement-bottomLeft > &-arrow,
  &-placement-bottomRight > &-arrow {
    top: @popover-distance - @popover-arrow-width + 2px;
-    border-top-color: @popover-bg;
-    border-right-color: transparent;
-    border-bottom-color: transparent;
-    border-left-color: @popover-bg;
+    border-color: @popover-bg transparent transparent @popover-bg;
    box-shadow: -2px -2px 5px fade(@black, 6%);
  }

--- a/components/empty/style/index.less
+++ b/components/empty/style/index.less
@ -62,7 +62,7 @@
      }

      &-2 {
-        fill: url(#linearGradient-1);
+        fill: url('#linearGradient-1');
      }

      &-3 {
@ -94,7 +94,7 @@
      }

      &-2 {
-        fill: url(#linearGradient-1);
+        fill: url('#linearGradient-1');
      }

      &-3 {
--- a/components/form/style/status.less
+++ b/components/form/style/status.less
@ -7,9 +7,11 @@
  // ================================================================
  // =                            Status                            =
  // ================================================================
+
  /* Some non-status related component style is in `components.less` */

  // ========================= Explain =========================
+
  /* To support leave along ErrorList. We add additional className to handle explain style */
  &-explain {
    &-error {
--- a/components/form/style/vertical.less
+++ b/components/form/style/vertical.less
@ -49,7 +49,7 @@
 }

 .@{form-prefix-cls}-vertical .@{form-item-prefix-cls}-label,
-  // when labelCol is 24, it is a vertical form
+/* when labelCol is 24, it is a vertical form */
 .@{ant-prefix}-col-24.@{form-item-prefix-cls}-label,
 .@{ant-prefix}-col-xl-24.@{form-item-prefix-cls}-label {
  .make-vertical-layout-label();
--- a/components/image/style/index.less
+++ b/components/image/style/index.less
@ -15,7 +15,7 @@

    &-placeholder {
      background-color: @image-bg;
-      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=);
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 30%;
--- a/components/input-number/style/index.less
+++ b/components/input-number/style/index.less
@ -103,13 +103,15 @@
    border-radius: @border-radius-base;
    outline: 0;
    transition: all 0.3s linear;
-    -moz-appearance: textfield !important;
+    appearance: textfield !important;
    .placeholder();

    &[type='number']::-webkit-inner-spin-button,
    &[type='number']::-webkit-outer-spin-button {
      margin: 0;
+      /* stylelint-disable-next-line property-no-vendor-prefix */
      -webkit-appearance: none;
+      appearance: none;
    }
  }

--- a/components/layout/style/index.less
+++ b/components/layout/style/index.less
@ -8,6 +8,7 @@
  display: flex;
  flex: auto;
  flex-direction: column;
+
  /* fix firefox can't set height smaller than content on flex item */
  min-height: 0;
  background: @layout-body-background;
@ -48,6 +49,7 @@

  &-content {
    flex: auto;
+
    /* fix firefox can't set height smaller than content on flex item */
    min-height: 0;
  }
--- a/components/mentions/style/index.less
+++ b/components/mentions/style/index.less
@ -37,6 +37,7 @@
    overflow: inherit;
    overflow-x: hidden;
    overflow-y: auto;
+    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
    font-weight: inherit;
    font-size: inherit;
    font-family: inherit;
@ -45,6 +46,7 @@
    font-size-adjust: inherit;
    font-stretch: inherit;
    line-height: inherit;
+    /* stylelint-enable declaration-block-no-redundant-longhand-properties */
    direction: inherit;
    letter-spacing: inherit;
    white-space: inherit;
--- a/components/select/style/index.less
+++ b/components/select/style/index.less
@ -58,6 +58,7 @@

    &::-webkit-search-cancel-button {
      display: none;
+      /* stylelint-disable-next-line property-no-vendor-prefix */
      -webkit-appearance: none;
    }
  }
--- a/components/select/style/single.less
+++ b/components/select/style/single.less
@ -45,9 +45,9 @@

    // For common baseline align
    &::after,
-    // For '' value baseline align
+    /* For '' value baseline align */
    .@{select-prefix-cls}-selection-item::after,
-    // For undefined value baseline align
+    /* For undefined value baseline align */
    .@{select-prefix-cls}-selection-placeholder::after {
      display: inline-block;
      width: 0;
--- a/components/steps/style/progress-dot.less
+++ b/components/steps/style/progress-dot.less
@ -37,6 +37,7 @@
        height: 100%;
        border-radius: 100px;
        transition: all 0.3s;
+
        /* expand hover area */
        &::after {
          position: absolute;
--- a/components/steps/style/rtl.less
+++ b/components/steps/style/rtl.less
@ -204,6 +204,7 @@
        .@{steps-prefix-cls}-rtl& {
          float: right;
        }
+
        /* expand hover area */
        &::after {
          .@{steps-prefix-cls}-rtl& {
--- a/components/style/core/global.less
+++ b/components/style/core/global.less
@ -1,4 +1,4 @@
-/* stylelint-disable at-rule-no-unknown */
+/* stylelint-disable property-no-vendor-prefix, at-rule-no-vendor-prefix */

 // Reboot
 //
--- a/components/style/mixins/compatibility.less
+++ b/components/style/mixins/compatibility.less
@ -3,6 +3,7 @@
 // Placeholder text
 .placeholder(@color: @input-placeholder-color) {
  // Firefox
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
  &::-moz-placeholder {
    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
  }
--- a/components/table/style/index.less
+++ b/components/table/style/index.less
@ -357,7 +357,7 @@
    }

    &-tree {
-      padding: 8px 8px 0 8px;
+      padding: 8px 8px 0;

      .@{tree-prefix-cls}-treenode .@{tree-prefix-cls}-node-content-wrapper:hover {
        background-color: @tree-node-hover-bg;
@ -604,7 +604,6 @@
  // ============================ Fixed =============================
  &-cell-fix-left,
  &-cell-fix-right {
-    position: -webkit-sticky !important;
    position: sticky !important;
    z-index: @zindex-table-fixed;
    background: @table-bg;
--- a/components/timeline/style/index.less
+++ b/components/timeline/style/index.less
@ -136,7 +136,6 @@
      .@{timeline-prefix-cls}-item-tail,
      .@{timeline-prefix-cls}-item-head,
      .@{timeline-prefix-cls}-item-head-custom {
-        // stylelint-disable-next-line function-calc-no-invalid
        left: calc(100% - 4px - @timeline-width);
      }
      .@{timeline-prefix-cls}-item-content {
--- a/components/typography/style/index.less
+++ b/components/typography/style/index.less
@ -190,7 +190,6 @@
    div& {
      left: -@input-padding-horizontal - 1px;
      margin-top: -@input-padding-vertical-base - 1px;
-      // stylelint-disable-next-line function-calc-no-invalid
      margin-bottom: calc(1em - @input-padding-vertical-base - 1px);
    }

@ -204,6 +203,7 @@

    // Fix Editable Textarea flash in Firefox
    textarea {
+      /* stylelint-disable-next-line property-no-vendor-prefix */
      -moz-transition: none;
    }
  }
@ -211,7 +211,7 @@
  // list
  ul,
  ol {
-    margin: 0 0 1em 0;
+    margin: 0 0 1em;
    padding: 0;

    li {
@ -281,9 +281,11 @@
  }

  &-ellipsis-multiple-line {
+    /* stylelint-disable-next-line value-no-vendor-prefix */
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
+
    /*! autoprefixer: ignore next */
    -webkit-box-orient: vertical;
  }
--- a/package.json
+++ b/package.json
@ -78,7 +78,7 @@
    "lint:deps": "antd-tools run deps-lint",
    "lint:md": "remark . -f -q",
    "lint:script": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "lint:style": "stylelint '{site,components}/**/*.less' --syntax less",
+    "lint:style": "stylelint '{site,components}/**/*.less'",
    "pre-publish": "npm run test-all -- --skip-build",
    "prettier": "prettier -c --write **/*",
    "pretty-quick": "pretty-quick",
@ -270,10 +270,10 @@
    "scrollama": "^2.0.0",
    "simple-git": "^2.23.0",
    "string-replace-loader": "^3.0.3",
-    "stylelint": "^13.0.0",
+    "stylelint": "^14.0.0",
    "stylelint-config-prettier": "^9.0.2",
    "stylelint-config-rational-order": "^0.1.2",
-    "stylelint-config-standard": "^22.0.0",
+    "stylelint-config-standard": "^23.0.0",
    "stylelint-declaration-block-no-ignored-properties": "^2.1.0",
    "stylelint-order": "^5.0.0",
    "theme-switcher": "^1.0.2",
--- a/site/theme/static/highlight.less
+++ b/site/theme/static/highlight.less
@ -28,12 +28,7 @@ pre[class*='language-'] {
  word-wrap: normal;
  word-break: normal;
  word-spacing: normal;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
  tab-size: 4;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
  hyphens: none;
  background: none;
 }
@ -42,17 +37,7 @@ code[class*='css'] {
  direction: ltr;
 }

-pre[class*='language-']::-moz-selection,
-pre[class*='language-'] ::-moz-selection,
-code[class*='language-']::-moz-selection,
-code[class*='language-'] ::-moz-selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-pre[class*='language-']::selection,
 pre[class*='language-'] ::selection,
-code[class*='language-']::selection,
 code[class*='language-'] ::selection {
  text-shadow: none;
  background: #b3d4fc;
--- a/site/theme/static/icons.less
+++ b/site/theme/static/icons.less
@ -87,7 +87,7 @@ ul.anticons-list {
 }

 .copied-code {
-  padding: 2px 4px 2px;
+  padding: 2px 4px;
  font-size: 12px;
  background: #f5f5f5;
  border-radius: 2px;
--- a/site/theme/static/markdown.less
+++ b/site/theme/static/markdown.less
@ -289,7 +289,7 @@

    th {
      padding-top: 14px;
-      border-width: 1px 0 2px 0;
+      border-width: 1px 0 2px;
    }

    tbody tr {
--- a/site/theme/static/motion.less
+++ b/site/theme/static/motion.less
@ -14,7 +14,8 @@
  font-size: 18px;
  line-height: 180px;
  text-align: center;
-  background: url(https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg) center/180px;
+  background: url('https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg')
+    center/180px;
  border-radius: 8px;
  animation-duration: 0.5s !important;
 }
--- a/site/theme/static/responsive.less
+++ b/site/theme/static/responsive.less
@ -109,6 +109,7 @@
  #_hj_feedback_container {
    display: none;
  }
+
  /** home 区块 **/
  .home-page-wrapper {
    .page {
--- a/site/theme/template/Home/Banner/index.less
+++ b/site/theme/template/Home/Banner/index.less
@ -8,7 +8,7 @@
  overflow: hidden;
  // background: radial-gradient(rgba(255, 255, 255, 0.5), rgba(235, 245, 255, 0.58)),
  // linear-gradient(150deg, #fbfcfd, #f8fcff);
-  background: url(https://gw.alipayobjects.com/zos/basement_prod/a8cf2dfe-ff6a-4a2e-ab73-f72dced0df99.svg);
+  background: url('https://gw.alipayobjects.com/zos/basement_prod/a8cf2dfe-ff6a-4a2e-ab73-f72dced0df99.svg');
  background-size: cover;

  &-holder {
@ -91,7 +91,7 @@

 .banner-qr-code {
  .ant-popover-inner-content {
-    padding: 12px 12px;
+    padding: 12px;
  }

  img {
@ -100,7 +100,7 @@
  }

  p {
-    margin: 8px 0 0 0;
+    margin: 8px 0 0;
    color: #314659;
    text-align: center;
  }
--- a/site/theme/template/Home/DesignPage/index.less
+++ b/site/theme/template/Home/DesignPage/index.less
@ -9,7 +9,7 @@
  background: rgba(0, 0, 0, 0.1);

  &.main-card {
-    background-image: url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*i1EySrFVZvAAAAAAAAAAAABkARQnAQ);
+    background-image: url('https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*i1EySrFVZvAAAAAAAAAAAABkARQnAQ');
    background-size: cover;
  }

@ -83,7 +83,7 @@
  }

  .ant-card-body {
-    padding: 16px 20px 20px 20px;
+    padding: 16px 20px 20px;
  }

  .ant-card-meta-description {
@ -116,7 +116,7 @@
    &.main-card {
      height: auto;
      padding-bottom: 16px;
-      background-image: url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*a8u5Q4QIJzcAAAAAAAAAAABkARQnAQ);
+      background-image: url('https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*a8u5Q4QIJzcAAAAAAAAAAABkARQnAQ');
    }

    h3.ant-typography {
--- a/site/theme/template/Home/MorePage.less
+++ b/site/theme/template/Home/MorePage.less
@ -6,7 +6,7 @@
  }

  .ant-card-cover {
-    padding: 24px 24px 0 24px;
+    padding: 24px 24px 0;
  }

  .ant-card-body {
@ -51,7 +51,7 @@
  .more-card {
    .ant-card-cover {
      margin-bottom: 12px;
-      padding: 16px 16px 0 16px;
+      padding: 16px 16px 0;

      img {
        height: 184px;
--- a/site/theme/template/Home/RecommendPage.less
+++ b/site/theme/template/Home/RecommendPage.less
@ -66,7 +66,7 @@
    color: #314659;
    line-height: 28px;
    background: #ffd75a;
-    border-radius: 0 0 4px 0;
+    border-radius: 0 0 4px;
  }

  .recommend-content {
--- a/site/theme/template/Resources/Articles/index.less
+++ b/site/theme/template/Resources/Articles/index.less
@ -2,7 +2,7 @@

 #articles {
  h4 {
-    margin: 40px 0 24px 0;
+    margin: 40px 0 24px;
    font-weight: 500;
    font-size: 20px;
  }
--- a/site/theme/template/Resources/index.less
+++ b/site/theme/template/Resources/index.less
@ -13,7 +13,7 @@
      margin: 0 -@resource-padding;
      padding: 0 @resource-padding;
      overflow: hidden;
-      background: url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*y_r7RogIG1wAAAAAAAAAAABkARQnAQ);
+      background: url('https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*y_r7RogIG1wAAAAAAAAAAABkARQnAQ');
      background-size: cover;

      h1 {
@ -86,19 +86,19 @@
        width: calc(100% + 2px);
        max-width: none;
        height: 184px;
-        margin: -1px -1px 0 -1px;
+        margin: -1px -1px 0;
        object-fit: cover;
      }

      .resource-card-title {
-        margin: 16px 20px 8px 20px;
+        margin: 16px 20px 8px;
        color: #0d1a26;
        font-size: 20px;
        line-height: 28px;
      }

      .resource-card-description {
-        margin: 0 20px 20px 20px;
+        margin: 0 20px 20px;
        color: #697b8c;
        font-size: 14px;
        line-height: 22px;