@discourse/lint-configs 2.16.0 → 2.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@discourse/lint-configs",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "description": "Shareable lint configs for Discourse core, plugins, and themes",
   "author": "Discourse",
   "license": "MIT",
@@ -47,6 +47,7 @@
     "stylelint": "^16.19.1",
     "stylelint-config-standard": "^38.0.0",
     "stylelint-config-standard-scss": "^14.0.0",
+    "stylelint-scss": "^6.12.0",
     "typescript": "^5.8.3"
   },
   "peerDependencies": {

package/stylelint-rules/index.js

@@ -0,0 +1,3 @@
+import NoBreakpointMixin from "./no-breakpoint-mixin.js";
+
+export default [NoBreakpointMixin];

package/stylelint-rules/no-breakpoint-mixin.js

@@ -0,0 +1,88 @@
+import stylelint from "stylelint";
+
+const ruleName = "discourse/no-breakpoint-mixin";
+const messages = stylelint.utils.ruleMessages(ruleName, {
+  rejected:
+    'Replace "@include breakpoint(...)" with "@include viewport.until(...)"',
+});
+
+const breakpointMappings = {
+  "mobile-small": "sm",
+  "mobile-medium": "sm",
+  "mobile-large": "sm",
+  "mobile-extra-large": "sm",
+  tablet: "md",
+  medium: "lg",
+  large: "lg",
+  "extra-large": "xl",
+};
+
+const ruleFunction = (primaryOption) => {
+  return (root, result) => {
+    if (!primaryOption) {
+      return;
+    }
+
+    root.walkAtRules("include", (atRule) => {
+      if (atRule.params.startsWith("breakpoint(")) {
+        // Report the issue
+        stylelint.utils.report({
+          message: messages.rejected,
+          node: atRule,
+          result,
+          ruleName,
+          fix: () => {
+            const fixableRegex = /breakpoint\("?([^,]+?)"?(, min-width)?\)/;
+            const match = atRule.params.match(fixableRegex);
+            if (!match) {
+              // Not autofixable
+              return;
+            }
+
+            const oldBreakpoint = match[1].trim();
+            const newBreakpoint = breakpointMappings[oldBreakpoint];
+            const isMinWidth = match[2] === ", min-width";
+
+            if (!newBreakpoint) {
+              // Not autofixable
+              return;
+            }
+
+            // Apply autofix
+            if (isMinWidth) {
+              atRule.params = atRule.params.replace(
+                fixableRegex,
+                `viewport.from(${newBreakpoint})`
+              );
+            } else {
+              atRule.params = atRule.params.replace(
+                fixableRegex,
+                `viewport.until(${newBreakpoint})`
+              );
+            }
+
+            // Ensure the `@use "lib/viewport";` is added at the top of the file
+            const hasViewportImport = root.nodes.some(
+              (node) =>
+                node.type === "atrule" &&
+                node.name === "use" &&
+                node.params.includes('"lib/viewport"')
+            );
+
+            if (!hasViewportImport) {
+              root.prepend(`@use "lib/viewport";\n`);
+            }
+          },
+        });
+      }
+    });
+  };
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+ruleFunction.meta = {
+  fixable: true,
+};
+
+export default stylelint.createPlugin(ruleName, ruleFunction);

package/stylelint.mjs

@@ -1,5 +1,8 @@
+import DiscourseRules from "./stylelint-rules/index.js";
+
 export default {
   extends: ["stylelint-config-standard-scss"],
+  plugins: [DiscourseRules],
   rules: {
     "color-no-invalid-hex": true,
     "unit-no-unknown": true,
@@ -26,5 +29,7 @@ export default {
     "scss/at-function-pattern": null,
     "scss/comment-no-empty": null,
     "scss/at-mixin-pattern": null,
+
+    "discourse/no-breakpoint-mixin": true,
   },
 };