devexpress-diagram 2.2.21 → 2.2.24

package/dist/dx-diagram.min.js.LICENSE.txt

@@ -1,7 +1,7 @@
 /*!
  * DevExpress Diagram (dx-diagram.min)
- * Version: 2.2.21
- * Build date: Wed Aug 20 2025
+ * Version: 2.2.24
+ * Build date: Tue Sep 23 2025
  *
  * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExpress licensing here: https://www.devexpress.com/Support/EULAs

package/dist/lib/css/system.scss

@@ -4,7 +4,6 @@ $PagesGridColor: rgba(0, 0, 0, 0.15);
 $PagesGridLineWidth: 2;
 $GridMajorColor: rgba(0, 0, 0, 0.1);
 $GridMinorColor: rgba(0, 0, 0, 0.05);
-
 $FontName: arial, helvetica, sans-serif;
 $FonSize: 10pt;
 $FontColor: black;
@@ -12,7 +11,6 @@ $FillColor: white;
 $LineColor: black;
 $LineWidth: 2;
 $LineWidthPx: 2px;
-
 $SelectionBorderColor: dodgerblue;
 $SelectionBorderColorUnfocused: #666;
 $SelectionBackColor: rgba(30, 144, 255, 0.02);

package/dist/lib/package.json

@@ -1,25 +1,24 @@
 {
 	"name": "devexpress-diagram",
-	"version": "2.2.21",
+	"version": "2.2.24",
 	"description": "DevExpress Diagram Control",
 	"main": "dist/dx-diagram.min.js",
 	"dependencies": {
-		"@devexpress/utils": "^1.4.3",
+		"@devexpress/utils": "^1.4.6",
 		"es6-object-assign": "^1.1.0"
 	},
 	"devDependencies": {
 		"@fortawesome/fontawesome-free": "^5.6.3",
 		"@types/jasmine": "^3.10.11",
-		"@typescript-eslint/eslint-plugin": "^3.9.0",
-		"@typescript-eslint/parser": "^3.9.0",
-		"bootstrap": "^4.2.1",
+		"@typescript-eslint/eslint-plugin": "^5.62.0",
+		"@typescript-eslint/parser": "^5.62.0",
+		"bootstrap": "^5.3.8",
 		"concurrently": "^8.2.0",
 		"copy-webpack-plugin": "^11.0.0",
 		"css-loader": "^6.8.1",
 		"css-minimizer-webpack-plugin": "^5.0.1",
 		"decomment": "^0.9.5",
 		"eslint": "^7.3.1",
-		"eslint-config-airbnb-typescript": "^8.0.0",
 		"eslint-plugin-import": "^2.22.0",
 		"eslint-plugin-no-loops": "^0.3.0",
 		"eslint-plugin-spellcheck": "0.0.11",
@@ -32,15 +31,14 @@
 		"mini-css-extract-plugin": "^2.7.6",
 		"node-sass": "^9.0.0",
 		"popper.js": "^1.14.6",
-		"pre-commit": "^1.2.2",
 		"sass-loader": "^13.3.2",
-		"stylelint": "^13.1.0",
-		"stylelint-config-standard": "^20.0.0",
-		"stylelint-scss": "^3.17.2",
+		"stylelint": "^15.11.0",
+		"stylelint-config-standard-scss": "^11.0.0",
+		"stylelint-scss": "^5.3.2",
 		"terser-webpack-plugin": "^5.3.9",
 		"ts-loader": "^9.4.4",
 		"ts-node": "^7.0.1",
-		"typescript": "^3.9.10",
+		"typescript": "^4.9.5",
 		"webpack": "^5.88.2",
 		"webpack-cli": "^5.1.4",
 		"webpack-merge": "^4.2.1",

package/dist/lib/src/Layout/Structures.ts

@@ -1,5 +1,4 @@
 import { ItemKey } from "../Model/DiagramItem";
-import { IKeyOwner } from "../Interfaces";
 import { IEdge } from "./Graph";
 
 export class Edge implements IEdge {
@@ -21,11 +20,6 @@ export class Edge implements IEdge {
     }
 }
 
-export class PositionInfo<T extends IKeyOwner> {
-    constructor(public item: T, public position: Position) { }
-}
-
-
 export enum ConnectionMode {
     Outgoing = 1,
     Incoming = 2,

package/dist/lib/src/Render/RenderManager.ts

@@ -55,10 +55,6 @@ export class RenderManager implements IReadOnlyChangesListener, IMouseOperations
 
     static touchPositionLimit = 4;
 
-    private mouseDownEventName: string;
-    private mouseMoveEventName: string;
-    private mouseUpEventName: string;
-
     private pointers:Record<string, any> = { };
 
     private onPointerDownHandler: any;
@@ -67,11 +63,8 @@ export class RenderManager implements IReadOnlyChangesListener, IMouseOperations
     private onPointerCancelHandler: any;
     private onPointerLeaveHandler: any;
 
-    private onMouseDownHandler: any;
-    private onMouseMoveHandler: any;
-    private onMouseUpHandler: any;
-    private onMouseEnterHandler: any;
-    private onMouseLeaveHandler: any;
+    private onSvgMouseMoveHandler: any;
+    private onSvgMouseDownHandler: any;
     private onMouseDblClickHandler: any;
     private onMouseWheelHandler: any;
     private onContextMenuHandler: any;
@@ -113,7 +106,7 @@ export class RenderManager implements IReadOnlyChangesListener, IMouseOperations
 
         this.notifyReadOnlyChanged(settings.readOnly);
     }
-    clean(removeElement?: (element: HTMLElement) => void) {
+    clean(removeElement?: (element: HTMLElement) => void): void {
         this.killLockMouseMoveTimer();
         this.clearLastMouseDownEvent();
 
@@ -125,7 +118,7 @@ export class RenderManager implements IReadOnlyChangesListener, IMouseOperations
             removeElement(this.mainElement);
     }
 
-    replaceParent(parent: HTMLElement, scroll?: IScrollView) {
+    replaceParent(parent: HTMLElement, scroll?: IScrollView): void {
         if(this.mainElement && this.mainElement.parentNode !== parent)
             parent.appendChild(this.mainElement);
         if(scroll && scroll !== this.scroll) {
@@ -135,30 +128,34 @@ export class RenderManager implements IReadOnlyChangesListener, IMouseOperations
         if(this.measurer instanceof TextMeasurer)
             this.measurer.replaceParent(parent);
     }
-    update(saveScrollPosition: boolean) {
+    update(saveScrollPosition: boolean): void {
         this.view.adjust({ horizontal: !saveScrollPosition, vertical: !saveScrollPosition });
         this.page.redraw();
     }
-    onNewModel(items: DiagramItem[]) {
+    onNewModel(items: DiagramItem[]): void {
         this.measurer.onNewModel(items, this.dom);
     }
-    clear() {
+    clear(): void {
         this.items.clear();
         this.selection.clear();
         this.input.clear();
     }
-    protected attachPointerEvents(svgElement: SVGSVGElement) {
+    protected attachPointerEvents(svgElement: SVGSVGElement): void {
         DomUtils.addClassName(svgElement, TOUCH_ACTION_CSSCLASS);
 
         RenderHelper.addEventListener(svgElement, "pointerdown", this.onPointerDownHandler);
+        RenderHelper.addEventListener(svgElement, "mousedown", this.onSvgMouseDownHandler);
+        RenderHelper.addEventListener(svgElement, "mousemove", this.onSvgMouseMoveHandler);
         RenderHelper.addEventListener(Browser.TouchUI ? svgElement : document, "pointerup", this.onPointerUpHandler);
         RenderHelper.addEventListener(Browser.TouchUI ? svgElement : document, "pointermove", this.onPointerMoveHandler);
 
         RenderHelper.addEventListener(svgElement, "pointercancel", this.onPointerCancelHandler);
         RenderHelper.addEventListener(svgElement, "pointerleave", this.onPointerLeaveHandler);
     }
-    protected detachPointerEvents(svgElement: SVGSVGElement) {
+    protected detachPointerEvents(svgElement: SVGSVGElement): void {
         RenderHelper.removeEventListener(svgElement, "pointerdown", this.onPointerDownHandler);
+        RenderHelper.removeEventListener(svgElement, "mousedown", this.onSvgMouseDownHandler);
+        RenderHelper.removeEventListener(svgElement, "mousemove", this.onSvgMouseMoveHandler);
         RenderHelper.removeEventListener(Browser.TouchUI ? svgElement : document, "pointerup", this.onPointerUpHandler);
         RenderHelper.removeEventListener(Browser.TouchUI ? svgElement : document, "pointermove", this.onPointerMoveHandler);
         RenderHelper.removeEventListener(svgElement, "pointercancel", this.onPointerCancelHandler);
@@ -167,47 +164,24 @@ export class RenderManager implements IReadOnlyChangesListener, IMouseOperations
         DomUtils.removeClassName(svgElement, TOUCH_ACTION_CSSCLASS);
     }
 
-    protected attachMouseTouchEvents(svgElement: SVGSVGElement) {
-        RenderHelper.addEventListener(svgElement, this.mouseDownEventName, this.onMouseDownHandler);
-        RenderHelper.addEventListener(document, this.mouseMoveEventName, this.onMouseMoveHandler);
-        RenderHelper.addEventListener(document, this.mouseUpEventName, this.onMouseUpHandler);
-    }
-    protected detachMouseTouchEvents(svgElement: SVGSVGElement) {
-        RenderHelper.removeEventListener(svgElement, this.mouseDownEventName, this.onMouseDownHandler);
-        RenderHelper.removeEventListener(document, this.mouseMoveEventName, this.onMouseMoveHandler);
-        RenderHelper.removeEventListener(document, this.mouseUpEventName, this.onMouseUpHandler);
-    }
-
     private attachEvents(svgElement: SVGSVGElement) {
-        this.mouseDownEventName = Browser.TouchUI ? "touchstart" : "mousedown";
-        this.mouseMoveEventName = Browser.TouchUI ? "touchmove" : "mousemove";
-        this.mouseUpEventName = Browser.TouchUI ? "touchend" : "mouseup";
-
         this.onPointerDownHandler = this.onPointerDown.bind(this);
         this.onPointerUpHandler = this.onPointerUp.bind(this);
         this.onPointerMoveHandler = this.onPointerMove.bind(this);
         this.onPointerCancelHandler = this.onPointerCancel.bind(this);
         this.onPointerLeaveHandler = this.onPointerLeave.bind(this);
 
-        this.onMouseDownHandler = this.onMouseDown.bind(this);
-        this.onMouseEnterHandler = this.onMouseEnter.bind(this);
-        this.onMouseLeaveHandler = this.onMouseLeave.bind(this);
+        this.onSvgMouseDownHandler = this.onSvgMouseDown.bind(this);
+        this.onSvgMouseMoveHandler = this.onSvgMouseMove.bind(this);
+
         this.onMouseWheelHandler = this.onMouseWheel.bind(this);
         this.onMouseDblClickHandler = this.onMouseDblClick.bind(this);
         this.onContextMenuHandler = this.onContextMenu.bind(this);
-        this.onMouseMoveHandler = this.onMouseMove.bind(this);
-        this.onMouseUpHandler = this.onMouseUp.bind(this);
         this.onWindowResizelHandler = this.onWindowResize.bind(this);
         this.onOrientationChangeHandler = this.onOrientationChange.bind(this);
         this.onMouseClickHandler = this.onMouseClick.bind(this);
 
-        if(EventUtils.isPointerEvents())
-            this.attachPointerEvents(svgElement);
-        else {
-            this.attachMouseTouchEvents(svgElement);
-            RenderHelper.addEventListener(svgElement, "mouseenter", this.onMouseEnterHandler);
-            RenderHelper.addEventListener(svgElement, "mouseleave", this.onMouseLeaveHandler);
-        }
+        this.attachPointerEvents(svgElement);
 
         RenderHelper.addEventListener(svgElement, "wheel", this.onMouseWheelHandler);
         RenderHelper.addEventListener(svgElement, "dblclick", this.onMouseDblClickHandler);
@@ -219,13 +193,7 @@ export class RenderManager implements IReadOnlyChangesListener, IMouseOperations
         this.input.mouseWheelHandler = this.onMouseWheelHandler;
     }
     private detachEvents(svgElement: SVGSVGElement) {
-        if(EventUtils.isPointerEvents())
-            this.detachPointerEvents(svgElement);
-        else {
-            this.detachMouseTouchEvents(svgElement);
-            RenderHelper.removeEventListener(svgElement, "mouseenter", this.onMouseEnterHandler);
-            RenderHelper.removeEventListener(svgElement, "mouseleave", this.onMouseLeaveHandler);
-        }
+        this.detachPointerEvents(svgElement);
 
         RenderHelper.removeEventListener(svgElement, "wheel", this.onMouseWheelHandler);
         RenderHelper.removeEventListener(svgElement, "dblclick", this.onMouseDblClickHandler);
@@ -235,40 +203,39 @@ export class RenderManager implements IReadOnlyChangesListener, IMouseOperations
         RenderHelper.removeEventListener(window, "orientationchange", this.onOrientationChangeHandler);
     }
 
-    setPointerPosition(evt: PointerEvent) {
+    setPointerPosition(evt: PointerEvent): void {
         this.pointers[evt.pointerId] = {
             clientX: evt.clientX,
             clientY: evt.clientY
         };
     }
-    clearPointerPosition(evt: PointerEvent) {
+    clearPointerPosition(evt: PointerEvent): void {
         delete this.pointers[evt.pointerId];
     }
-    onPointerDown(evt: PointerEvent) {
-        this.setPointerPosition(evt);
-        if(this.getPointerCount() > 2)
-            this.pointers = {};
-        this.onMouseDown(evt);
-    }
-    onPointerUp(evt: PointerEvent) {
+
+    onPointerUp(evt: PointerEvent): void {
         this.clearPointerPosition(evt);
         this.onMouseUp(evt);
     }
-    onPointerMove(evt: PointerEvent) {
+    onPointerMove(evt: PointerEvent): void {
         if((Browser.TouchUI && !EventUtils.isMousePointer(evt)) || EventUtils.isLeftButtonPressed(evt))
             this.setPointerPosition(evt);
-        this.onMouseMove(evt);
+        this.onDocumentMouseMove(evt);
     }
-    onPointerCancel(evt: PointerEvent) {
+    onPointerCancel(evt: PointerEvent): void {
         this.clearPointerPosition(evt);
     }
-    onPointerLeave(evt: PointerEvent) {
+    onPointerLeave(evt: PointerEvent): void {
         if(EventUtils.isMousePointer(evt))
             this.onMouseLeave(evt);
         this.clearPointerPosition(evt);
     }
 
-    onMouseDown(evt: MouseEvent) {
+    onPointerDown(evt: PointerEvent): void {
+        this.setPointerPosition(evt);
+        if(this.getPointerCount() > 2)
+            this.pointers = {};
+
         this.lockMouseMove();
         this.input.lockFocus();
         this.autoScroll.onMouseDown(evt);
@@ -279,10 +246,11 @@ export class RenderManager implements IReadOnlyChangesListener, IMouseOperations
 
         if(EventUtils.isTouchEvent(evt))
             this.processTouchDown(evt);
-        EvtUtils.preventEventAndBubble(evt);
-        return false;
     }
-    onMouseMove(evt: MouseEvent) {
+    onSvgMouseDown(evt: MouseEvent): void {
+        EvtUtils.preventEvent(evt);
+    }
+    onDocumentMouseMove(evt: MouseEvent): void {
         if(this.moveLocked) return;
         this.autoScroll.onMouseMove(evt, () => this.onMouseMoveCore(evt));
         this.onMouseMoveCore(evt);
@@ -291,10 +259,13 @@ export class RenderManager implements IReadOnlyChangesListener, IMouseOperations
         if(EventUtils.isTouchEvent(evt))
             this.processTouchMove(evt);
     }
+    onSvgMouseMove(evt: MouseEvent): void {
+        EvtUtils.preventEventAndBubble(evt);
+    }
     private onMouseMoveCore(evt: MouseEvent) {
         raiseEvent(evt, this.createDiagramMouseEvent(evt), e => this.events.onMouseMove(e));
     }
-    onMouseUp(evt: MouseEvent) {
+    onMouseUp(evt: MouseEvent): void {
         this.lockMouseMove();
         const mouseEvent = this.createDiagramMouseEvent(evt);
         raiseEvent(evt, mouseEvent, e => this.events.onMouseUp(e));
@@ -304,17 +275,17 @@ export class RenderManager implements IReadOnlyChangesListener, IMouseOperations
         if(EventUtils.isTouchEvent(evt))
             this.processTouchUp(evt);
     }
-    private onMouseEnter(evt: MouseEvent) {
+    private onMouseEnter(evt: MouseEvent): void {
         this.autoScroll.onMouseEnter(evt);
         raiseEvent(evt, this.createDiagramMouseEvent(evt), e => this.events.onMouseEnter(e));
     }
-    private onMouseLeave(evt: MouseEvent) {
+    private onMouseLeave(evt: MouseEvent): void {
         raiseEvent(evt, this.createDiagramMouseEvent(evt), e => this.events.onMouseLeave(e));
     }
-    private onMouseDblClick(evt: MouseEvent) {
+    private onMouseDblClick(evt: MouseEvent): void {
         raiseEvent(evt, this.createDiagramMouseEvent(evt), e => this.events.onDblClick(e));
     }
-    private onMouseClick(evt: MouseEvent) {
+    private onMouseClick(evt: MouseEvent): void {
         if(!EventUtils.isTouchEvent(evt))
             raiseEvent(evt, this.createActualMouseClickEvent(evt), e => this.events.onClick(e));
         else if(!EventUtils.isMousePointer(evt))
@@ -338,7 +309,7 @@ export class RenderManager implements IReadOnlyChangesListener, IMouseOperations
         this.input.captureFocus();
         return EvtUtils.preventEventAndBubble(evt);
     }
-    processTouchDown(evt: MouseEvent) {
+    processTouchDown(evt: MouseEvent): void {
         this.touchDownPoint = this.getTouchPointFromEvent(evt);
         this.resetLongTouch();
         this.longTouchTimer = setTimeout(() => {
@@ -347,7 +318,7 @@ export class RenderManager implements IReadOnlyChangesListener, IMouseOperations
             this.resetDblClick();
         }, LONG_TOUCH_TIMEOUT);
     }
-    processTouchMove(evt: MouseEvent) {
+    processTouchMove(evt: MouseEvent): void {
         const currentTouchPoint = this.getTouchPointFromEvent(evt);
         if(this.touchDownPoint && currentTouchPoint && (Math.abs(this.touchDownPoint.x - currentTouchPoint.x) > RenderManager.touchPositionLimit ||
             Math.abs(this.touchDownPoint.y - currentTouchPoint.y) > RenderManager.touchPositionLimit)) {
@@ -373,7 +344,7 @@ export class RenderManager implements IReadOnlyChangesListener, IMouseOperations
         }
         return touchPosition;
     }
-    processTouchUp(evt: MouseEvent) {
+    processTouchUp(evt: MouseEvent): void {
         if(this.longTouchTimer !== undefined) {
             raiseEvent(evt, this.createDiagramMouseEvent(evt), e => this.events.onClick(e));
             const element = EvtUtils.getEventSource(evt);
@@ -400,10 +371,10 @@ export class RenderManager implements IReadOnlyChangesListener, IMouseOperations
             clearTimeout(this.dblTouchTimer);
         this.dblTouchTimer = undefined;
     }
-    onOrientationChange() {
+    onOrientationChange(): void {
         setTimeout(() => this.onWindowResize(), 100);
     }
-    onWindowResize() {
+    onWindowResize(): void {
         let resetTo = { horizontal: false, vertical: false };
         if(this.view.autoZoom !== AutoZoomMode.Disabled) {
             resetTo.horizontal = true;
@@ -416,39 +387,39 @@ export class RenderManager implements IReadOnlyChangesListener, IMouseOperations
         }
         this.view.adjust(resetTo);
     }
-    onMouseWheel(evt: WheelEvent) {
+    onMouseWheel(evt: WheelEvent): void {
         raiseEvent(evt, this.createDiagramWheelEvent(evt), e => this.events.onMouseWheel(e));
     }
 
-    notifyModelSizeChanged(size: Size, offset?: Offsets) {
+    notifyModelSizeChanged(size: Size, offset?: Offsets): void {
         this.view.notifyModelSizeChanged(size, offset);
     }
-    notifyModelRectangleChanged(rectangle: Rectangle) {
+    notifyModelRectangleChanged(rectangle: Rectangle): void {
         this.view.notifyModelRectangleChanged(rectangle);
     }
-    notifyReadOnlyChanged(readOnly: boolean) {
+    notifyReadOnlyChanged(readOnly: boolean): void {
         DomUtils.toggleClassName(this.mainElement, READONLY_CSSCLASS, readOnly);
     }
-    notifyDragStart(itemKeys: string[]) { }
-    notifyDragEnd(itemKeys: string[]) { }
-    notifyDragScrollStart() {
+    notifyDragStart(_itemKeys: string[]): void { }
+    notifyDragEnd(_itemKeys: string[]): void { }
+    notifyDragScrollStart(): void {
         this.autoScroll.onDragScrollStart();
     }
-    notifyDragScrollEnd() {
+    notifyDragScrollEnd(): void {
         this.autoScroll.onDragScrollEnd();
     }
-    notifyToolboxDragStart(evt: MouseEvent) {
+    notifyToolboxDragStart(evt: MouseEvent): void {
         this.onMouseEnter(evt);
     }
-    notifyToolboxDragEnd(evt: MouseEvent) {
+    notifyToolboxDragEnd(evt: MouseEvent): void {
         if(evt && EventUtils.isPointerEvents())
             this.onMouseUp(evt); 
     }
-    notifyToolboxDraggingMouseMove(evt: MouseEvent) {
-        this.onMouseMove(evt); 
+    notifyToolboxDraggingMouseMove(evt: MouseEvent): void {
+        this.onDocumentMouseMove(evt); 
     }
 
-    private createDiagramMouseEvent(evt: MouseEvent) {
+    private createDiagramMouseEvent(evt: MouseEvent): DiagramMouseEvent {
         const modifiers = KeyUtils.getKeyModifiers(evt);
         const button = isLeftButtonPressed(evt) ? MouseButton.Left : MouseButton.Right;
         const offsetPoint = this.getOffsetPointByEvent(evt);

package/package.json

@@ -1,28 +1,27 @@
 {
   "name": "devexpress-diagram",
-  "version": "2.2.21",
+  "version": "2.2.24",
   "description": "DevExpress Diagram Control",
   "main": "dist/dx-diagram.min.js",
   "files": [
     "dist/"
   ],
   "dependencies": {
-    "@devexpress/utils": "^1.4.3",
+    "@devexpress/utils": "^1.4.6",
     "es6-object-assign": "^1.1.0"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.6.3",
     "@types/jasmine": "^3.10.11",
-    "@typescript-eslint/eslint-plugin": "^3.9.0",
-    "@typescript-eslint/parser": "^3.9.0",
-    "bootstrap": "^4.2.1",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "bootstrap": "^5.3.8",
     "concurrently": "^8.2.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "decomment": "^0.9.5",
     "eslint": "^7.3.1",
-    "eslint-config-airbnb-typescript": "^8.0.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-no-loops": "^0.3.0",
     "eslint-plugin-spellcheck": "0.0.11",
@@ -35,26 +34,25 @@
     "mini-css-extract-plugin": "^2.7.6",
     "node-sass": "^9.0.0",
     "popper.js": "^1.14.6",
-    "pre-commit": "^1.2.2",
     "sass-loader": "^13.3.2",
-    "stylelint": "^13.1.0",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-scss": "^3.17.2",
+    "stylelint": "^15.11.0",
+    "stylelint-config-standard-scss": "^11.0.0",
+    "stylelint-scss": "^5.3.2",
     "terser-webpack-plugin": "^5.3.9",
     "ts-loader": "^9.4.4",
     "ts-node": "^7.0.1",
-    "typescript": "^3.9.10",
+    "typescript": "^4.9.5",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-merge": "^4.2.1",
     "xhr-mock": "^2.5.0"
   },
   "scripts": {
-    "lint": "npm-run-all -p -c lint-css lint-ts",
-    "lint-ts": "eslint --ext .ts . --quiet",
-    "lint-ts-fix": "eslint --ext .ts . --quiet --fix",
-    "lint-css": "stylelint css",
-    "lint-staged": "lint-staged",
+    "lint": "npm run lint:ts & npm run lint:css",
+    "lint:ts": "eslint --ext .ts . --quiet",
+    "lint:ts-fix": "eslint --ext .ts . --quiet --fix",
+    "lint:css": "stylelint css/**/*.scss",
+    "lint:staged": "lint-staged",
     "build": "webpack --config webpack.build.js --mode production --progress",
     "build-dev": "webpack --config webpack.dev.js --mode development --progress",
     "watch": "webpack --config webpack.dev.js --mode development --progress --watch",