@dialpad/stylelint-plugin-dialtone 1.0.1 → 1.1.0

package/lib/index.js

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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/stylelint-plugin-dialtone",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "dialtone stylelint plugin",
   "keywords": [
     "Dialpad",
@@ -39,6 +39,9 @@
   },
   "license": "MIT",
   "main": "./lib/index.js",
+  "files": [
+    "lib"
+  ],
   "exports": "./lib/index.js",
   "devDependencies": {
     "stylelint": "15.11.0",

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.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,13 +0,0 @@
-## [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): ${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') },
-      ],
-    },
-  ],
-});