stylelint-plugin-gestalt 151.2.4

package/README.md

@@ -0,0 +1,3 @@
+# stylelint-plugin-gestalt
+
+THIS PACKAGE IS NOT READY FOR CONSUMTION

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "stylelint-plugin-gestalt",
+  "version": "151.2.4",
+  "license": "Apache-2.0",
+  "homepage": "https://gestalt.pinterest.systems/",
+  "description": "THIS PACKAGE IS NOT READY FOR CONSUMTION StyleLint rules for Pinterest's design language Gestalt",
+  "keywords": [
+    "stylelint",
+    "stylelint plugin",
+    "gestalt",
+    "pinterest"
+  ]
+}

package/src/__fixtures__/no-invalid-design-tokens/invalid-color.css

@@ -0,0 +1,3 @@
+.button {
+  border-color: var(--color-gray-roboflow-420);
+}

package/src/__fixtures__/no-invalid-design-tokens/invalid-composed-color.css

@@ -0,0 +1,5 @@
+.button {
+  &::before {
+    box-shadow: 0 0 0 4px var(--color-gray-roboflow-420);
+  }
+}

package/src/__fixtures__/no-invalid-design-tokens/invalid-rounding.css

@@ -0,0 +1,3 @@
+.button {
+  border-radius: var(--rounding-140);
+}

package/src/__fixtures__/no-invalid-design-tokens/valid-color.css

@@ -0,0 +1,3 @@
+.button {
+  border-color: var(--color-gray-roboflow-400);
+}

package/src/__fixtures__/no-invalid-design-tokens/valid-composed-color.css

@@ -0,0 +1,5 @@
+.button {
+  &::before {
+    box-shadow: 0 0 0 4px var(--color-gray-roboflow-400);
+  }
+}

package/src/__fixtures__/no-invalid-design-tokens/valid-non-gestalt.css

@@ -0,0 +1,3 @@
+.button {
+  border-color: var(--button-color);
+}

package/src/__fixtures__/no-invalid-design-tokens/valid-rounding.css

@@ -0,0 +1,3 @@
+.button {
+  border-radius: var(--rounding-100);
+}

package/src/helpers/testHelpers.js

@@ -0,0 +1,8 @@
+import path from 'path';
+
+export const getPathFormatterByRuleName = (ruleName) => (testPath) =>
+  `./__fixtures__/${ruleName}/${testPath}.css`;
+
+export function getTestByPath(codePath) {
+  return path.resolve(__dirname, '..', codePath);
+}

package/src/index.js

@@ -0,0 +1,15 @@
+/* eslint-disable import/no-import-module-exports */
+import noInvalidDesignTokens from './no-invalid-design-tokens';
+
+module.exports = {
+  rules: {
+    'stylelint-gestalt-plugin/no-foo': true,
+  },
+};
+
+module.exports = {
+  rules: {
+    'no-invalid-design-tokens': noInvalidDesignTokens,
+  },
+};
+/* eslint-enable import/no-import-module-exports */

package/src/no-invalid-design-tokens.js

@@ -0,0 +1,53 @@
+const tokens = require('gestalt-design-tokens/dist/js/classic/constants');
+const stylelint = require('stylelint');
+
+const {
+  createPlugin,
+  utils: { report, ruleMessages, validateOptions },
+} = stylelint;
+
+const ruleName = 'stylelint-gestalt-plugin/no-invalid-design-tokens';
+
+const messages = ruleMessages(ruleName, {
+  rejected: (tokenName) => `This design token is invalid: ${tokenName}`,
+});
+
+const meta = {
+  url: 'https://gestalt.pinterest.systems/get_started/developers/eslint_plugin',
+};
+
+const ruleFunction = (primary) => (root, result) => {
+  const validOptions = validateOptions(result, ruleName, {
+    actual: primary,
+    possible: [true],
+  });
+
+  const tokensValues = Object.entries(tokens);
+
+  if (!validOptions) return; // If the options are invalid, don't lint
+
+  root.walkDecls((ruleNode) => {
+    const regex = /(var\(--(color|rounding|font|opacity|elevation|spacing)-[a-zA-Z0-9-]+?\))/;
+
+    const match = ruleNode.value.match(regex);
+
+    if (!match) return;
+
+    const isValidGestaltToken = tokensValues.some(([, value]) => match[0] === value);
+
+    if (isValidGestaltToken) return;
+
+    report({
+      result,
+      ruleName,
+      message: messages.rejected(match[0]),
+      node: ruleNode,
+    });
+  });
+};
+
+module.exports.ruleName = ruleName;
+module.exports.messages = messages;
+module.exports.meta = meta;
+
+module.exports = createPlugin(ruleName, ruleFunction);

package/src/no-invalid-design-tokens.test.js

@@ -0,0 +1,157 @@
+import stylelint from 'stylelint';
+import { getPathFormatterByRuleName, getTestByPath } from './helpers/testHelpers';
+import rule from './no-invalid-design-tokens';
+
+const fileName = 'no-invalid-design-tokens';
+const pathFormatter = getPathFormatterByRuleName(fileName);
+
+const validNonGestalt = getTestByPath(pathFormatter('valid-non-gestalt'));
+const validCodeColor = getTestByPath(pathFormatter('valid-color'));
+const validCodeComposedColor = getTestByPath(pathFormatter('valid-composed-color'));
+const validCodeRounding = getTestByPath(pathFormatter('valid-rounding'));
+const invalidCodeColor = getTestByPath(pathFormatter('invalid-color'));
+const invalidCodeComposedColor = getTestByPath(pathFormatter('invalid-composed-color'));
+
+const invalidCodeRounding = getTestByPath(pathFormatter('invalid-rounding'));
+
+const { lint } = stylelint;
+
+it('valid non-Gestalt token', async () => {
+  const {
+    results: [{ warnings, parseErrors }],
+  } = await lint({
+    files: [validNonGestalt],
+    config: {
+      plugins: rule,
+      rules: {
+        'stylelint-gestalt-plugin/no-invalid-design-tokens': true,
+      },
+    },
+  });
+
+  expect(parseErrors).toHaveLength(0);
+  expect(warnings).toHaveLength(0);
+});
+
+it('valid color', async () => {
+  const {
+    results: [{ warnings, parseErrors }],
+  } = await lint({
+    files: [validCodeColor],
+    config: {
+      plugins: rule,
+      rules: {
+        'stylelint-gestalt-plugin/no-invalid-design-tokens': true,
+      },
+    },
+  });
+
+  expect(parseErrors).toHaveLength(0);
+  expect(warnings).toHaveLength(0);
+});
+
+it('valid composed color', async () => {
+  const {
+    results: [{ warnings, parseErrors }],
+  } = await lint({
+    files: [validCodeComposedColor],
+    config: {
+      plugins: rule,
+      rules: {
+        'stylelint-gestalt-plugin/no-invalid-design-tokens': true,
+      },
+    },
+  });
+
+  expect(parseErrors).toHaveLength(0);
+  expect(warnings).toHaveLength(0);
+});
+
+it('valid rounding', async () => {
+  const {
+    results: [{ warnings, parseErrors }],
+  } = await lint({
+    files: [validCodeRounding],
+    config: {
+      plugins: rule,
+      rules: {
+        'stylelint-gestalt-plugin/no-invalid-design-tokens': true,
+      },
+    },
+  });
+
+  expect(parseErrors).toHaveLength(0);
+  expect(warnings).toHaveLength(0);
+});
+
+it('invalid color', async () => {
+  const {
+    results: [{ warnings, parseErrors }],
+  } = await lint({
+    files: [invalidCodeColor],
+    config: {
+      plugins: rule,
+      rules: {
+        'stylelint-gestalt-plugin/no-invalid-design-tokens': true,
+      },
+    },
+  });
+
+  const [{ text, line }] = warnings;
+
+  expect(parseErrors).toHaveLength(0);
+  expect(warnings).toHaveLength(1);
+
+  expect(text).toBe(
+    'This design token is invalid: var(--color-gray-roboflow-420) (stylelint-gestalt-plugin/no-invalid-design-tokens)',
+  );
+  expect(line).toBe(2);
+});
+
+it('invalid composed color', async () => {
+  const {
+    results: [{ warnings, parseErrors }],
+  } = await lint({
+    files: [invalidCodeComposedColor],
+    config: {
+      plugins: rule,
+      rules: {
+        'stylelint-gestalt-plugin/no-invalid-design-tokens': true,
+      },
+    },
+  });
+
+  const [{ text, line }] = warnings;
+
+  expect(parseErrors).toHaveLength(0);
+  expect(warnings).toHaveLength(1);
+
+  expect(text).toBe(
+    'This design token is invalid: var(--color-gray-roboflow-420) (stylelint-gestalt-plugin/no-invalid-design-tokens)',
+  );
+  expect(line).toBe(3);
+});
+
+it('invalid rounding', async () => {
+  const {
+    results: [{ warnings, parseErrors }],
+  } = await lint({
+    files: [invalidCodeRounding],
+    config: {
+      plugins: rule,
+      rules: {
+        'stylelint-gestalt-plugin/no-invalid-design-tokens': true,
+      },
+    },
+  });
+
+  const [{ text, line }] = warnings;
+
+  expect(parseErrors).toHaveLength(0);
+  expect(warnings).toHaveLength(1);
+
+  expect(text).toBe(
+    'This design token is invalid: var(--rounding-140) (stylelint-gestalt-plugin/no-invalid-design-tokens)',
+  );
+  expect(line).toBe(2);
+});