@dialpad/stylelint-plugin-dialtone 1.0.2 → 1.2.0

package/lib/index.js

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

package/lib/rules/recommend-font-style-tokens.js

@@ -0,0 +1,53 @@
+const stylelint = require("stylelint");
+
+const {
+  createPlugin,
+  utils: { report, ruleMessages, validateOptions },
+} = stylelint;
+
+const ruleName = '@dialpad/stylelint-plugin-dialtone/recommend-font-style-tokens';
+
+const messages = ruleMessages(ruleName, {
+  recommendFontStyleTokens: (property) => `Instead of setting "${property}" it is
+      preferred to set the property Font to a composition token that bundles font-family, font-weight, font-size, and line-height.
+      More information can be found here:
+      https://dialtone.dialpad.com/design/typography/#api. There can be cases where using these selectors is intentional and valid,
+      in which case you can ignore this warning.`,
+});
+
+const meta = {
+  url: "https://github.com/dialpad/dialtone/blob/staging/packages/stylelint-plugin-dialtone/docs/rules/recommend-font-style-tokens.md",
+};
+
+/** @type {import('stylelint').Rule} */
+const ruleFunction = (primary) => {
+  // reject setting font-size, font-family, font-weight, and line-height separately
+  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 typographyProperties = ['font-family', 'font-weight', 'font-size', 'line-height'];
+      if (typographyProperties.includes(declNode.prop)) {
+        report({
+          result,
+          ruleName,
+          node: declNode,
+          start: declNode.source.start,
+          end: declNode.source.end,
+          message: messages.recommendFontStyleTokens(declNode.prop),
+        });
+      }
+    });
+  };
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+ruleFunction.meta = meta;
+
+module.exports = createPlugin(ruleName, ruleFunction);

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.0.2",
+  "version": "1.2.0",
   "description": "dialtone stylelint plugin",
   "keywords": [
     "Dialpad",
@@ -39,9 +39,11 @@
   },
   "license": "MIT",
   "main": "./lib/index.js",
+  "files": [
+    "lib"
+  ],
   "exports": "./lib/index.js",
   "devDependencies": {
-    "stylelint": "15.11.0",
     "stylelint-test-rule-node": "^0.2.1"
   },
   "engines": {
@@ -50,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'",

package/.eslintrc.js

@@ -1,17 +0,0 @@
-"use strict";
-
-module.exports = {
-  root: true,
-  extends: [
-    "eslint:recommended",
-    "plugin:eslint-plugin/recommended",
-    "plugin:node/recommended",
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    parser: "vue-eslint-parser"
-  },
-  env: {
-    node: true,
-  },
-};

package/.markdownlint.json

@@ -1,3 +0,0 @@
-{
-  "extends": "../../.markdownlint.json"
-}

package/CHANGELOG.json

@@ -1 +0,0 @@
-{"versions":[{"version":"1.0.2","title":"[1.0.2](https://github.com/dialpad/dialtone/compare/stylelint-plugin-dialtone/v1.0.1...stylelint-plugin-dialtone/v1.0.2) (2024-03-26)","date":"2024-03-26","body":"### Bug Fixes\n\n* NO-JIRA release not working with new commit convention ([#235](https://github.com/dialpad/dialtone/issues/235)) ([28ff27c](https://github.com/dialpad/dialtone/commit/28ff27cffac5e751eaf8496b7c716710a0153a61))","parsed":{"_":["NO-JIRA release not working with new commit convention (#235) (28ff27c)"],"Bug Fixes":["NO-JIRA release not working with new commit convention (#235) (28ff27c)"]}},{"version":"1.0.1","title":"[1.0.1](https://github.com/dialpad/dialtone/compare/stylelint-plugin-dialtone/v1.0.0...stylelint-plugin-dialtone/v1.0.1) (2024-03-20)","date":"2024-03-20","body":"### Bug Fixes\n\n* use mixin property to detect mixin ([#215](https://github.com/dialpad/dialtone/issues/215)) ([493f58e](https://github.com/dialpad/dialtone/commit/493f58ef37ea14392bfee0fabc7c0cf8fa524d2a))\n\n\n\n### Features\n\n* dialtone stylelint plugin - no mixins rule ([#186](https://github.com/dialpad/dialtone/issues/186)) ([8fe0ffb](https://github.com/dialpad/dialtone/commit/8fe0ffb7f4dd81cbf19e6cbbe37b16ca609973cd))","parsed":{"_":["use mixin property to detect mixin (#215) (493f58e)","dialtone stylelint plugin - no mixins rule (#186) (8fe0ffb)"],"Bug Fixes":["use mixin property to detect mixin (#215) (493f58e)"],"Features":["dialtone stylelint plugin - no mixins rule (#186) (8fe0ffb)"]}}],"title":"1.0.0 (2024-03-07)"}

package/CHANGELOG.md

@@ -1,20 +0,0 @@
-## [1.0.2](https://github.com/dialpad/dialtone/compare/stylelint-plugin-dialtone/v1.0.1...stylelint-plugin-dialtone/v1.0.2) (2024-03-26)
-
-
-### Bug Fixes
-
-* NO-JIRA release not working with new commit convention ([#235](https://github.com/dialpad/dialtone/issues/235)) ([28ff27c](https://github.com/dialpad/dialtone/commit/28ff27cffac5e751eaf8496b7c716710a0153a61))
-
-## [1.0.1](https://github.com/dialpad/dialtone/compare/stylelint-plugin-dialtone/v1.0.0...stylelint-plugin-dialtone/v1.0.1) (2024-03-20)
-
-
-### Bug Fixes
-
-* use mixin property to detect mixin ([#215](https://github.com/dialpad/dialtone/issues/215)) ([493f58e](https://github.com/dialpad/dialtone/commit/493f58ef37ea14392bfee0fabc7c0cf8fa524d2a))
-
-# 1.0.0 (2024-03-07)
-
-
-### Features
-
-* dialtone stylelint plugin - no mixins rule ([#186](https://github.com/dialpad/dialtone/issues/186)) ([8fe0ffb](https://github.com/dialpad/dialtone/commit/8fe0ffb7f4dd81cbf19e6cbbe37b16ca609973cd))

package/docs/rules/no-mixins.md

@@ -1,35 +0,0 @@
-# Detects usage of LESS mixins (no-mixins)
-
-LESS mixin usage is one of the primary causes of our extremely slow front end build performance. We are attempting to remove as many LESS mixins as possible and eventually transition to a more modern pure CSS approach.
-
-## Rule Details
-
-This rule aims to detect and prevent usage of LESS mixins.
-
-Examples of **incorrect** code for this rule:
-
-Mixin usage:
-
-```css
-.a {
-  .aMixin();
-}
-```
-
-Older style mixin syntax usage:
-
-```css
-.a {
- .aMixin;
-}
-```
-
-Examples of **correct** code for this rule:
-
-No mixins used.
-
-```css
-.a {
-  color: var(--dt-color-foreground-critical);
-}
-```

package/project.json

@@ -1,26 +0,0 @@
-{
-  "name": "stylelint-plugin-dialtone",
-  "targets": {
-    "publish": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "pnpm publish --filter ./packages/stylelint-plugin-dialtone",
-        "parallel": false
-      }
-    },
-    "release-github": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "pnpm semantic-release-plus --extends ./packages/stylelint-plugin-dialtone/release-ci.config.cjs",
-        "parallel": false
-      }
-    },
-    "release-local": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "pnpm semantic-release-plus --no-ci --extends ./packages/stylelint-plugin-dialtone/release-local.config.cjs",
-        "parallel": false
-      }
-    }
-  }
-}

package/release-ci.config.cjs

@@ -1,32 +0,0 @@
-const name = 'stylelint-plugin-dialtone';
-const srcRoot = `packages/${name}`;
-
-module.exports = {
-  extends: 'release.config.base.js',
-  pkgRoot: srcRoot,
-  tagFormat: name + '/v${version}',
-  commitPaths: [`${srcRoot}/*`],
-  plugins: [
-    ['@semantic-release/commit-analyzer', {
-      preset: 'angular',
-      releaseRules: [
-        { type: 'refactor', release: 'patch' },
-      ],
-    }],
-    ['@semantic-release/release-notes-generator', {
-      config: '@dialpad/conventional-changelog-angular',
-    }],
-    '@semantic-release/github',
-  ],
-  branches: [
-    'production',
-    {
-      name: 'beta',
-      prerelease: true,
-    },
-    {
-      name: 'alpha',
-      prerelease: true,
-    },
-  ],
-};

package/release-local.config.cjs

@@ -1,40 +0,0 @@
-const name = 'stylelint-plugin-dialtone';
-const srcRoot = `packages/${name}`;
-
-module.exports = {
-  extends: 'release.config.base.js',
-  pkgRoot: srcRoot,
-  tagFormat: name + '/v${version}',
-  commitPaths: [`${srcRoot}/*`],
-  assets: [`${srcRoot}/CHANGELOG.md`, `${srcRoot}/CHANGELOG.json`, `${srcRoot}/package.json`],
-  plugins: [
-    ['@semantic-release/commit-analyzer', {
-      preset: 'angular',
-      releaseRules: [
-        { type: 'refactor', release: 'patch' },
-      ],
-    }],
-    ['@semantic-release/release-notes-generator', {
-      config: '@dialpad/conventional-changelog-angular',
-    }],
-    ['@dialpad/semantic-release-changelog-json', { changelogFile: `${srcRoot}/CHANGELOG.md`, changelogJsonFile: `${srcRoot}/CHANGELOG.json` }],
-    ['@semantic-release/changelog', { changelogFile: `${srcRoot}/CHANGELOG.md` }],
-    ['@semantic-release/npm', { npmPublish: false }],
-    ['@semantic-release/git', {
-      /* eslint-disable-next-line no-template-curly-in-string */
-      message: `chore(release): NO-JIRA ${name}` +
-        '/v${nextRelease.version}\n\n${nextRelease.notes}',
-    }],
-  ],
-  branches: [
-    'staging',
-    {
-      name: 'beta',
-      prerelease: true,
-    },
-    {
-      name: 'alpha',
-      prerelease: true,
-    },
-  ],
-};

package/tests/lib/rules/no-mixins.mjs

@@ -1,51 +0,0 @@
-import { testRule } from 'stylelint-test-rule-node';
-
-import plugin from '../../../lib/rules/no-mixins.js';
-
-const {
-  rule: { messages, ruleName },
-} = plugin;
-
-testRule({
-  plugins: [plugin],
-  ruleName,
-  config: true,
-  customSyntax: 'postcss-less',
-
-  accept: [
-    {
-      code: '.a { color: red; }',
-      description: 'simple class definition with no LESS mixin',
-    },
-  ],
-
-  reject: [
-    {
-      code: `.a {
-        .aMixin();
-      }`,
-      description: 'simple class definition containing a LESS mixin',
-      message: messages.noMixinsRejected('aMixin'),
-    },
-    {
-      code: `.a {
-        .aMixin;
-      }`,
-      description: 'simple class definition containing the older syntax for LESS mixins',
-      message: messages.noMixinsRejected('aMixin'),
-    },
-    {
-      code: `.a {
-        color: red;
-        .aMixin;
-        vertical-align: middle;
-        .otherMixin();
-      }`,
-      description: 'multiple mixins in a class definition',
-      warnings: [
-        { message: messages.noMixinsRejected('aMixin') },
-        { message: messages.noMixinsRejected('otherMixin') },
-      ],
-    },
-  ],
-});