style(all): add custom stylelint rule to suggest usage of the `clicka…

…ble` mixin over setting `cursor: pointer;` (#3402)

.stylelintrc

@@ -1,10 +1,12 @@
 {
   "plugins": [
     "stylelint-selector-bem-pattern",
-    "@stylistic/stylelint-plugin"
+    "@stylistic/stylelint-plugin",
+    "./custom-stylelint-plugins/no-direct-cursor-pointer"
   ],
   "extends": "stylelint-config-recommended-scss",
   "rules": {
+    "daffodil/no-direct-cursor-pointer": true,
     "color-hex-length": "long",
     "color-no-invalid-hex": true,
     "color-named": "never",

apps/demo/src/app/cart/components/cart-item/cart-item.component.scss

@@ -9,7 +9,7 @@
 	grid-template-columns: 1fr 3fr;
 
 	&__image {
-		cursor: pointer;
+		@include clickable();
 		display: block;
 		max-width: 100%;
 	}
@@ -19,7 +19,7 @@
 	}
 
 	&__name {
-		cursor: pointer;
+		@include clickable();
 		font-size: 1rem;
 		font-weight: bold;
 

apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.scss

@@ -5,7 +5,7 @@
 	padding: 75px 25px 0;
 
 	&__close {
-		cursor: pointer;
+		@include clickable();
 		font-size: $medium-font-size;
 		position: absolute;
 		right: 25px;

apps/demo/src/app/product/components/product-card/product-card.component.scss

@@ -1,8 +1,8 @@
 @use 'utilities' as *;
 
 .demo-product-card {
+	@include clickable();
 	border: none;
-	cursor: pointer;
 
 	&__details {
 		padding: 15px 15px 0;

custom-stylelint-plugins/no-direct-cursor-pointer.js

@@ -0,0 +1,24 @@
+const stylelint = require('stylelint');
+
+const ruleName = 'daffodil/no-direct-cursor-pointer';
+const messages = stylelint.utils.ruleMessages(ruleName, {
+  rejected: 'Use the `clickable()` mixin instead of directly setting `cursor: pointer;`.',
+});
+
+module.exports = stylelint.createPlugin(ruleName, (primaryOption) => {
+  return (postcssRoot, postcssResult) => {
+    postcssRoot.walkDecls((decl) => {
+      if (decl.prop === 'cursor' && decl.value === 'pointer') {
+        stylelint.utils.report({
+          message: messages.rejected,
+          node: decl,
+          result: postcssResult,
+          ruleName,
+        });
+      }
+    });
+  };
+});
+
+module.exports.ruleName = ruleName;
+module.exports.messages = messages;

libs/design/scss/interactions/mouse/_clickable.scss

@@ -11,6 +11,7 @@
 // @include clickable();
 // ```
 @mixin clickable() {
+	// stylelint-disable daffodil/no-direct-cursor-pointer
 	cursor: pointer;
 	-webkit-user-select: none;
 	/// Chrome all / Safari all ///