refactor: Sass -> Less (#1208)

* refactor :recycle: : Sass -> Less

* test :white_check_mark: : Update Test

* refactor :recycle: : remove sass

* fix :bug: : remove prefix

demo/comment.js

@@ -1,5 +1,5 @@
 import Vditor from '../src/index'
-import '../src/assets/scss/index.scss'
+import '../src/assets/less/index.less'
 
 const bindCommentEvent = (cmtElement) => {
   const inputElement = cmtElement.querySelector('input')

demo/index.js

@@ -1,5 +1,5 @@
 import Vditor from '../src/index'
-import '../src/assets/scss/index.scss'
+import '../src/assets/less/index.less'
 
 // new VConsole()
 

demo/jest-puppeteer.js

@@ -1,5 +1,5 @@
 import Vditor from '../src/index'
-import '../src/assets/scss/index.scss'
+import '../src/assets/less/index.less'
 
 window.vditorTest = new Vditor('vditorTest', {
   tab: '\t',

demo/render.js

@@ -1,5 +1,5 @@
 import Vditor from '../src/method'
-import '../src/assets/scss/index.scss'
+import '../src/assets/less/index.less'
 
 const outlineElement = document.getElementById('outline')
 const previewElement = document.getElementById('preview')

package.json

@@ -39,13 +39,13 @@
     "html-webpack-plugin": "^5.3.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
+    "less": "^4.1.2",
+    "less-loader": "^10.2.0",
     "mini-css-extract-plugin": "^2.6.0",
-    "node-sass": "^7.0.1",
     "postcss": "^8.4.12",
     "postcss-loader": "^5.2.0",
     "prettier": "^2.5.1",
     "puppeteer": "^1.20.0",
-    "sass-loader": "^12.6.0",
     "style-loader": "^1.3.0",
     "terser-webpack-plugin": "^5.3.0",
     "ts-jest": "^26.5.6",

src/assets/scss/_content.scss → src/assets/less/_content.less

@@ -15,7 +15,7 @@
   border: 1px solid var(--border-color);
   border-radius: 3px;
   box-sizing: border-box;
-  font-family: $font-family-base;
+  font-family: @font-family-base;
 
   .vditor-copy {
     z-index: auto;
@@ -52,7 +52,6 @@
     &::-webkit-scrollbar {
       display: none;
     }
-
     &__action {
       text-align: center;
       padding: 10px;
@@ -120,8 +119,8 @@
     margin: 8px 3px 0 0;
 
     &--error {
-      color: $errorColor;
-      background-color: rgba($errorColor, 0.1);
+      color: @errorColor;
+      background-color: rgba(@errorColor, 0.1);
     }
   }
 
@@ -143,7 +142,7 @@
     & > div {
       height: 3px;
       background-color: var(--resize-background-color);
-      transition: $transition;
+      transition: @transition;
     }
 
     &:hover,
@@ -174,15 +173,15 @@
     height: 3px;
     left: 0;
     top: -2px;
-    transition: $transition;
-    background-color: $blurColor;
+    transition: @transition;
+    background-color: @blurColor;
   }
 
   &-tip {
     position: absolute;
     font-size: 12px;
     top: 10px;
-    animation-duration: .15s;
+    animation-duration: 0.15s;
     animation-fill-mode: both;
     left: 50%;
     z-index: 5;
@@ -211,7 +210,7 @@
       }
 
       a {
-        color: $blurColor;
+        color: @blurColor;
       }
     }
 

src/assets/scss/_ir.scss → src/assets/less/_ir.less

@@ -26,7 +26,7 @@
 
     &[data-type="link-ref"],
     &[data-type="footnotes-ref"] {
-      color: $blurColor;
+      color: @blurColor;
     }
 
     &[data-type="html-block"] {
@@ -38,7 +38,7 @@
       overflow: hidden;
       display: inline-block;
       height: 0;
-      transition: $transition;
+      transition: @transition;
     }
 
     &--hidden {
@@ -252,13 +252,13 @@
     }
 
     span[data-type="toc-h"] {
-      color: $blurColor;
+      color: @blurColor;
       text-decoration: underline;
     }
   }
 }
 
-@media screen and (max-width: $max-width) {
+@media screen and (max-width: @max-width) {
   .vditor-ir {
     h1:before,
     h2:before,

src/assets/scss/_panel.scss → src/assets/less/_panel.less

@@ -8,7 +8,7 @@
 @keyframes scale-in {
   0% {
     opacity: 0;
-    transform: scale(.5);
+    transform: scale(0.5);
   }
   100% {
     opacity: 1;
@@ -29,9 +29,9 @@
     user-select: none;
     max-width: 320px;
     min-width: 80px;
-    animation-duration: .15s;
+    animation-duration: 0.15s;
     animation-name: scale-in;
-    animation-timing-function: cubic-bezier(.2, 0, .13, 1.5);
+    animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
     color: var(--toolbar-icon-color);
 
     &--none {
@@ -40,7 +40,7 @@
       min-width: auto;
       max-width: none;
       white-space: nowrap;
-      opacity: .86;
+      opacity: 0.86;
     }
 
     &--arrow:before {

src/assets/scss/_reset.scss → src/assets/less/_reset.less

@@ -5,7 +5,7 @@
     }
 
     &--error {
-      color: $errorColor;
+      color: @errorColor;
       font-size: 12px;
       display: block;
       line-height: 16px;
@@ -13,7 +13,7 @@
 
     color: #24292e;
     font-variant-ligatures: no-common-ligatures;
-    font-family: $font-family-base;
+    font-family: @font-family-base;
     word-wrap: break-word;
     overflow: auto;
     line-height: 1.5;
@@ -95,7 +95,7 @@
     }
 
     h4 {
-      font-size: 1.25em
+      font-size: 1.25em;
     }
 
     h5 {
@@ -126,11 +126,11 @@
       margin: 0 0 16px 0;
 
       & > :first-child {
-        margin-top: 0
+        margin-top: 0;
       }
 
       & > :last-child {
-        margin-bottom: 0
+        margin-bottom: 0;
       }
     }
 
@@ -193,7 +193,7 @@
       margin: 0;
       font-size: 85%;
       border-radius: 3px;
-      font-family: $font-family-code;
+      font-family: @font-family-code;
       word-break: break-word;
       background-size: 20px 20px;
       white-space: pre-wrap;
@@ -210,7 +210,7 @@
         display: block;
         overflow: auto;
         white-space: pre;
-        font-family: $font-family-code;
+        font-family: @font-family-code;
         background-size: 20px 20px;
         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==);
         word-break: initial;
@@ -310,7 +310,7 @@
     word-break: break-all;
 
     input {
-      margin: 0 .2em .25em -1.6em;
+      margin: 0 0.2em 0.25em -1.6em;
       font-size: 12px;
       vertical-align: middle;
     }
@@ -423,7 +423,7 @@
 
   &-linkcard {
     margin: 31px auto 16px;
-    transition: $transition;
+    transition: @transition;
     cursor: pointer;
     max-width: 768px;
     padding: 0 10px;
@@ -436,10 +436,10 @@
       display: flex;
       text-decoration: none;
       flex-wrap: wrap-reverse;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 
       &:hover {
-        box-shadow: 0 0 3px rgba(0, 0, 0, .13), 0 3px 6px rgba(0, 0, 0, .26);
+        box-shadow: 0 0 3px rgba(0, 0, 0, 0.13), 0 3px 6px rgba(0, 0, 0, 0.26);
         text-decoration: none;
       }
 
@@ -508,7 +508,7 @@
   &-toc {
     margin-bottom: 16px;
     user-select: text;
-    color: $blurColor;
+    color: @blurColor;
 
     .vditor-outline__action {
       display: none;
@@ -590,7 +590,7 @@
     }
 
     &__action {
-      transition: $transition;
+      transition: @transition;
       fill: currentColor;
       margin-right: 5px;
       flex-shrink: 0;

src/assets/scss/_sv.scss → src/assets/less/_sv.less

@@ -1,6 +1,5 @@
 .vditor-sv {
-
-  font-family: $font-family-base;
+  font-family: @font-family-base;
   margin: 0 1px 0 0;
   overflow: auto;
   width: 100%;

src/assets/scss/_toolbar.scss → src/assets/less/_toolbar.less

@@ -12,7 +12,7 @@
     }
 
     &--hide {
-      transition: $transition;
+      transition: @transition;
       height: 5px;
       overflow: hidden;
 
@@ -139,7 +139,7 @@
       padding: 3px;
       box-sizing: border-box;
       font-size: 16px;
-      transition: $transition;
+      transition: @transition;
       border: 0;
       margin: 0;
       background-color: transparent;
@@ -164,7 +164,7 @@
   }
 }
 
-@media screen and (max-width: $max-width) {
+@media screen and (max-width: @max-width) {
   .vditor-toolbar__item {
     padding: 0 12px;
   }

src/assets/scss/_tooltipped.scss → src/assets/less/_tooltipped.less

@@ -6,11 +6,11 @@
  */
 @keyframes tooltip-appear {
   from {
-    opacity: 0
+    opacity: 0;
   }
 
   to {
-    opacity: 1
+    opacity: 1;
   }
 }
 
@@ -39,7 +39,7 @@
     background: #3b3e43;
     border-radius: 3px;
     line-height: 16px;
-    opacity: 0
+    opacity: 0;
   }
 
   &::before {
@@ -52,7 +52,7 @@
     pointer-events: none;
     content: "";
     border: 5px solid transparent;
-    opacity: 0
+    opacity: 0;
   }
 
   &--hover::before,
@@ -76,7 +76,7 @@
   &__sw::after {
     top: 100%;
     right: 50%;
-    margin-top: 5px
+    margin-top: 5px;
   }
 
   &__s::before,
@@ -86,17 +86,17 @@
     right: 50%;
     bottom: -5px;
     margin-right: -5px;
-    border-bottom-color: #3b3e43
+    border-bottom-color: #3b3e43;
   }
 
   &__se::after {
     right: auto;
     left: 50%;
-    margin-left: -15px
+    margin-left: -15px;
   }
 
   &__sw::after {
-    margin-right: -15px
+    margin-right: -15px;
   }
 
   &__n::after,
@@ -104,7 +104,7 @@
   &__nw::after {
     right: 50%;
     bottom: 100%;
-    margin-bottom: 5px
+    margin-bottom: 5px;
   }
 
   &__n::before,
@@ -114,22 +114,22 @@
     right: 50%;
     bottom: auto;
     margin-right: -5px;
-    border-top-color: #3b3e43
+    border-top-color: #3b3e43;
   }
 
   &__ne::after {
     right: auto;
     left: 50%;
-    margin-left: -15px
+    margin-left: -15px;
   }
 
   &__nw::after {
-    margin-right: -15px
+    margin-right: -15px;
   }
 
   &__s::after,
   &__n::after {
-    transform: translateX(50%)
+    transform: translateX(50%);
   }
 
   &__w::after {
@@ -151,7 +151,7 @@
     bottom: 50%;
     left: 100%;
     margin-left: 5px;
-    transform: translateY(50%)
+    transform: translateY(50%);
   }
 
   &__e::before {
@@ -163,7 +163,7 @@
   }
 }
 
-@media screen and (max-width: $max-width) {
+@media screen and (max-width: @max-width) {
   .vditor-tooltipped:before,
   .vditor-tooltipped:after {
     content: none;

src/assets/scss/_wysiwyg.scss → src/assets/less/_wysiwyg.less

@@ -158,11 +158,11 @@
 
   span[data-type="link-ref"],
   sup[data-type="footnotes-ref"] {
-    color: $blurColor;
+    color: @blurColor;
   }
 
   span[data-type="toc-h"] {
-    color: $blurColor;
+    color: @blurColor;
     text-decoration: underline;
   }
 
@@ -177,7 +177,7 @@
   }
 }
 
-@media screen and (max-width: $max-width) {
+@media screen and (max-width: @max-width) {
   .vditor-wysiwyg {
     h1:before,
     h2:before,

src/assets/scss/index.scss → src/assets/less/index.less

@@ -1,23 +1,28 @@
-$errorColor: #d23f31 !default;
-$blurColor: #4285f4 !default;
+@errorColor: #d23f31;
+@blurColor: #4285f4;
 
-$font-family-base: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !default;
-$font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !default;
+@font-family-base: "Helvetica Neue", "Luxi Sans", "DejaVu Sans",
+  "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji",
+  "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji",
+  "EmojiSymbols";
+@font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier,
+  monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
+  "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
 
-$transition: all .15s ease-in-out !default;
+@transition: all 0.15s ease-in-out;
 
-$max-width: 520px !default;
+@max-width: 520px;
 
 .vditor {
   --border-color: #d1d5da;
   --second-color: rgba(88, 96, 105, 0.36);
 
   --panel-background-color: #fff;
-  --panel-shadow: 0 1px 2px rgba(0, 0, 0, .2);
+  --panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 
   --toolbar-background-color: #f6f8fa;
   --toolbar-icon-color: #586069;
-  --toolbar-icon-hover-color: #{$blurColor};
+  --toolbar-icon-hover-color: @blurColor;
   --toolbar-height: 35px;
   --toolbar-divider-margin-top: 8px;
 
@@ -29,7 +34,7 @@ $max-width: 520px !default;
   --resize-hover-icon-color: var(--panel-background-color);
   --resize-hover-background-color: var(--toolbar-icon-hover-color);
 
-  --count-background-color:rgba(27, 31, 35, .05);
+  --count-background-color: rgba(27, 31, 35, 0.05);
   --heading-border-color: #eaecef;
   --blockquote-color: #6a737d;
 
@@ -42,10 +47,10 @@ $max-width: 520px !default;
 
   &--dark {
     --border-color: #141414;
-    --second-color: rgba(185, 185, 185, .36);
+    --second-color: rgba(185, 185, 185, 0.36);
 
     --panel-background-color: #24292e;
-    --panel-shadow: 0 1px 2px rgba(255, 255, 255, .2);
+    --panel-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
 
     --toolbar-background-color: #1d2125;
     --toolbar-icon-color: #b9b9b9;
@@ -57,9 +62,9 @@ $max-width: 520px !default;
     --resize-icon-color: var(--border-color);
     --resize-background-color: var(--second-color);
     --resize-hover-icon-color: var(--toolbar-icon-hover-color);
-    --resize-hover-background-color: rgba(185, 185, 185, .86);
+    --resize-hover-background-color: rgba(185, 185, 185, 0.86);
 
-    --count-background-color:  #{rgba($blurColor, .36)};
+    --count-background-color: rgba(@blurColor, 0.36);
     --heading-border-color: var(--textarea-text-color);
     --blockquote-color: var(--toolbar-icon-color);
 
@@ -72,12 +77,12 @@ $max-width: 520px !default;
   }
 }
 
-@import "tooltipped";
-@import "panel";
-@import "toolbar";
-@import "content";
-@import "hint";
-@import "reset";
-@import "wysiwyg";
-@import "ir";
-@import "sv";
+@import "_tooltipped";
+@import "_panel";
+@import "_toolbar";
+@import "_content";
+@import "_hint";
+@import "_reset";
+@import "_wysiwyg";
+@import "_ir";
+@import "_sv";

src/index.ts

@@ -1,4 +1,4 @@
-import "./assets/scss/index.scss";
+import "./assets/less/index.less";
 import VditorMethod from "./method";
 import {Constants, VDITOR_VERSION} from "./ts/constants";
 import {DevTools} from "./ts/devtools/index";

webpack.config.js

@@ -16,7 +16,7 @@ const BundleAnalyzerPlugin = require(
 const pkg = require('./package.json')
 const banner = new webpack.BannerPlugin({
   banner: `Vditor v${pkg.version} - A markdown editor written in TypeScript.
-  
+
 MIT License
 
 Copyright (c) 2018-present B3log 开源, b3log.org
@@ -74,7 +74,7 @@ module.exports = [
       ],
     },
     resolve: {
-      extensions: ['.ts', '.js', '.scss', 'png'],
+      extensions: ['.ts', '.js', '.less', 'png'],
     },
     module: {
       rules: [
@@ -116,7 +116,7 @@ module.exports = [
           use: 'ts-loader',
         },
         {
-          test: /\.scss$/,
+          test: /\.less$/,
           include: [path.resolve(__dirname, 'src/assets')],
           use: [
             MiniCssExtractPlugin.loader,
@@ -137,7 +137,7 @@ module.exports = [
               },
             },
             {
-              loader: 'sass-loader', // compiles Sass to CSS
+              loader: 'less-loader', // compiles Less to CSS
             },
           ],
         },

webpack.start.js

@@ -25,12 +25,12 @@ module.exports = {
     'comment.js': './demo/comment.js',
   },
   resolve: {
-    extensions: ['.js', '.ts', '.png', '.scss'],
+    extensions: ['.js', '.ts', '.png', '.less'],
   },
   module: {
     rules: [
       {
-        test: /\.scss$/,
+        test: /\.less$/,
         include: [path.resolve(__dirname, 'src')],
         use: [
           {
@@ -53,7 +53,7 @@ module.exports = {
             },
           },
           {
-            loader: 'sass-loader', // compiles Sass to CSS
+            loader: 'less-loader', // compiles Less to CSS
           },
         ],
       },