@hs-web-team/eslint-config-node 3.1.2 → 3.2.0-next.0

package/.stylelintrc.json

@@ -0,0 +1,40 @@
+{
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "length-zero-no-unit": null,
+    "declaration-empty-line-before": null,
+    "no-empty-source": null,
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": ["function", "if", "else", "for", "each", "include", "mixin", "extend"]
+      }
+    ],
+    "scss/dollar-variable-pattern": null,
+    "scss/at-import-no-partial-leading-underscore": null,
+    "selector-class-pattern": null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "scss/at-import-partial-extension": null,
+    "alpha-value-notation": null,
+    "scss/percent-placeholder-pattern": null,
+    "scss/at-mixin-argumentless-call-parentheses": null,
+    "color-function-notation": null,
+    "scss/dollar-variable-empty-line-before": null,
+    "shorthand-property-no-redundant-values": null,
+    "no-duplicate-selectors": null,
+    "scss/double-slash-comment-whitespace-inside": null,
+    "font-family-name-quotes": null,
+    "media-feature-range-notation": [
+      "context",
+      {
+        "severity": "warning"
+      }
+    ],
+    "value-keyword-case": [
+      "lower",
+      {
+        "camelCaseSvgKeywords": true
+      }
+    ]
+  }
+}

package/CLAUDE.md

@@ -4,7 +4,11 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Overview
 
-This is an ESLint configuration package (`@hs-web-team/eslint-config-node`) for HubSpot Marketing WebTeam projects. It provides shared ESLint rules and Prettier configuration for both backend Node.js projects and browser/React applications.
+This is a configuration package (`@hs-web-team/eslint-config-node`) for HubSpot Marketing WebTeam projects. It provides shared configurations for:
+- **ESLint** rules for Node.js and browser/React projects
+- **Prettier** formatting configuration
+- **Stylelint** rules for SCSS/CSS linting
+- **Cypress** E2E testing configuration
 
 ## Key Commands
 
@@ -66,12 +70,48 @@ When testing changes to this package in downstream projects, you'll typically:
   - Arrow parens: avoid, LF line endings, single attribute per line
   - Override for YAML files: uses double quotes instead of single
 
+### Stylelint Configuration
+- **`.stylelintrc.json`**: Shared Stylelint configuration for SCSS/CSS linting
+  - Extends `stylelint-config-standard-scss` for standard SCSS linting rules
+  - Customized rules for HubSpot projects:
+    - Disables strict class name patterns and variable naming patterns
+    - Allows zero units (e.g., `0px`), redundant longhand properties, and duplicate selectors
+    - Configures SCSS-specific rules to ignore common directives (`@function`, `@if`, `@mixin`, etc.)
+    - Enforces lowercase keywords with camelCase for SVG keywords
+    - Sets media feature range notation to "context" with warning severity
+  - Consuming projects extend this via `.stylelintrc.json`: `{ "extends": "@hs-web-team/eslint-config-node/.stylelintrc.json" }`
+  - Documentation: `examples/stylelint-usage.md`
+
+### Cypress Configuration
+- **`cypress.config.js`**: Shared Cypress configuration for E2E testing
+  - Uses CommonJS (`require`) syntax
+  - Core settings:
+    - Disables Chrome web security for cross-origin testing
+    - Timeouts: 20s default command, page load, and response timeouts
+    - Viewport: 1920x1080
+    - Retries: 1 retry in run mode, 0 in open mode
+    - Screenshots on failure enabled, video disabled by default
+  - Uses **esbuild** preprocessor for fast bundling (much faster than webpack)
+  - Includes Cucumber preprocessor setup with native esbuild support
+  - Native TypeScript support via esbuild (no additional loader needed)
+  - Spec pattern: `cypress/e2e/*.cy.js`
+  - Exported utilities:
+    - `config`: Main Cypress configuration object
+    - `envs`: Environment constants (DEV, QA, PROD)
+    - `getDevBaseUrl()`: Reads baseUrl from `hubspot.config.yml` DEV portal
+    - `getBaseUrls()`: Reads URLs from `.ci/config.yml` for multiple environments
+  - HubSpot-specific: Designed to work with HubSpot CMS projects using `hubspot.config.yml`
+  - Documentation: `examples/cypress-usage.md`
+
 ### Package Details
 - **Type**: ESM module (`"type": "module"`)
 - **Node requirement**: >= 22
 - **Exports**:
-  - Main export (`.`): `index.js` - Node.js configuration
-  - Browser export (`./browser`): `browser.js` - Browser/React configuration
+  - Main export (`.`): `index.js` - Node.js ESLint configuration
+  - Browser export (`./browser`): `browser.js` - Browser/React ESLint configuration
+  - Prettier export (`./.prettierrc.json`): `.prettierrc.json` - Prettier configuration
+  - Stylelint export (`./.stylelintrc.json`): `.stylelintrc.json` - Stylelint configuration
+  - Cypress export (`./cypress.config`): `cypress.config.js` - Cypress configuration
 - **Binary command**: `add-prettier` maps to `bin/add-prettier-scripts.js`
 
 ### Migration Context
@@ -81,12 +121,24 @@ This package is currently on v3, which uses ESLint 9's flat config format. The p
 
 ## Important Notes
 
-- This package supports both **backend Node.js projects** (default export) and **browser/React projects** (`/browser` export)
-- The configuration uses ESLint 9's flat config format (not the legacy `.eslintrc` format)
-- Downstream projects extend this config in their `eslint.config.js` by spreading the imported config:
-  - Node.js: `...wtConfig`
-  - Browser: `...wtBrowserConfig`
-- Mixed module systems: `bin/add-prettier-scripts.js` uses CommonJS (`require`) while the main package is ESM
+- This package supports multiple use cases:
+  - **ESLint**: Backend Node.js projects (default export) and browser/React projects (`/browser` export)
+  - **Prettier**: Code formatting (`./.prettierrc.json` export)
+  - **Stylelint**: SCSS/CSS linting (`./.stylelintrc.json` export)
+  - **Cypress**: E2E testing (`./cypress.config` export)
+- ESLint configuration uses ESLint 9's flat config format (not the legacy `.eslintrc` format)
+- Downstream projects extend configs:
+  - ESLint (Node.js): `...wtConfig` in `eslint.config.js`
+  - ESLint (Browser): `...wtBrowserConfig` in `eslint.config.js`
+  - Prettier: Import via `.prettierrc.js` using `require('@hs-web-team/eslint-config-node/.prettierrc.json')`
+  - Stylelint: Extend in `.stylelintrc.json` with `"extends": "@hs-web-team/eslint-config-node/.stylelintrc.json"`
+  - Cypress: Import and spread in `cypress.config.js`
+- Mixed module systems:
+  - Main package is ESM (`index.js`, `browser.js`)
+  - Utility scripts use CommonJS (`bin/add-prettier-scripts.js`, `cypress.config.js`)
 - CI runs on Node 22 and 24 (see `.github/workflows/pr.yml`)
 - No automated tests currently (`npm test` will fail with "Error: no test specified")
-- Detailed browser configuration documentation available in `examples/browser-usage.md`
+- Detailed documentation available in `examples/`:
+  - `browser-usage.md` - Browser/React ESLint configuration
+  - `stylelint-usage.md` - Stylelint configuration
+  - `cypress-usage.md` - Cypress E2E testing configuration

package/README.md

@@ -8,6 +8,8 @@ This package provides ESLint rules and configurations for **Hubspot Marketing We
 
 - [Node.js Setup](#nodejs-setup)
 - [Browser/React Setup](#browserreact-setup)
+- [Stylelint Setup](#stylelint-setup)
+- [Cypress Setup](#cypress-setup)
 - [Where to use it](#where-to-use-it)
 - [Using the Prettier Scripts](#using-the-prettier-scripts)
 <!-- index-end -->
@@ -78,14 +80,90 @@ This package provides ESLint rules and configurations for **Hubspot Marketing We
 
 For detailed browser configuration documentation and migration guides, see [examples/browser-usage.md](./examples/browser-usage.md).
 
+## Stylelint Setup
+
+This package provides shared Stylelint configuration for SCSS/CSS linting.
+
+1. Install dependencies
+
+    ```sh
+    npm i -D stylelint stylelint-config-standard-scss
+    ```
+
+2. Create `.stylelintrc.json` in project root
+
+    ```json
+    {
+      "extends": "@hs-web-team/eslint-config-node/.stylelintrc.json"
+    }
+    ```
+
+3. Add scripts to package.json
+
+    ```json
+    {
+      "scripts": {
+        "stylelint:check": "stylelint '**/*.{css,scss}'",
+        "stylelint:fix": "stylelint '**/*.{css,scss}' --fix"
+      }
+    }
+    ```
+
+For detailed Stylelint configuration documentation, see [examples/stylelint-usage.md](./examples/stylelint-usage.md).
+
+## Cypress Setup
+
+This package provides shared Cypress configuration for E2E testing.
+
+1. Install dependencies
+
+    ```sh
+    npm i -D cypress @badeball/cypress-cucumber-preprocessor esbuild js-yaml
+    ```
+
+2. Create `cypress.config.js` in project root
+
+    ```javascript
+    const { defineConfig } = require('cypress');
+    const { config, envs, getBaseUrls } = require('@hs-web-team/eslint-config-node/cypress.config');
+
+    module.exports = defineConfig({
+      ...config,
+      e2e: {
+        ...config.e2e,
+        baseUrl: 'http://localhost:3000',
+      },
+      env: {
+        ...envs,
+      },
+    });
+    ```
+
+3. Add scripts to package.json
+
+    ```json
+    {
+      "scripts": {
+        "cypress:open": "cypress open",
+        "cypress:run": "cypress run",
+        "test:e2e": "cypress run"
+      }
+    }
+    ```
+
+For detailed Cypress configuration documentation including HubSpot-specific features, see [examples/cypress-usage.md](./examples/cypress-usage.md).
+
 ## Where to use it
 
-This package provides two configurations:
+This package provides multiple configurations:
 
 - **Node.js configuration** (default export): For backend Node.js projects
 - **Browser configuration** (`/browser` export): For browser-based projects including React applications
+- **Stylelint configuration** (`.stylelintrc.json` export): For SCSS/CSS linting
+- **Cypress configuration** (`cypress.config` export): For E2E testing with Cypress
+- **Prettier configuration** (`.prettierrc.json` export): For code formatting
 
-Choose the appropriate configuration based on your project type.
+Choose the appropriate configurations based on your project needs.
 
 ## Using the Prettier Scripts
 
@@ -115,4 +193,4 @@ See [MIGRATION-V2.md](./docs/MIGRATION-V2.md)
 
 ## Migration from v2 to v3
 
-See [MIGRATION-V3.md](./docs/MIGRATION-V3.md)
+See [MIGRATION-V3.md](./docs/MIGRATION-V3.md)

package/cypress.config.js

@@ -0,0 +1,129 @@
+const yaml = require('js-yaml');
+const fs = require('fs');
+const path = require('path');
+const { addCucumberPreprocessorPlugin } = require('@badeball/cypress-cucumber-preprocessor');
+const { createEsbuildPlugin } = require('@badeball/cypress-cucumber-preprocessor/esbuild');
+
+const DEV = 'DEV';
+const QA = 'qa';
+const PROD = 'prod';
+const currentEnv = QA;
+
+const envs = {
+  currentEnv,
+  DEV,
+  QA,
+  PROD,
+};
+
+/**
+ * @description Recursively climbs up the filepath, until it finds what directory
+ * the directory where the hubspot.config.yml file is located.
+ *
+ * @param {string} currDir - the current working directory path to search from
+ * @returns {string} The absolute path of the project's root directory
+ */
+const getRootDir = currDir => {
+  if (fs.existsSync(path.join(currDir, 'hubspot.config.yml'))) return currDir;
+  const parentDir = path.dirname(currDir);
+  if (parentDir === currDir) {
+    throw new Error('Error: Could not find the hubspot.config.yml file within the projects directories.');
+  }
+  return getRootDir(parentDir);
+};
+
+/**
+ * @returns {string|null} The `baseUrl` set for the `DEV` portal in `hubspot.config.yml`
+ *   or `null` if this is not the dev environment or no such property exists.
+ */
+const getDevBaseUrl = () => {
+  try {
+    global.console.log(
+      'To test a dev URL, add the `baseUrl` property to your `DEV` portal configuration in `hubspot.config.yml`',
+    );
+
+    const root = getRootDir(__dirname);
+    const configPath = path.resolve(root, 'hubspot.config.yml');
+    const config = fs.readFileSync(configPath, 'utf8');
+    const { portals } = yaml.load(config);
+    const devPortal = portals.find(portal => portal.name === 'DEV');
+    const devBaseUrl = devPortal.baseUrl;
+    return devBaseUrl || null;
+  } catch (error) {
+    global.console.error(error);
+    return null;
+  }
+};
+
+/**
+ * @description Get the baseUrls for different environments from the ci config file for local test execution.
+ * @returns {object} baseUrls - The base urls object
+ */
+const getBaseUrls = () => {
+  let fileContents = '';
+  let ciConfig = {};
+  const baseUrls = {};
+  baseUrls[envs.DEV] = getDevBaseUrl();
+
+  const fileExist = fs.existsSync('.ci/config.yml');
+  if (fileExist) {
+    fileContents = fs.readFileSync('.ci/config.yml', 'utf8');
+    ciConfig = yaml.load(fileContents);
+    if (ciConfig.regression.e2eTestEnvironment && ciConfig.regression.e2eTestEnvironment.length > 0) {
+      try {
+        ciConfig.regression.e2eTestEnvironment.forEach(item => {
+          const envName = item.name;
+          baseUrls[envName] = item.url;
+        });
+      } catch (error) {
+        console.error('Error reading the base urls from the ci config file:', error);
+        return null;
+      }
+    }
+  }
+  return baseUrls || null;
+};
+
+async function setupNodeEvents(on, config) {
+  // This is required for the preprocessor to be able to generate JSON reports after each run
+  await addCucumberPreprocessorPlugin(on, config);
+
+  // Use esbuild for fast TypeScript and feature file processing
+  on(
+    'file:preprocessor',
+    createEsbuildPlugin(config),
+  );
+
+  return config;
+}
+
+const e2e = {
+  specPattern: 'cypress/e2e/*.cy.js',
+  setupNodeEvents,
+};
+
+const config = {
+  chromeWebSecurity: false,
+  defaultCommandTimeout: 20000,
+  e2e,
+  numTestsKeptInMemory: 0,
+  pageLoadTimeout: 20000,
+  port: 3500,
+  responseTimeout: 20000,
+  retries: {
+    runMode: 1,
+    openMode: 0,
+  },
+  screenshotOnRunFailure: true,
+  trashAssetsBeforeRuns: true,
+  video: false,
+  viewportHeight: 1080,
+  viewportWidth: 1920,
+};
+
+module.exports = {
+  config,
+  envs,
+  getDevBaseUrl,
+  getBaseUrls,
+};

package/examples/cypress-usage.md

@@ -0,0 +1,377 @@
+# Cypress Configuration Usage
+
+This package provides a shared Cypress configuration for E2E testing in HubSpot Marketing WebTeam projects.
+
+## Installation
+
+1. Install the package and Cypress dependencies:
+
+```bash
+npm install --save-dev @hs-web-team/eslint-config-node cypress @badeball/cypress-cucumber-preprocessor esbuild js-yaml
+```
+
+2. If using TypeScript:
+
+```bash
+npm install --save-dev typescript @types/node
+```
+
+## Usage
+
+### Basic Setup
+
+Create a `cypress.config.js` file in your project root:
+
+```javascript
+const { defineConfig } = require('cypress');
+const { config, envs, getBaseUrls } = require('@hs-web-team/eslint-config-node/cypress.config');
+
+module.exports = defineConfig({
+  ...config,
+  e2e: {
+    ...config.e2e,
+    baseUrl: 'http://localhost:3000', // Your app's base URL
+    // Add custom e2e options here
+  },
+  env: {
+    ...envs,
+    // Add custom environment variables
+  },
+});
+```
+
+### With HubSpot Projects
+
+For HubSpot CMS projects that use `hubspot.config.yml`:
+
+```javascript
+const { defineConfig } = require('cypress');
+const { config, envs, getBaseUrls } = require('@hs-web-team/eslint-config-node/cypress.config');
+
+const baseUrls = getBaseUrls();
+
+module.exports = defineConfig({
+  ...config,
+  e2e: {
+    ...config.e2e,
+    baseUrl: baseUrls.qa || baseUrls.DEV, // Use QA or DEV environment
+  },
+  env: {
+    ...envs,
+    baseUrls,
+  },
+});
+```
+
+## What's Included
+
+### Core Configuration
+
+The shared configuration includes:
+
+- **Chrome Web Security**: Disabled (`chromeWebSecurity: false`) for cross-origin testing
+- **Timeouts**:
+  - Default command timeout: 20 seconds
+  - Page load timeout: 20 seconds
+  - Response timeout: 20 seconds
+- **Test Settings**:
+  - Port: 3500
+  - Viewport: 1920x1080
+  - Tests kept in memory: 0 (prevents memory issues)
+- **Retries**:
+  - Run mode: 1 retry
+  - Open mode: 0 retries
+- **Screenshots**: Enabled on failure
+- **Video**: Disabled by default
+- **Trash assets before runs**: Enabled
+
+### E2E Configuration
+
+- **Spec Pattern**: `cypress/e2e/*.cy.js`
+- **Cucumber Support**: Includes Cucumber preprocessor setup with esbuild
+- **TypeScript Support**: Native TypeScript support via esbuild (no additional loader needed)
+- **esbuild Preprocessor**: Fast bundling for `.feature` files, TypeScript, and JavaScript
+
+### Environment Utilities
+
+The configuration exports utility functions:
+
+#### `envs`
+Pre-configured environment constants:
+```javascript
+const envs = {
+  currentEnv: 'qa', // Default environment
+  DEV: 'DEV',
+  QA: 'qa',
+  PROD: 'prod',
+};
+```
+
+#### `getDevBaseUrl()`
+Retrieves the `baseUrl` from the `DEV` portal in `hubspot.config.yml`:
+
+```javascript
+const devUrl = getDevBaseUrl(); // Returns baseUrl or null
+```
+
+**Requirements**:
+- Project must have a `hubspot.config.yml` file
+- DEV portal must have a `baseUrl` property configured
+
+#### `getBaseUrls()`
+Retrieves base URLs for all environments from `.ci/config.yml`:
+
+```javascript
+const urls = getBaseUrls();
+// Returns: { DEV: '...', qa: '...', prod: '...' }
+```
+
+**Requirements**:
+- `.ci/config.yml` file with `regression.e2eTestEnvironment` configuration
+- Format:
+  ```yaml
+  regression:
+    e2eTestEnvironment:
+      - name: qa
+        url: https://qa.example.com
+      - name: prod
+        url: https://prod.example.com
+  ```
+
+## Project Structure
+
+### Recommended Folder Structure
+
+```
+project-root/
+├── cypress/
+│   ├── e2e/
+│   │   ├── login.cy.js
+│   │   └── homepage.cy.js
+│   ├── fixtures/
+│   │   └── users.json
+│   ├── support/
+│   │   ├── commands.js
+│   │   └── e2e.js
+│   └── downloads/
+├── cypress.config.js
+└── package.json
+```
+
+### For Cucumber/BDD Testing
+
+```
+project-root/
+├── cypress/
+│   ├── e2e/
+│   │   └── features/
+│   │       ├── login.feature
+│   │       └── homepage.feature
+│   ├── support/
+│   │   ├── step_definitions/
+│   │   │   ├── login.ts
+│   │   │   └── homepage.ts
+│   │   └── e2e.ts
+└── cypress.config.js
+```
+
+## Add Scripts to package.json
+
+Add Cypress scripts to your `package.json`:
+
+```json
+{
+  "scripts": {
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "cypress:run:chrome": "cypress run --browser chrome",
+    "cypress:run:headed": "cypress run --headed",
+    "test:e2e": "cypress run"
+  }
+}
+```
+
+Then run:
+- `npm run cypress:open` - Open Cypress Test Runner (interactive)
+- `npm run cypress:run` - Run all tests headlessly
+- `npm run test:e2e` - Run E2E tests (alias for cypress:run)
+
+## Customizing Configuration
+
+### Override Default Values
+
+```javascript
+const { defineConfig } = require('cypress');
+const { config } = require('@hs-web-team/eslint-config-node/cypress.config');
+
+module.exports = defineConfig({
+  ...config,
+  // Override specific values
+  defaultCommandTimeout: 30000,
+  viewportWidth: 1280,
+  viewportHeight: 720,
+  video: true, // Enable video recording
+  e2e: {
+    ...config.e2e,
+    baseUrl: 'http://localhost:8080',
+    specPattern: 'cypress/integration/**/*.spec.js',
+  },
+});
+```
+
+### Add Custom setupNodeEvents
+
+```javascript
+const { defineConfig } = require('cypress');
+const { config } = require('@hs-web-team/eslint-config-node/cypress.config');
+
+module.exports = defineConfig({
+  ...config,
+  e2e: {
+    ...config.e2e,
+    async setupNodeEvents(on, cypressConfig) {
+      // Call shared setup first (includes esbuild preprocessor and Cucumber setup)
+      const updatedConfig = await config.e2e.setupNodeEvents(on, cypressConfig);
+
+      // Add your custom tasks/events
+      on('task', {
+        log(message) {
+          console.log(message);
+          return null;
+        },
+      });
+
+      return updatedConfig;
+    },
+  },
+});
+```
+
+## Integration with CI/CD
+
+### GitHub Actions Example
+
+```yaml
+name: E2E Tests
+on: [push, pull_request]
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run Cypress tests
+        uses: cypress-io/github-action@v6
+        with:
+          start: npm start
+          wait-on: 'http://localhost:3000'
+```
+
+## TypeScript Support
+
+The configuration includes TypeScript support. Create a `tsconfig.json` for Cypress:
+
+```json
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "lib": ["ES2021", "DOM"],
+    "types": ["cypress", "node"],
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "include": ["cypress/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+```
+
+## Cucumber/BDD Support
+
+The configuration includes Cucumber preprocessor setup. To use it:
+
+1. Install dependencies:
+```bash
+npm install --save-dev @badeball/cypress-cucumber-preprocessor
+```
+
+2. Create `.cypress-cucumber-preprocessorrc.json`:
+```json
+{
+  "stepDefinitions": "cypress/support/step_definitions/**/*.{js,ts}",
+  "json": {
+    "enabled": true,
+    "output": "cypress/results/cucumber-report.json"
+  }
+}
+```
+
+3. Write feature files in `cypress/e2e/features/`:
+```gherkin
+Feature: Login
+
+  Scenario: User can login successfully
+    Given I visit the login page
+    When I enter valid credentials
+    Then I should see the dashboard
+```
+
+## Cypress Version Requirements
+
+This configuration requires **Cypress 14.0.0 or higher**. Cypress 14+ includes:
+
+- Improved performance for component test runs
+- Support for latest React, Angular, Next.js, Svelte, and Vite versions
+- Seamless handling of Chrome's document.domain deprecation
+- Upgraded Electron with Chromium 130+ for enhanced stability
+- Better `cy.origin()` support for cross-subdomain navigation
+
+Current latest version: Cypress 15.9.0 (January 2026)
+
+## Why esbuild Instead of Webpack?
+
+The configuration uses **esbuild** instead of webpack for several reasons:
+
+- ⚡ **Much faster** - esbuild is 10-100x faster than webpack
+- 🎯 **Native TypeScript support** - No need for ts-loader or additional configuration
+- 📦 **Smaller footprint** - Fewer dependencies to install and maintain
+- 🔧 **Simpler setup** - Works out of the box with the Cucumber preprocessor
+
+## Troubleshooting
+
+### Module Not Found Errors
+
+Ensure all required dependencies are installed:
+```bash
+npm install --save-dev cypress @badeball/cypress-cucumber-preprocessor esbuild js-yaml
+```
+
+### Compilation Errors
+
+If you see compilation errors with TypeScript files, ensure esbuild is installed:
+```bash
+npm install --save-dev esbuild
+```
+
+### Environment Configuration Not Loading
+
+Ensure your project has the required configuration files:
+- `hubspot.config.yml` for HubSpot projects
+- `.ci/config.yml` for multi-environment setups
+
+### Memory Issues
+
+The configuration sets `numTestsKeptInMemory: 0` to prevent memory issues. If you still experience problems, consider:
+- Running tests in smaller batches
+- Increasing Node.js memory: `NODE_OPTIONS=--max_old_space_size=4096 cypress run`

package/examples/stylelint-usage.md

@@ -0,0 +1,144 @@
+# Stylelint Configuration Usage
+
+This package provides a shared Stylelint configuration for SCSS/CSS linting in HubSpot Marketing WebTeam projects.
+
+## Installation
+
+1. Install the package and stylelint dependencies:
+
+```bash
+npm install --save-dev @hs-web-team/eslint-config-node stylelint stylelint-config-standard-scss
+```
+
+## Usage
+
+Create a `.stylelintrc.json` file in your project root:
+
+```json
+{
+  "extends": "@hs-web-team/eslint-config-node/.stylelintrc.json"
+}
+```
+
+Alternatively, create a `.stylelintrc.js` file:
+
+```javascript
+module.exports = {
+  extends: '@hs-web-team/eslint-config-node/.stylelintrc.json',
+  // Add your custom rules here
+  rules: {
+    // Custom overrides
+  },
+};
+```
+
+## Add Scripts to package.json
+
+Add the following scripts to your `package.json`:
+
+```json
+{
+  "scripts": {
+    "stylelint:check": "stylelint '**/*.{css,scss}'",
+    "stylelint:fix": "stylelint '**/*.{css,scss}' --fix"
+  }
+}
+```
+
+Then run:
+
+- `npm run stylelint:check` - Check for style issues
+- `npm run stylelint:fix` - Automatically fix style issues
+
+## What's Included
+
+The configuration extends `stylelint-config-standard-scss` with custom rules for HubSpot projects:
+
+### Base Configuration
+- **Extends**: `stylelint-config-standard-scss` (Standard SCSS linting rules)
+
+### Disabled Rules
+The following rules are disabled to allow more flexibility in HubSpot projects:
+
+- **length-zero-no-unit**: Allows units on zero values (e.g., `0px`)
+- **declaration-empty-line-before**: No empty line requirement before declarations
+- **no-empty-source**: Allows empty source files
+- **selector-class-pattern**: No pattern enforcement for class names
+- **declaration-block-no-redundant-longhand-properties**: Allows longhand properties
+- **shorthand-property-no-redundant-values**: Allows redundant shorthand values
+- **no-duplicate-selectors**: Allows duplicate selectors
+- **font-family-name-quotes**: No quote requirement for font family names
+
+### SCSS-Specific Rules
+The following SCSS rules are customized:
+
+- **at-rule-no-unknown**: Configured to ignore SCSS directives (`@function`, `@if`, `@else`, `@for`, `@each`, `@include`, `@mixin`, `@extend`)
+- **scss/dollar-variable-pattern**: No pattern enforcement for variable names
+- **scss/at-import-no-partial-leading-underscore**: Allows leading underscores in imports
+- **scss/at-import-partial-extension**: Allows file extensions in imports
+- **scss/percent-placeholder-pattern**: No pattern enforcement for placeholders
+- **scss/at-mixin-argumentless-call-parentheses**: Flexible parentheses for mixins
+- **scss/dollar-variable-empty-line-before**: No empty line requirement before variables
+- **scss/double-slash-comment-whitespace-inside**: Flexible comment whitespace
+
+### Custom Rules
+
+- **alpha-value-notation**: No specific alpha value notation required
+- **color-function-notation**: Flexible color function notation
+- **media-feature-range-notation**: Set to `"context"` with warning severity
+- **value-keyword-case**: Enforces lowercase keywords with camelCase for SVG keywords
+
+## File Patterns
+
+By default, Stylelint will process:
+- `**/*.css`
+- `**/*.scss`
+
+## Ignore Files
+
+Create a `.stylelintignore` file to exclude files from linting:
+
+```
+node_modules/
+dist/
+build/
+*.min.css
+```
+
+## Integration with CI/CD
+
+Add stylelint checks to your CI pipeline:
+
+```yaml
+# Example GitHub Actions
+- name: Run Stylelint
+  run: npm run stylelint:check
+```
+
+## Customizing Rules
+
+To override rules for your project, add them to your `.stylelintrc.json`:
+
+```json
+{
+  "extends": "@hs-web-team/eslint-config-node/.stylelintrc.json",
+  "rules": {
+    "selector-class-pattern": "^[a-z][a-zA-Z0-9]+$",
+    "max-nesting-depth": 3
+  }
+}
+```
+
+## Troubleshooting
+
+### Module Not Found Error
+
+If you get a module not found error, ensure you have installed all dependencies:
+
+```bash
+npm install --save-dev stylelint stylelint-config-standard-scss
+```
+
+### Conflicts with Prettier
+
+If using Prettier for CSS/SCSS formatting, ensure Stylelint focuses on code quality rules rather than formatting. The shared configuration already disables many formatting-related rules.

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@hs-web-team/eslint-config-node",
-  "version": "3.1.2",
-  "description": "HubSpot Marketing WebTeam ESLint rules for Node.js",
+  "version": "3.2.0-next.0",
+  "description": "HubSpot Marketing WebTeam shared configurations for ESLint, Prettier, Stylelint, and Cypress",
   "main": "index.js",
   "type": "module",
   "exports": {
     ".": "./index.js",
-    "./browser": "./browser.js"
+    "./browser": "./browser.js",
+    "./.prettierrc.json": "./.prettierrc.json",
+    "./.stylelintrc.json": "./.stylelintrc.json",
+    "./cypress.config": "./cypress.config.js"
   },
   "scripts": {
     "lint": "npx eslint -c ./index.js *.js --fix",
@@ -23,7 +26,12 @@
     "url": "git+https://github.com/HubSpotWebTeam/wt-eslint-node.git"
   },
   "keywords": [
-    "eslint"
+    "eslint",
+    "prettier",
+    "stylelint",
+    "cypress",
+    "hubspot",
+    "config"
   ],
   "author": "Alessio Michelini & David Mooney",
   "license": "ISC",
@@ -41,9 +49,41 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "globals": "^17.0.0",
+    "globals": "^17.2.0",
     "jiti": "^2.6.1",
     "prettier": "^3.8.1",
-    "typescript-eslint": "^8.53.1"
+    "typescript-eslint": "^8.54.0"
+  },
+  "peerDependencies": {
+    "@badeball/cypress-cucumber-preprocessor": "^20.0.0",
+    "cypress": "^14.5.2",
+    "esbuild": "^0.27.2",
+    "js-yaml": "^4.1.1",
+    "stylelint": "^16.22.0",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-config-standard-scss": "^13.1.0"
+  },
+  "peerDependenciesMeta": {
+    "stylelint": {
+      "optional": true
+    },
+    "stylelint-config-standard": {
+      "optional": true
+    },
+    "stylelint-config-standard-scss": {
+      "optional": true
+    },
+    "cypress": {
+      "optional": true
+    },
+    "@badeball/cypress-cucumber-preprocessor": {
+      "optional": true
+    },
+    "esbuild": {
+      "optional": true
+    },
+    "js-yaml": {
+      "optional": true
+    }
   }
 }