{"id":29460940,"url":"https://github.com/hiro0218/stylelint-plugin-isolate-on-stack","last_synced_at":"2026-04-07T10:31:53.734Z","repository":{"id":299400460,"uuid":"1002756082","full_name":"hiro0218/stylelint-plugin-isolate-on-stack","owner":"hiro0218","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-16T10:39:15.000Z","size":114,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-16T11:39:17.641Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hiro0218.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"hiro0218","buy_me_a_coffee":"hiro0218"}},"created_at":"2025-06-16T05:11:46.000Z","updated_at":"2025-06-16T10:39:18.000Z","dependencies_parsed_at":"2025-06-16T11:49:35.104Z","dependency_job_id":null,"html_url":"https://github.com/hiro0218/stylelint-plugin-isolate-on-stack","commit_stats":null,"previous_names":["hiro0218/stylelint-plugin-isolate-on-stack"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/hiro0218/stylelint-plugin-isolate-on-stack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiro0218%2Fstylelint-plugin-isolate-on-stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiro0218%2Fstylelint-plugin-isolate-on-stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiro0218%2Fstylelint-plugin-isolate-on-stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiro0218%2Fstylelint-plugin-isolate-on-stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hiro0218","download_url":"https://codeload.github.com/hiro0218/stylelint-plugin-isolate-on-stack/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiro0218%2Fstylelint-plugin-isolate-on-stack/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265233753,"owners_count":23731825,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-14T02:38:49.794Z","updated_at":"2026-04-07T10:31:53.712Z","avatar_url":"https://github.com/hiro0218.png","language":"JavaScript","funding_links":["https://github.com/sponsors/hiro0218","https://buymeacoffee.com/hiro0218"],"categories":[],"sub_categories":[],"readme":"# stylelint-plugin-isolate-on-stack\n\n[![NPM version](https://img.shields.io/npm/v/stylelint-plugin-isolate-on-stack.svg)](https://www.npmjs.org/package/stylelint-plugin-isolate-on-stack)\n[![Build Status](https://github.com/hiro0218/stylelint-plugin-isolate-on-stack/workflows/CI/badge.svg)](https://github.com/hiro0218/stylelint-plugin-isolate-on-stack/actions)\n\nA Stylelint plugin that detects and prevents stacking context-related issues. This plugin enforces best practices for `z-index` usage and stacking context generation, aiming to improve CSS quality.\n\n## Overview\n\nThis plugin is designed for the following purposes:\n\n- Detect redundant or invalid uses of `isolation: isolate`\n- Enforce best practices for stacking context generation\n- Help understand how CSS declarations affect stacking contexts\n\n## Stacking Context Detection\n\nThis plugin automatically detects conditions where CSS properties generate stacking contexts:\n\n- `position: relative/absolute/fixed/sticky` + `z-index` other than `auto`\n- `opacity` less than 1\n- `transform` other than `none`\n- `filter` other than `none`\n- `backdrop-filter` other than `none`\n- `mix-blend-mode` other than `normal`\n- `isolation: isolate`\n- `contain: layout/paint/strict/content`\n- `perspective` other than `none`\n- `clip-path` other than `none`\n- `mask` / `mask-image` / `mask-border` other than `none`\n- `will-change` with properties that generate stacking contexts\n\nWhen these properties are detected, the plugin identifies redundant `isolation: isolate` declarations and encourages appropriate corrections.\n\n## Installation\n\nInstall with the following command:\n\n```bash\nnpm install --save-dev stylelint-plugin-isolate-on-stack\n```\n\n## Usage\n\n### Configuration\n\nAdd the following to your `.stylelintrc.json` file:\n\n```jsonc\n{\n  \"plugins\": [\"stylelint-plugin-isolate-on-stack\"],\n  \"rules\": {\n    // Enable stacking context related rules\n    \"stylelint-plugin-isolate-on-stack/no-redundant-declaration\": true,\n    // Detect invalid combinations with background blend modes\n    \"stylelint-plugin-isolate-on-stack/ineffective-on-background-blend\": true,\n  },\n}\n```\n\n## Rules\n\n### no-redundant-declaration\n\nDetects redundant `isolation: isolate` declarations when stacking contexts are already created by other properties.\n\n**Incorrect example:**\n\n```css\n.redundant {\n  position: relative;\n  z-index: 1;\n  isolation: isolate; /* Redundant: position + z-index already creates a stacking context */\n}\n```\n\n**Correct example:**\n\n```css\n.not-redundant {\n  isolation: isolate; /* OK: No other properties are creating a stacking context */\n}\n```\n\n### ineffective-on-background-blend\n\nDetects invalid combinations of `background-blend-mode` and `isolation: isolate`. `isolation: isolate` does not affect the behavior of `background-blend-mode`.\n\n**Incorrect example:**\n\n```css\n.invalid {\n  background-blend-mode: multiply;\n  isolation: isolate; /* Invalid: does not affect background-blend-mode */\n}\n```\n\n**Correct example:**\n\n```css\n.valid {\n  isolation: isolate;\n  mix-blend-mode: multiply; /* OK: mix-blend-mode is affected by isolation */\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiro0218%2Fstylelint-plugin-isolate-on-stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhiro0218%2Fstylelint-plugin-isolate-on-stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiro0218%2Fstylelint-plugin-isolate-on-stack/lists"}