diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs
new file mode 100644
index 00000000000..beb0fee57da
--- /dev/null
+++ b/packages/calcite-components/.stylelintrc.cjs
@@ -0,0 +1,81 @@
+// @ts-check
+
+const scssPatternRules = [
+  "scss/at-function-pattern",
+  "scss/dollar-variable-pattern",
+  "scss/at-mixin-pattern",
+  "scss/percent-placeholder-pattern",
+];
+
+/** @type {import('stylelint').Config["rules"]} */
+const rules = {
+  "length-zero-no-unit": true,
+  "liberty/use-logical-spec": [
+    "always",
+    {
+      except: ["left", "right"],
+    },
+  ],
+  "no-descending-specificity": [
+    true,
+    {
+      ignore: ["selectors-within-list"],
+    },
+  ],
+  "selector-disallowed-list": [
+    ["/:host-context/"],
+    {
+      message: ":host-context is not supported in all browsers, so it should be avoided",
+      severity: "error",
+    },
+  ],
+  "selector-max-specificity": [
+    "0,5,5",
+    {
+      message: "selector is too complex, consider applying multiple classes dynamically during rendering",
+    },
+  ],
+  "selector-pseudo-element-colon-notation": [
+    "double",
+    {
+      message: "Use double colons for pseudo-elements",
+    },
+  ],
+  "selector-type-no-unknown": [
+    true,
+    {
+      ignoreTypes: ["/^calcite-/"],
+    },
+  ],
+  "scss/function-no-unknown": [
+    true,
+    {
+      ignoreFunctions: ["get-trailing-text-input-padding", "scale-duration", "theme", "var"],
+      severity: "error",
+    },
+  ],
+};
+
+scssPatternRules.forEach((rule) => {
+  const kebabCasePattern = "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$";
+
+  rules[rule] =
+    /** @type {import('stylelint').Config["rules"][string]} */
+    [
+      kebabCasePattern,
+      {
+        message: "Name should be kebab-cased",
+        severity: "error",
+      },
+    ];
+});
+
+/** @type {import('stylelint').Config} */
+const config = {
+  defaultSeverity: "warning",
+  extends: "stylelint-config-recommended-scss",
+  plugins: ["stylelint-use-logical-spec"],
+  rules,
+};
+
+module.exports = config;
diff --git a/packages/calcite-components/.stylelintrc.json b/packages/calcite-components/.stylelintrc.json
deleted file mode 100644
index b5c35fd79ed..00000000000
--- a/packages/calcite-components/.stylelintrc.json
+++ /dev/null
@@ -1,80 +0,0 @@
-{
-  "defaultSeverity": "warning",
-  "extends": "stylelint-config-recommended-scss",
-  "plugins": ["stylelint-use-logical-spec"],
-  "rules": {
-    "length-zero-no-unit": true,
-    "liberty/use-logical-spec": [
-      "always",
-      {
-        "except": ["left", "right"]
-      }
-    ],
-    "no-descending-specificity": [
-      true,
-      {
-        "ignore": ["selectors-within-list"]
-      }
-    ],
-    "selector-disallowed-list": [
-      ["/:host-context/"],
-      {
-        "message": ":host-context is not supported in all browsers, so it should be avoided",
-        "severity": "error"
-      }
-    ],
-    "selector-max-specificity": [
-      "0,5,5",
-      {
-        "message": "selector is too complex, consider applying multiple classes dynamically during rendering"
-      }
-    ],
-    "selector-pseudo-element-colon-notation": [
-      "double",
-      {
-        "message": "Use double colons for pseudo-elements"
-      }
-    ],
-    "selector-type-no-unknown": [
-      true,
-      {
-        "ignoreTypes": ["/^calcite-/"]
-      }
-    ],
-    "scss/at-function-pattern": [
-      "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
-      {
-        "message": "Name should be kebab-cased.",
-        "severity": "error"
-      }
-    ],
-    "scss/dollar-variable-pattern": [
-      "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
-      {
-        "message": "Name should be kebab-cased.",
-        "severity": "error"
-      }
-    ],
-    "scss/at-mixin-pattern": [
-      "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
-      {
-        "message": "Name should be kebab-cased.",
-        "severity": "error"
-      }
-    ],
-    "scss/percent-placeholder-pattern": [
-      "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
-      {
-        "message": "Name should be kebab-cased.",
-        "severity": "error"
-      }
-    ],
-    "scss/function-no-unknown": [
-      true,
-      {
-        "ignoreFunctions": ["get-trailing-text-input-padding", "scale-duration", "theme", "var"],
-        "severity": "error"
-      }
-    ]
-  }
-}