ember-container-query 2.1.0 → 2.1.1

package/.stylelintrc.js

@@ -0,0 +1,64 @@
+'use strict';
+
+/* eslint-disable-next-line n/no-unpublished-require */
+const { browsers } = require('./tests/dummy/config/targets');
+
+module.exports = {
+  extends: ['stylelint-config-standard'],
+  plugins: ['stylelint-no-unsupported-browser-features', 'stylelint-order'],
+  rules: {
+    /*
+      Customize plugins
+    */
+    'order/properties-order': [
+      [
+        // Defined by ember-css-modules
+        'composes',
+      ],
+      {
+        unspecified: 'bottomAlphabetical',
+      },
+    ],
+
+    'plugin/no-unsupported-browser-features': [
+      true,
+      {
+        browsers,
+        ignore: [
+          // grid-template-columns falsely identified as multicolumn
+          'multicolumn',
+        ],
+      },
+    ],
+
+    /*
+      Customize rules
+    */
+    'declaration-block-no-redundant-longhand-properties': [
+      true,
+      {
+        ignoreShorthands: ['grid-gap', 'grid-template'],
+      },
+    ],
+
+    'property-no-unknown': [
+      true,
+      {
+        ignoreProperties: [
+          // Defined by ember-css-modules
+          'composes',
+        ],
+      },
+    ],
+
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        ignorePseudoClasses: [
+          // Defined by ember-css-modules
+          'global',
+        ],
+      },
+    ],
+  },
+};

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 2.1.1 (2022-12-02)
+
+### Bug Fix
+* [#128](https://github.com/ijlee2/ember-container-query/pull/128) Replaced @ember/render-modifiers with ember-modifier ([@ijlee2](https://github.com/ijlee2))
+* [#126](https://github.com/ijlee2/ember-container-query/pull/126) Listed ember-test-selectors as a dependency ([@ijlee2](https://github.com/ijlee2))
+
+### Enhancement
+* [#128](https://github.com/ijlee2/ember-container-query/pull/128) Replaced @ember/render-modifiers with ember-modifier ([@ijlee2](https://github.com/ijlee2))
+
+### Internal
+* [#133](https://github.com/ijlee2/ember-container-query/pull/133) Addressed ember-modifier deprecations ([@ijlee2](https://github.com/ijlee2))
+* [#132](https://github.com/ijlee2/ember-container-query/pull/132) Updated dependencies to their latest version ([@ijlee2](https://github.com/ijlee2))
+* [#128](https://github.com/ijlee2/ember-container-query/pull/128) Replaced @ember/render-modifiers with ember-modifier ([@ijlee2](https://github.com/ijlee2))
+* [#125](https://github.com/ijlee2/ember-container-query/pull/125) Updated dependencies to their latest version ([@ijlee2](https://github.com/ijlee2))
+* [#124](https://github.com/ijlee2/ember-container-query/pull/124) Installed stylelint to help with maintaining the demo app ([@ijlee2](https://github.com/ijlee2))
+
+### Committers: 1
+- Isaac Lee ([@ijlee2](https://github.com/ijlee2))
+
+
 ## 2.1.0 (2022-06-03)
 
 ### Enhancement

package/addon/components/container-query.hbs

@@ -2,17 +2,17 @@
   <Tag
     class="container-query"
     data-test-container-query
-    {{did-insert this.queryContainer}}
-    {{on-resize this.onResize}}
+    {{container-query
+      dataAttributePrefix=@dataAttributePrefix
+      debounce=@debounce
+      features=@features
+      onQuery=this.updateState
+    }}
     ...attributes
   >
     {{yield (hash
+      dimensions=this.dimensions
       features=this.queryResults
-      dimensions=(hash
-        aspectRatio=this.aspectRatio
-        height=this.height
-        width=this.width
-      )
     )}}
   </Tag>
 {{/let}}

package/addon/components/container-query.ts

@@ -1,21 +1,11 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { debounce } from '@ember/runloop';
-
-type Metadata = {
-  dimension: 'aspectRatio' | 'height' | 'width';
-  max: number;
-  min: number;
-};
-
-type Features = {
-  [featureName: string]: Metadata;
-};
-
-type QueryResults = {
-  [featureName: string]: boolean;
-};
+import type {
+  Dimensions,
+  Features,
+  QueryResults,
+} from 'ember-container-query/modifiers/container-query';
 
 interface ContainerQueryComponentArgs {
   dataAttributePrefix?: string;
@@ -25,81 +15,20 @@ interface ContainerQueryComponentArgs {
 }
 
 export default class ContainerQueryComponent extends Component<ContainerQueryComponentArgs> {
-  @tracked queryResults = {} as QueryResults;
-  @tracked aspectRatio?: number;
-  @tracked height?: number;
-  @tracked width?: number;
-
-  get features(): Features {
-    return this.args.features ?? {};
-  }
-
-  get dataAttributePrefix(): string {
-    return this.args.dataAttributePrefix ?? 'container-query';
-  }
-
-  get debounce(): number {
-    return this.args.debounce ?? 0;
-  }
+  @tracked dimensions?: Dimensions;
+  @tracked queryResults?: QueryResults;
 
   // The dynamic tag is restricted to be immutable
   tagName = this.args.tagName ?? 'div';
 
-  @action onResize(resizeObserverEntry: ResizeObserverEntry): void {
-    const element = resizeObserverEntry.target;
-
-    if (this.debounce > 0) {
-      debounce(this, this.queryContainer, element, this.debounce);
-      return;
-    }
-
-    this.queryContainer(element);
-  }
-
-  @action queryContainer(element: Element): void {
-    this.measureDimensions(element);
-    this.evaluateQueries();
-    this.setDataAttributes(element);
-  }
-
-  measureDimensions(element: Element): void {
-    this.height = element.clientHeight;
-    this.width = element.clientWidth;
-    this.aspectRatio = this.width / this.height;
-  }
-
-  evaluateQueries(): void {
-    const queryResults = {} as QueryResults;
-
-    for (const [featureName, metadata] of Object.entries(this.features)) {
-      const { dimension, min, max } = metadata;
-      const value = this[dimension]!;
-
-      queryResults[featureName] = min <= value && value < max;
-    }
-
+  @action updateState({
+    dimensions,
+    queryResults,
+  }: {
+    dimensions: Dimensions;
+    queryResults: QueryResults;
+  }): void {
+    this.dimensions = dimensions;
     this.queryResults = queryResults;
   }
-
-  setDataAttributes(element: Element): void {
-    const prefix = this.dataAttributePrefix;
-
-    for (const [featureName, meetsFeature] of Object.entries(
-      this.queryResults
-    )) {
-      let attributeName;
-
-      if (prefix) {
-        attributeName = `data-${prefix}-${featureName}`;
-      } else {
-        attributeName = `data-${featureName}`;
-      }
-
-      if (meetsFeature) {
-        element.setAttribute(attributeName, '');
-      } else {
-        element.removeAttribute(attributeName);
-      }
-    }
-  }
 }

package/addon/helpers/cq-aspect-ratio.ts

@@ -1,10 +1,5 @@
 import { helper } from '@ember/component/helper';
-
-type Metadata = {
-  dimension: 'aspectRatio' | 'height' | 'width';
-  max: number;
-  min: number;
-};
+import type { Metadata } from 'ember-container-query/modifiers/container-query';
 
 function cqAspectRatio(
   positional: unknown[],

package/addon/helpers/cq-height.ts

@@ -1,10 +1,5 @@
 import { helper } from '@ember/component/helper';
-
-type Metadata = {
-  dimension: 'aspectRatio' | 'height' | 'width';
-  max: number;
-  min: number;
-};
+import type { Metadata } from 'ember-container-query/modifiers/container-query';
 
 function cqHeight(
   positional: unknown[],

package/addon/helpers/cq-width.ts

@@ -1,10 +1,5 @@
 import { helper } from '@ember/component/helper';
-
-type Metadata = {
-  dimension: 'aspectRatio' | 'height' | 'width';
-  max: number;
-  min: number;
-};
+import type { Metadata } from 'ember-container-query/modifiers/container-query';
 
 function cqWidth(
   positional: unknown[],

package/addon/modifiers/container-query.ts

@@ -0,0 +1,170 @@
+import { registerDestructor } from '@ember/destroyable';
+import { action } from '@ember/object';
+import { debounce as _debounce } from '@ember/runloop';
+import { inject as service } from '@ember/service';
+import Modifier, { ArgsFor, NamedArgs, PositionalArgs } from 'ember-modifier';
+
+export type Metadata = {
+  dimension: 'aspectRatio' | 'height' | 'width';
+  max: number;
+  min: number;
+};
+
+export type Features = {
+  [featureName: string]: Metadata;
+};
+
+export type Dimensions = {
+  aspectRatio: number;
+  height: number;
+  width: number;
+};
+
+export type QueryResults = {
+  [featureName: string]: boolean;
+};
+
+interface ContainerQueryModifierSignature {
+  Args: {
+    Named: {
+      dataAttributePrefix?: string;
+      debounce?: number;
+      features?: Features;
+      onQuery?: ({
+        dimensions,
+        queryResults,
+      }: {
+        dimensions: Dimensions;
+        queryResults: QueryResults;
+      }) => void;
+    };
+    Positional: [];
+  };
+  Element: Element;
+}
+
+export default class ContainerQueryModifier extends Modifier<ContainerQueryModifierSignature> {
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  /* @ts-ignore */
+  @service private declare readonly resizeObserver;
+
+  dimensions!: Dimensions;
+  queryResults!: QueryResults;
+
+  private _dataAttributes: string[] = [];
+  private _element?: Element;
+  private _named!: NamedArgs<ContainerQueryModifierSignature>;
+
+  get dataAttributePrefix(): string {
+    return this._named.dataAttributePrefix ?? 'container-query';
+  }
+
+  get debounce(): number {
+    return this._named.debounce ?? 0;
+  }
+
+  get features(): Features {
+    return this._named.features ?? {};
+  }
+
+  constructor(owner: unknown, args: ArgsFor<ContainerQueryModifierSignature>) {
+    super(owner, args);
+
+    registerDestructor(this, () => {
+      this.resizeObserver.unobserve(this._element, this.onResize);
+    });
+  }
+
+  modify(
+    element: Element,
+    _positional: PositionalArgs<ContainerQueryModifierSignature>,
+    named: NamedArgs<ContainerQueryModifierSignature>
+  ): void {
+    this._named = named;
+
+    this.registerResizeObserver(element);
+    this.queryContainer(element);
+  }
+
+  @action private onResize(resizeObserverEntry: ResizeObserverEntry): void {
+    const element = resizeObserverEntry.target;
+
+    if (this.debounce > 0) {
+      _debounce(this, this.queryContainer, element, this.debounce);
+      return;
+    }
+
+    this.queryContainer(element);
+  }
+
+  private registerResizeObserver(element: Element): void {
+    this.resizeObserver.unobserve(this._element, this.onResize);
+
+    this._element = element;
+    this.resizeObserver.observe(this._element, this.onResize);
+  }
+
+  private queryContainer(element: Element): void {
+    this.measureDimensions(element);
+    this.evaluateQueries();
+    this.resetDataAttributes(element);
+    this.setDataAttributes(element);
+
+    this._named.onQuery?.({
+      dimensions: this.dimensions,
+      queryResults: this.queryResults,
+    });
+  }
+
+  private measureDimensions(element: Element): void {
+    const height = element.clientHeight;
+    const width = element.clientWidth;
+
+    this.dimensions = {
+      aspectRatio: width / height,
+      height,
+      width,
+    };
+  }
+
+  private evaluateQueries(): void {
+    const queryResults = {} as QueryResults;
+
+    for (const [featureName, metadata] of Object.entries(this.features)) {
+      const { dimension, min, max } = metadata;
+      const value = this.dimensions[dimension];
+
+      queryResults[featureName] = min <= value && value < max;
+    }
+
+    this.queryResults = queryResults;
+  }
+
+  private resetDataAttributes(element: Element): void {
+    this._dataAttributes.forEach((dataAttribute) => {
+      element.removeAttribute(dataAttribute);
+    });
+
+    this._dataAttributes = [];
+  }
+
+  private setDataAttributes(element: Element): void {
+    const prefix = this.dataAttributePrefix;
+
+    for (const [featureName, meetsFeature] of Object.entries(
+      this.queryResults
+    )) {
+      if (!meetsFeature) {
+        continue;
+      }
+
+      const dataAttribute = prefix
+        ? `data-${prefix}-${featureName}`
+        : `data-${featureName}`;
+
+      element.setAttribute(dataAttribute, '');
+
+      this._dataAttributes.push(dataAttribute);
+    }
+  }
+}

package/app/modifiers/container-query.js

@@ -0,0 +1 @@
+export { default } from 'ember-container-query/modifiers/container-query';

package/components/container-query.d.ts

@@ -1,15 +1,5 @@
 import Component from '@glimmer/component';
-declare type Metadata = {
-    dimension: 'aspectRatio' | 'height' | 'width';
-    max: number;
-    min: number;
-};
-declare type Features = {
-    [featureName: string]: Metadata;
-};
-declare type QueryResults = {
-    [featureName: string]: boolean;
-};
+import type { Dimensions, Features, QueryResults } from 'ember-container-query/modifiers/container-query';
 interface ContainerQueryComponentArgs {
     dataAttributePrefix?: string;
     debounce?: number;
@@ -17,19 +7,13 @@ interface ContainerQueryComponentArgs {
     tagName?: string;
 }
 export default class ContainerQueryComponent extends Component<ContainerQueryComponentArgs> {
-    queryResults: QueryResults;
-    aspectRatio?: number;
-    height?: number;
-    width?: number;
-    get features(): Features;
-    get dataAttributePrefix(): string;
-    get debounce(): number;
+    dimensions?: Dimensions;
+    queryResults?: QueryResults;
     tagName: string;
-    onResize(resizeObserverEntry: ResizeObserverEntry): void;
-    queryContainer(element: Element): void;
-    measureDimensions(element: Element): void;
-    evaluateQueries(): void;
-    setDataAttributes(element: Element): void;
+    updateState({ dimensions, queryResults, }: {
+        dimensions: Dimensions;
+        queryResults: QueryResults;
+    }): void;
 }
 export {};
 //# sourceMappingURL=container-query.d.ts.map

package/helpers/cq-aspect-ratio.d.ts

@@ -1,8 +1,4 @@
-declare type Metadata = {
-    dimension: 'aspectRatio' | 'height' | 'width';
-    max: number;
-    min: number;
-};
+import type { Metadata } from 'ember-container-query/modifiers/container-query';
 declare const _default: import("@ember/component/helper").FunctionBasedHelper<{
     Args: {
         Positional: unknown[];

package/helpers/cq-height.d.ts

@@ -1,8 +1,4 @@
-declare type Metadata = {
-    dimension: 'aspectRatio' | 'height' | 'width';
-    max: number;
-    min: number;
-};
+import type { Metadata } from 'ember-container-query/modifiers/container-query';
 declare const _default: import("@ember/component/helper").FunctionBasedHelper<{
     Args: {
         Positional: unknown[];

package/helpers/cq-width.d.ts

@@ -1,8 +1,4 @@
-declare type Metadata = {
-    dimension: 'aspectRatio' | 'height' | 'width';
-    max: number;
-    min: number;
-};
+import type { Metadata } from 'ember-container-query/modifiers/container-query';
 declare const _default: import("@ember/component/helper").FunctionBasedHelper<{
     Args: {
         Positional: unknown[];

package/modifiers/container-query.d.ts

@@ -0,0 +1,54 @@
+import Modifier, { ArgsFor, NamedArgs, PositionalArgs } from 'ember-modifier';
+export type Metadata = {
+    dimension: 'aspectRatio' | 'height' | 'width';
+    max: number;
+    min: number;
+};
+export type Features = {
+    [featureName: string]: Metadata;
+};
+export type Dimensions = {
+    aspectRatio: number;
+    height: number;
+    width: number;
+};
+export type QueryResults = {
+    [featureName: string]: boolean;
+};
+interface ContainerQueryModifierSignature {
+    Args: {
+        Named: {
+            dataAttributePrefix?: string;
+            debounce?: number;
+            features?: Features;
+            onQuery?: ({ dimensions, queryResults, }: {
+                dimensions: Dimensions;
+                queryResults: QueryResults;
+            }) => void;
+        };
+        Positional: [];
+    };
+    Element: Element;
+}
+export default class ContainerQueryModifier extends Modifier<ContainerQueryModifierSignature> {
+    private readonly resizeObserver;
+    dimensions: Dimensions;
+    queryResults: QueryResults;
+    private _dataAttributes;
+    private _element?;
+    private _named;
+    get dataAttributePrefix(): string;
+    get debounce(): number;
+    get features(): Features;
+    constructor(owner: unknown, args: ArgsFor<ContainerQueryModifierSignature>);
+    modify(element: Element, _positional: PositionalArgs<ContainerQueryModifierSignature>, named: NamedArgs<ContainerQueryModifierSignature>): void;
+    private onResize;
+    private registerResizeObserver;
+    private queryContainer;
+    private measureDimensions;
+    private evaluateQueries;
+    private resetDataAttributes;
+    private setDataAttributes;
+}
+export {};
+//# sourceMappingURL=container-query.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-container-query",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Container queries using Ember modifiers",
   "keywords": [
     "container-queries",
@@ -26,9 +26,11 @@
     "build": "ember build --environment=production",
     "build:test": "ember build --environment=test",
     "changelog": "lerna-changelog",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
+    "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
+    "lint:css": "stylelint \"tests/dummy/app/**/*.css\" --cache",
+    "lint:css:fix": "stylelint \"tests/dummy/app/**/*.css\" --fix",
     "lint:dependency": "ember dependency-lint",
-    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
+    "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
     "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache --ext=.js,.ts",
@@ -52,55 +54,58 @@
     }
   },
   "dependencies": {
-    "@ember/render-modifiers": "^2.0.4",
     "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.0.1",
-    "ember-cli-typescript": "^5.1.0",
+    "ember-cli-htmlbars": "^6.1.1",
+    "ember-cli-typescript": "^5.2.1",
     "ember-element-helper": "^0.6.1",
-    "ember-on-resize-modifier": "^1.1.0"
+    "ember-modifier": "^3.2.7",
+    "ember-resize-observer-service": "^1.1.0",
+    "ember-test-selectors": "^6.0.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
     "@ember/test-helpers": "^2.8.1",
-    "@embroider/test-setup": "^1.7.1",
+    "@embroider/test-setup": "^2.0.2",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@percy/cli": "^1.2.1",
-    "@percy/ember": "^3.0.0",
-    "@types/ember-qunit": "^5.0.0",
-    "@types/ember-resolver": "^5.0.11",
-    "@types/ember__application": "^4.0.0",
-    "@types/ember__array": "^4.0.1",
-    "@types/ember__component": "^4.0.8",
-    "@types/ember__controller": "^4.0.0",
-    "@types/ember__debug": "^4.0.1",
-    "@types/ember__engine": "^4.0.0",
-    "@types/ember__error": "^4.0.0",
-    "@types/ember__object": "^4.0.2",
-    "@types/ember__polyfills": "^4.0.0",
-    "@types/ember__routing": "^4.0.7",
-    "@types/ember__runloop": "^4.0.1",
-    "@types/ember__service": "^4.0.0",
-    "@types/ember__string": "^3.0.9",
-    "@types/ember__template": "^4.0.0",
-    "@types/ember__test": "^4.0.0",
-    "@types/ember__test-helpers": "^2.6.1",
-    "@types/ember__utils": "^4.0.0",
+    "@percy/cli": "^1.16.0",
+    "@percy/ember": "^4.0.0",
+    "@types/ember-qunit": "^5.0.2",
+    "@types/ember-resolver": "^5.0.13",
+    "@types/ember__application": "^4.0.4",
+    "@types/ember__array": "^4.0.3",
+    "@types/ember__component": "^4.0.11",
+    "@types/ember__controller": "^4.0.4",
+    "@types/ember__debug": "^4.0.3",
+    "@types/ember__destroyable": "^4.0.1",
+    "@types/ember__engine": "^4.0.4",
+    "@types/ember__error": "^4.0.1",
+    "@types/ember__object": "^4.0.5",
+    "@types/ember__polyfills": "^4.0.1",
+    "@types/ember__routing": "^4.0.12",
+    "@types/ember__runloop": "^4.0.2",
+    "@types/ember__service": "^4.0.1",
+    "@types/ember__string": "^3.0.10",
+    "@types/ember__template": "^4.0.1",
+    "@types/ember__test": "^4.0.1",
+    "@types/ember__test-helpers": "^2.8.2",
+    "@types/ember__utils": "^4.0.2",
     "@types/htmlbars-inline-precompile": "^3.0.0",
-    "@types/qunit": "^2.19.0",
+    "@types/qunit": "^2.19.3",
     "@types/rsvp": "^4.0.4",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
     "broccoli-asset-rev": "^3.0.0",
-    "d3-array": "^3.1.6",
+    "concurrently": "^7.6.0",
+    "d3-array": "^3.2.0",
     "d3-axis": "^3.0.0",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.1.0",
-    "ember-a11y-refocus": "^2.3.0",
+    "ember-a11y-refocus": "^3.0.2",
     "ember-a11y-testing": "^5.0.0",
-    "ember-auto-import": "^2.4.2",
-    "ember-cli": "~4.4.0",
+    "ember-auto-import": "^2.5.0",
+    "ember-cli": "~4.8.0",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-dependency-lint": "^2.0.1",
     "ember-cli-inject-live-reload": "^2.1.0",
@@ -109,32 +114,35 @@
     "ember-cli-terser": "^4.0.2",
     "ember-css-modules": "^2.0.1",
     "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
     "ember-named-blocks-polyfill": "^0.2.5",
     "ember-page-title": "^7.0.0",
-    "ember-qunit": "^5.1.5",
+    "ember-qunit": "^6.0.0",
     "ember-resolver": "^8.0.3",
-    "ember-source": "~4.4.0",
+    "ember-source": "~4.8.0",
     "ember-source-channel-url": "^3.0.0",
-    "ember-svg-jar": "^2.3.4",
-    "ember-template-lint": "^4.10.0",
-    "ember-test-selectors": "^6.0.0",
-    "ember-truth-helpers": "^3.0.0",
+    "ember-svg-jar": "^2.4.2",
+    "ember-template-lint": "^5.0.2",
+    "ember-truth-helpers": "^3.1.1",
     "ember-try": "^2.0.0",
-    "eslint": "^8.16.0",
+    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-ember": "^10.6.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-ember": "^11.2.1",
+    "eslint-plugin-n": "^15.5.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-qunit": "^7.3.4",
+    "eslint-plugin-simple-import-sort": "^8.0.0",
     "lerna-changelog": "^2.2.0",
     "loader.js": "^4.7.0",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.6.2",
-    "qunit": "^2.19.1",
+    "prettier": "^2.8.0",
+    "qunit": "^2.19.3",
     "qunit-dom": "^2.0.0",
-    "typescript": "^4.7.2",
-    "webpack": "^5.73.0"
+    "stylelint": "^14.15.0",
+    "stylelint-config-standard": "^29.0.0",
+    "stylelint-no-unsupported-browser-features": "^6.0.1",
+    "stylelint-order": "^5.0.0",
+    "typescript": "^4.9.3",
+    "webpack": "^5.75.0"
   },
   "engines": {
     "node": "12.* || 14.* || >= 16"