@fluid-topics/ft-eslint 1.3.15 → 1.3.17

package/build/plugin.d.ts

@@ -8,6 +8,8 @@ declare const plugin: {
         "typography-variant": import("eslint").Rule.RuleModule;
         "interface-no-commas": import("eslint").Rule.RuleModule;
         "number-property": import("eslint").Rule.RuleModule;
+        "lower-case-ft-css-variables": import("eslint").Rule.RuleModule;
+        "ft-css-variable-names": import("eslint").Rule.RuleModule;
     };
     configs: {
         recommended: {};

package/build/plugin.js

@@ -2,6 +2,8 @@ import { quotedAttributesRule } from "./rules/quoted-attributes";
 import { typographyVariantRule } from "./rules/typography-variant";
 import { interfaceNoCommaRule } from "./rules/interface-no-commas";
 import { numberPropertyRule } from "./rules/number-property";
+import { lowerCaseFtCssVariables } from "./rules/lower-case-ft-css-variables";
+import { ftCssVariableNames } from "./rules/ft-css-variable-names";
 const plugin = {
     meta: {
         name: "eslint-plugin-fluid-topics",
@@ -12,6 +14,8 @@ const plugin = {
         "typography-variant": typographyVariantRule,
         "interface-no-commas": interfaceNoCommaRule,
         "number-property": numberPropertyRule,
+        "lower-case-ft-css-variables": lowerCaseFtCssVariables,
+        "ft-css-variable-names": ftCssVariableNames,
     },
     configs: {
         recommended: {},
@@ -27,6 +31,8 @@ const flatConfigs = {
             "ft/typography-variant": "warn",
             "ft/interface-no-commas": "error",
             "ft/number-property": "error",
+            "ft/lower-case-ft-css-variables": "error",
+            "ft/ft-css-variable-names": "error",
         },
     },
 };

package/build/rules/ft-css-variable-names.d.ts

@@ -0,0 +1,2 @@
+import { Rule } from "eslint";
+export declare const ftCssVariableNames: Rule.RuleModule;

package/build/rules/ft-css-variable-names.js

@@ -0,0 +1,50 @@
+export const ftCssVariableNames = {
+    meta: {
+        docs: {
+            description: "Prevents the usage of --ft- CSS variables names directly.",
+            recommended: false,
+        },
+        schema: [],
+        messages: {
+            useTypescriptModelsOfVariables: "FT CSS variables must use the typescript models of variables instead of the CSS variables names directly.\n\n"
+                + "css`${ FtButtonCssVariables.color.set(`blue`) };` instead of css`--ft-button-color: blue;`\n"
+                + "css`padding: ${ FtCardCssVariables.padding };` instead of css`padding: var(--ft-card-padding);`",
+        },
+    },
+    create({ report, sourceCode }) {
+        const ftCssVarPattern = /--ft-[a-z0-9-]+/g;
+        function reportFtCssVariableNames(rawValue, sourceLocation, offset) {
+            const ftCssVarMatch = rawValue.matchAll(ftCssVarPattern);
+            for (const match of ftCssVarMatch) {
+                const cssVar = match[0];
+                const quasiIndex = sourceCode.getIndexFromLoc(sourceLocation.start);
+                const start = quasiIndex + match.index + offset;
+                const end = quasiIndex + match.index + cssVar.length + offset;
+                report({
+                    messageId: "useTypescriptModelsOfVariables",
+                    loc: {
+                        start: sourceCode.getLocFromIndex(start),
+                        end: sourceCode.getLocFromIndex(end),
+                    },
+                });
+            }
+        }
+        return {
+            TemplateLiteral: (node) => {
+                for (const quasi of node.quasis) {
+                    reportFtCssVariableNames(quasi.value.raw, quasi.loc, 1);
+                }
+            },
+            TaggedTemplateExpression: (node) => {
+                if (node.type !== "TaggedTemplateExpression"
+                    || node.tag.type !== "Identifier"
+                    || (node.tag.name !== "css" && node.tag.name !== "html")) {
+                    return;
+                }
+                for (const quasi of node.quasi.quasis) {
+                    reportFtCssVariableNames(quasi.value.raw, quasi.loc, 1);
+                }
+            },
+        };
+    },
+};

package/build/rules/lower-case-ft-css-variables.d.ts

@@ -0,0 +1,2 @@
+import { Rule } from "eslint";
+export declare const lowerCaseFtCssVariables: Rule.RuleModule;

package/build/rules/lower-case-ft-css-variables.js

@@ -0,0 +1,58 @@
+export const lowerCaseFtCssVariables = {
+    meta: {
+        docs: {
+            description: "Enforces the format of --ft- CSS variables to lower case.",
+            recommended: false,
+        },
+        fixable: "code",
+        schema: [],
+        messages: {
+            upperCaseCssVariable: "FT CSS variables must be lower case.",
+        },
+    },
+    create({ report, sourceCode }) {
+        const ftCssVarPattern = /--ft-[a-zA-Z0-9-]+/g;
+        function reportUpperCaseCssVariables(rawValue, sourceLocation, offset) {
+            const ftCssVarMatch = rawValue.matchAll(ftCssVarPattern);
+            for (const match of ftCssVarMatch) {
+                const cssVar = match[0];
+                if (cssVar.match(/[A-Z]/)) {
+                    const quasiIndex = sourceCode.getIndexFromLoc(sourceLocation.start);
+                    const start = quasiIndex + match.index + offset;
+                    const end = quasiIndex + match.index + cssVar.length + offset;
+                    report({
+                        messageId: "upperCaseCssVariable",
+                        loc: {
+                            start: sourceCode.getLocFromIndex(start),
+                            end: sourceCode.getLocFromIndex(end),
+                        },
+                        fix: (fixer) => [
+                            fixer.replaceTextRange([start, end], cssVar.toLowerCase()),
+                        ],
+                    });
+                }
+            }
+        }
+        return {
+            TemplateLiteral: (node) => {
+                for (const quasi of node.quasis) {
+                    reportUpperCaseCssVariables(quasi.value.raw, quasi.loc, 1);
+                }
+            },
+            TaggedTemplateExpression: (node) => {
+                if (node.type !== "TaggedTemplateExpression"
+                    || node.tag.type !== "Identifier"
+                    || (node.tag.name !== "css" && node.tag.name !== "html")) {
+                    return;
+                }
+                for (const quasi of node.quasi.quasis) {
+                    reportUpperCaseCssVariables(quasi.value.raw, quasi.loc, 1);
+                }
+            },
+            Literal: (node) => {
+                var _a;
+                reportUpperCaseCssVariables((_a = node.raw) !== null && _a !== void 0 ? _a : "", node.loc, 0);
+            },
+        };
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-eslint",
-    "version": "1.3.15",
+    "version": "1.3.17",
     "description": "ESlint rules for web components",
     "keywords": [
         "Lit"
@@ -21,5 +21,5 @@
     "dependencies": {
         "lit": "3.1.0"
     },
-    "gitHead": "5aa2861244264a93f9ce941c3541191eb22a4650"
+    "gitHead": "ca55c7b44d386d960ceb68323361ce0ab3aefaa8"
 }