@dialpad/stylelint-plugin-dialtone 1.1.0 → 1.2.1

package/lib/index.js

@@ -2,5 +2,6 @@
 
 const noMixins = require("./rules/no-mixins");
 const recommendFontStyleTokens = require("./rules/recommend-font-style-tokens");
+const useDialtoneTokens = require("./rules/use-dialtone-tokens");
 
-module.exports = [noMixins, recommendFontStyleTokens];
+module.exports = [noMixins, recommendFontStyleTokens, useDialtoneTokens];

package/lib/rules/use-dialtone-tokens.js

@@ -0,0 +1,69 @@
+const stylelint = require("stylelint");
+
+const {
+  createPlugin,
+  utils: { report, ruleMessages, validateOptions },
+} = stylelint;
+
+const ruleName = '@dialpad/stylelint-plugin-dialtone/use-dialtone-tokens';
+
+const messages = ruleMessages(ruleName, {
+  useDialtoneTokens: (value) => `Use a Dialtone token instead of "${value}".
+    A list of available tokens can be found here: https://dialtone.dialpad.com/tokens.
+    Consult with design on which token should be used and only with their approval ignore this rule.`,
+  useRemInsteadOfPx: (value) => `If it's not possible to use a Dialtone token, use ${pxToRem(value)} instead of ${value}.`,
+});
+
+const pxToRem = (value) => {
+  const val = parseFloat(value.replace('px', ''));
+  return val / 10 + 'rem';
+}
+
+const meta = {
+  url: "https://github.com/dialpad/dialtone/blob/staging/packages/stylelint-plugin-dialtone/docs/rules/use-dialtone-tokens.md",
+};
+
+/** @type {import('stylelint').Rule} */
+const ruleFunction = (primary) => {
+  // detects the use of px or rem in properties and suggests to use a Dialtone token
+  // or rem instead of px if a Dialtone token is not available
+  return (root, result) => {
+    const validOptions = validateOptions(result, ruleName, {
+      actual: primary,
+    });
+
+    if (!validOptions) return;
+
+    // This iterates through one selector at a time, so you don't have to worry about checking for nested selectors.
+    root.walkDecls((declNode) => {
+      const hasRemUnit = declNode.value.includes('rem');
+      const hasPxUnit = declNode.value.includes('px');
+      if (hasRemUnit || hasPxUnit) {
+        report({
+          result,
+          ruleName,
+          node: declNode,
+          start: declNode.source.start,
+          end: declNode.source.end,
+          message: messages.useDialtoneTokens(declNode.value),
+        });
+      }
+      if (hasPxUnit) {
+        report({
+          result,
+          ruleName,
+          node: declNode,
+          start: declNode.source.start,
+          end: declNode.source.end,
+          message: messages.useRemInsteadOfPx(declNode.value),
+        });
+      }
+    });
+  };
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+ruleFunction.meta = meta;
+
+module.exports = createPlugin(ruleName, ruleFunction);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/stylelint-plugin-dialtone",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "dialtone stylelint plugin",
   "keywords": [
     "Dialpad",
@@ -44,7 +44,6 @@
   ],
   "exports": "./lib/index.js",
   "devDependencies": {
-    "stylelint": "15.11.0",
     "stylelint-test-rule-node": "^0.2.1"
   },
   "engines": {
@@ -53,6 +52,12 @@
   "peerDependencies": {
     "stylelint": "^14.0.0 || ^15.0.0"
   },
+  "nx": {
+    "includedScripts": [
+      "lint",
+      "test"
+    ]
+  },
   "scripts": {
     "lint": "run-s lint:docs lint:code",
     "lint:code": "eslint '**/*.js'",