[BOOKINGSG-9317][GZ] include linaria css in stylelint

.prettierrc

@@ -1,16 +1,22 @@
 {
-	"trailingComma": "es5",
-	"tabWidth": 4,
-	"semi": true,
-	"singleQuote": false,
-	"bracketSpacing": true,
-	"arrowParens": "always",
-	"overrides": [
-		{
-			"files": ".github/**/*.yml",
-			"options": {
-				"tabWidth": 2
-			}
-		}
-	]
-}
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": false,
+    "bracketSpacing": true,
+    "arrowParens": "always",
+    "overrides": [
+        {
+            "files": "**/*.styles.ts",
+            "options": {
+                "printWidth": 120
+            }
+        },
+        {
+            "files": ".github/**/*.yml",
+            "options": {
+                "tabWidth": 2
+            }
+        }
+    ]
+}

.stylelintignore

@@ -1,3 +1,4 @@
 node_modules
 dist
-*/coverage/lcov-report
+*/coverage/lcov-report
+playwright-report

.vscode/settings.json

@@ -16,7 +16,15 @@
         "typescript",
         "typescriptreact"
     ],
-    "stylelint.validate": ["css", "postcss", "scss", "less"],
+    "stylelint.validate": [
+        "css",
+        "postcss",
+        "scss",
+        "less",
+        "typescript",
+        "typescriptreact"
+    ],
+    "stylelint.configFile": "${workspaceFolder}/stylelint.config.mjs",
     "auto-close-tag.activationOnLanguage": [
         "html",
         "javascriptreact",

e2e/nextjs-app/eslint.config.mjs

@@ -1,7 +1,7 @@
 import { defineConfig, globalIgnores } from "eslint/config";
 import nextVitals from "eslint-config-next/core-web-vitals";
 import nextTs from "eslint-config-next/typescript";
-import localRules from "../../eslint-local-rules/import-path-preferences.mjs";
+import localRules from "../../eslint-local-rules/index.mjs";
 
 const eslintConfig = defineConfig([
     ...nextVitals,

eslint-local-rules/import-path-preferences.mjs → eslint-local-rules/import-path-preferences.rule.mjs

@@ -13,7 +13,6 @@ const RELATIVE_STORYBOOK_COMMON_PATTERN =
 const SRC_IN_STORIES_OR_TESTS_PATTERN = /^(?:\.\.\/)+src(?:\/|$)/;
 const STORYBOOK_COMMON_IN_STORIES_PATTERN =
     /^(?:(?:\.\.\/)+|\.\/)storybook-common(?:\/|$)/;
-const SAME_DIR_STYLE_MODULE_IMPORT_PATTERN = /^\.\/[^/]+\.styles$/;
 
 function normalizePath(filePath) {
     return filePath.replaceAll("\\", "/");
@@ -40,20 +39,6 @@ function getQuote(rawSource) {
     return quote === "'" || quote === '"' ? quote : '"';
 }
 
-function getStyleNamespaceLocalName(node) {
-    const namespaceSpecifier = node.specifiers.find(
-        (specifier) => specifier.type === "ImportNamespaceSpecifier"
-    );
-    if (namespaceSpecifier) return namespaceSpecifier.local.name;
-
-    const defaultSpecifier = node.specifiers.find(
-        (specifier) => specifier.type === "ImportDefaultSpecifier"
-    );
-    if (defaultSpecifier) return defaultSpecifier.local.name;
-
-    return "styles";
-}
-
 function toKebabCase(value) {
     return value
         .replaceAll(/([a-z0-9])([A-Z])/g, "$1-$2")
@@ -201,7 +186,7 @@ function getMessageId(zone, importSource) {
     return null;
 }
 
-const importPathPreferencesRule = {
+export const importPathPreferencesRule = {
     meta: {
         type: "suggestion",
         docs: {
@@ -259,64 +244,3 @@ const importPathPreferencesRule = {
         };
     },
 };
-
-const styleNamespaceImportRule = {
-    meta: {
-        type: "suggestion",
-        docs: {
-            description:
-                "Enforce namespace imports for style modules (*.styles).",
-        },
-        fixable: "code",
-        schema: [],
-        messages: {
-            namespaceStyleImport:
-                "Import style modules using a namespace import (e.g. import * as styles from './component.styles').",
-        },
-    },
-    create(context) {
-        return {
-            ImportDeclaration(node) {
-                if (!node?.source || typeof node.source.value !== "string") {
-                    return;
-                }
-
-                const importSource = node.source.value;
-                if (!SAME_DIR_STYLE_MODULE_IMPORT_PATTERN.test(importSource)) {
-                    return;
-                }
-
-                // Type-only imports are ignored to avoid rewriting TS type flows.
-                if (node.importKind === "type") return;
-
-                // Side-effect imports are allowed (no bindings to enforce).
-                if (!node.specifiers.length) return;
-
-                const hasOnlyNamespaceSpecifiers = node.specifiers.every(
-                    (specifier) => specifier.type === "ImportNamespaceSpecifier"
-                );
-                if (hasOnlyNamespaceSpecifiers) return;
-
-                context.report({
-                    node,
-                    messageId: "namespaceStyleImport",
-                    // TODO: Autofix is disabled until linaria migration is complete.
-
-                    // fix(fixer) {
-                    //     const quote = getQuote(node.source.raw);
-                    //     const localName = getStyleNamespaceLocalName(node);
-                    //     const fixedImport = `import * as ${localName} from ${quote}${importSource}${quote};`;
-                    //     return fixer.replaceText(node, fixedImport);
-                    // },
-                });
-            },
-        };
-    },
-};
-
-export default {
-    rules: {
-        "import-path-preferences": importPathPreferencesRule,
-        "style-namespace-import": styleNamespaceImportRule,
-    },
-};

eslint-local-rules/index.mjs

@@ -0,0 +1,11 @@
+import { importPathPreferencesRule } from "./import-path-preferences.rule.mjs";
+import { noNegativeLinariaInterpolationRule } from "./no-negative-linaria-interpolation.rule.mjs";
+import { styleNamespaceImportRule } from "./style-namespace-import.rule.mjs";
+
+export default {
+    rules: {
+        "import-path-preferences": importPathPreferencesRule,
+        "style-namespace-import": styleNamespaceImportRule,
+        "no-negative-linaria-interpolation": noNegativeLinariaInterpolationRule,
+    },
+};

eslint-local-rules/no-negative-linaria-interpolation.rule.mjs

@@ -0,0 +1,81 @@
+export const noNegativeLinariaInterpolationRule = {
+    meta: {
+        type: "problem",
+        docs: {
+            description:
+                "Disallow negative Linaria interpolations like -${token} in css templates.",
+        },
+        fixable: "code",
+        schema: [],
+        messages: {
+            negativeLinariaInterpolation:
+                "Avoid -${...} in Linaria css templates. Use calc(${...} * -1) instead.",
+        },
+    },
+    create(context) {
+        return {
+            TaggedTemplateExpression(node) {
+                // Only lint Linaria `css` tagged template literals.
+                if (
+                    node.tag.type !== "Identifier" ||
+                    node.tag.name !== "css" ||
+                    node.quasi.type !== "TemplateLiteral"
+                ) {
+                    return;
+                }
+
+                const template = node.quasi;
+                for (let i = 0; i < template.expressions.length; i += 1) {
+                    const beforeExpression = template.quasis[i]?.value?.raw;
+                    if (!beforeExpression) continue;
+
+                    // Detect patterns like `...: -${token};` where unary minus is
+                    // applied before interpolation and compiles to invalid CSS values.
+                    const negativePrefixMatch = beforeExpression.match(/-\s*$/);
+                    if (negativePrefixMatch) {
+                        const beforeMinus = beforeExpression.slice(
+                            0,
+                            beforeExpression.length -
+                                negativePrefixMatch[0].length
+                        );
+                        const previousNonWhitespace =
+                            beforeMinus.match(/\S\s*$/)?.[0]?.trim() || "";
+
+                        // Only flag unary negatives like `: -${x}` or `(-${x}`.
+                        // Skip binary subtraction contexts like `100% - ${x}`.
+                        if (
+                            previousNonWhitespace &&
+                            ![":", "(", ","].includes(previousNonWhitespace)
+                        ) {
+                            continue;
+                        }
+
+                        context.report({
+                            node: template.expressions[i],
+                            messageId: "negativeLinariaInterpolation",
+                            fix(fixer) {
+                                const expression = template.expressions[i];
+                                const negativePrefixLength =
+                                    negativePrefixMatch[0].length;
+                                // Replace from the trailing `-${` prefix to the closing `}`
+                                // of the interpolation with `calc(${expr} * -1)`.
+                                const replacementStart =
+                                    expression.range[0] -
+                                    negativePrefixLength -
+                                    2;
+                                const replacementEnd = expression.range[1] + 1;
+                                const expressionText =
+                                    context.sourceCode.getText(expression);
+
+                                return fixer.replaceTextRange(
+                                    [replacementStart, replacementEnd],
+                                    `calc($\{${expressionText}} * -1)`
+                                );
+                            },
+                        });
+                    }
+                }
+            },
+        };
+    },
+};

eslint-local-rules/style-namespace-import.rule.mjs

@@ -0,0 +1,55 @@
+const SAME_DIR_STYLE_MODULE_IMPORT_PATTERN = /^\.\/[^/]+\.styles$/;
+
+export const styleNamespaceImportRule = {
+    meta: {
+        type: "suggestion",
+        docs: {
+            description:
+                "Enforce namespace imports for style modules (*.styles).",
+        },
+        fixable: "code",
+        schema: [],
+        messages: {
+            namespaceStyleImport:
+                "Import style modules using a namespace import (e.g. import * as styles from './component.styles').",
+        },
+    },
+    create(context) {
+        return {
+            ImportDeclaration(node) {
+                if (!node?.source || typeof node.source.value !== "string") {
+                    return;
+                }
+
+                const importSource = node.source.value;
+                if (!SAME_DIR_STYLE_MODULE_IMPORT_PATTERN.test(importSource)) {
+                    return;
+                }
+
+                // Type-only imports are ignored to avoid rewriting TS type flows.
+                if (node.importKind === "type") return;
+
+                // Side-effect imports are allowed (no bindings to enforce).
+                if (!node.specifiers.length) return;
+
+                const hasOnlyNamespaceSpecifiers = node.specifiers.every(
+                    (specifier) => specifier.type === "ImportNamespaceSpecifier"
+                );
+                if (hasOnlyNamespaceSpecifiers) return;
+
+                context.report({
+                    node,
+                    messageId: "namespaceStyleImport",
+                    // TODO: Autofix is disabled until linaria migration is complete.
+
+                    // fix(fixer) {
+                    //     const quote = getQuote(node.source.raw);
+                    //     const localName = getStyleNamespaceLocalName(node);
+                    //     const fixedImport = `import * as ${localName} from ${quote}${importSource}${quote};`;
+                    //     return fixer.replaceText(node, fixedImport);
+                    // },
+                });
+            },
+        };
+    },
+};

eslint.config.mjs

@@ -10,7 +10,7 @@ import pluginSimpleImportSort from "eslint-plugin-simple-import-sort";
 import storybook from "eslint-plugin-storybook";
 import globals from "globals";
 
-import localRules from "./eslint-local-rules/import-path-preferences.mjs";
+import localRules from "./eslint-local-rules/index.mjs";
 
 const sourceFileGlobs = ["**/*.{js,jsx,mjs,cjs,ts,tsx}"];
 const reactSourceFileGlobs = ["**/*.{js,jsx,ts,tsx}"];
@@ -176,6 +176,7 @@ export default defineConfig([
         rules: {
             "local/import-path-preferences": "warn",
             "local/style-namespace-import": "warn",
+            "local/no-negative-linaria-interpolation": "error",
             "react-hooks/exhaustive-deps": [
                 "warn",
                 {