{"id":13724967,"url":"https://github.com/CSSSR/postcss-easy-z","last_synced_at":"2025-05-07T19:32:10.999Z","repository":{"id":42656607,"uuid":"359830375","full_name":"CSSSR/postcss-easy-z","owner":"CSSSR","description":"PostCSS plugin to organize z-indices","archived":false,"fork":false,"pushed_at":"2023-01-07T06:50:17.000Z","size":922,"stargazers_count":39,"open_issues_count":11,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-16T00:32:51.927Z","etag":null,"topics":["internal"],"latest_commit_sha":null,"homepage":"","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/CSSSR.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}},"created_at":"2021-04-20T13:42:36.000Z","updated_at":"2023-08-30T15:49:24.000Z","dependencies_parsed_at":"2023-02-06T14:30:56.773Z","dependency_job_id":null,"html_url":"https://github.com/CSSSR/postcss-easy-z","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CSSSR%2Fpostcss-easy-z","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CSSSR%2Fpostcss-easy-z/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CSSSR%2Fpostcss-easy-z/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CSSSR%2Fpostcss-easy-z/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CSSSR","download_url":"https://codeload.github.com/CSSSR/postcss-easy-z/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224202754,"owners_count":17272807,"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":["internal"],"created_at":"2024-08-03T01:02:08.316Z","updated_at":"2024-11-14T15:30:32.443Z","avatar_url":"https://github.com/CSSSR.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# PostCSS Easy Z\n\n[PostCSS] plugin to organize z-indices by declaring relations between them.\n\n[PostCSS]: https://github.com/postcss/postcss\n\n## `z-stack`\n\nYou can stack your CSS variables for z-indices with `z-stack`. Each new variable will be positioned over the previous:\n\n```css\n:root {\n  --z-content: z-stack();\n  --z-header: z-stack();\n  --z-popup: z-stack();\n}\n```\n\n```css\n/* Output */\n:root {\n  --z-content: 1;\n  --z-header: calc(var(--z-content) + 1);\n  --z-popup: calc(var(--z-header) + 1);\n}\n```\n\nThen just use these variables as usual:\n\n```css\n.content {\n  z-index: var(--z-content);\n}\n\n.header {\n  z-index: var(--z-header);\n}\n\n.popup {\n  z-index: var(--z-popup);\n}\n```\n\nYou can provide starting value for the stack:\n```css\n:root {\n  --z-content: z-stack(10);\n  --z-header: z-stack();\n}\n```\n```css\n/* Output */\n:root {\n  --z-content: 10;\n  --z-header: calc(var(--z-content) + 1);\n}\n```\n\nStack is isolated by selector:\n\n```css\n.a {\n  --z-a1: z-stack();\n  --z-a2: z-stack();\n}\n\n.b {\n  --z-b1: z-stack();\n  --z-b2: z-stack();\n}\n```\n```css\n/* Output */\n.a {\n  --z-a1: 1;\n  --z-a2: calc(var(--z-a1) + 1);\n}\n\n.b {\n  --z-b1: 1;\n  --z-b2: calc(var(--z-b1) + 1);\n}\n```\n\n## `z-over` and `z-under`\n\nYou can also explicitly describe relations between z-indices with `z-over` and `z-under`:\n\n```css\n.overContent {\n  z-index: z-over(var(--z-content));\n}\n\n.underHeader {\n  z-index: z-under(var(--z-header));\n}\n```\n\n```css\n/* Output */\n.overContent {\n  z-index: calc(var(--z-content) + 1);\n}\n\n.underHeader {\n  z-index: calc(var(--z-header) - 1);\n}\n```\n\n## Installation\n\n**Step 1:** Install plugin:\n\n```sh\nnpm install --save-dev postcss postcss-easy-z\n```\n\n**Step 2:** Check you project for existed PostCSS config: `postcss.config.js`\nin the project root, `\"postcss\"` section in `package.json`\nor `postcss` in bundle config.\n\nIf you do not use PostCSS, add it according to [official docs]\nand set this plugin in settings.\n\n**Step 3:** Add the plugin to plugins list:\n\n```diff\nmodule.exports = {\n  plugins: [\n+   require('postcss-easy-z'),\n    require('autoprefixer')\n  ]\n}\n```\n\n[official docs]: https://github.com/postcss/postcss#usage\n\n## Linting\n\nTo enforce usage of variables for z-index property add [`stylelint-declaration-strict-value`](https://github.com/AndyOGo/stylelint-declaration-strict-value) to stylelint config:\n```js\nmodule.exports = {\n  plugins: ['stylelint-declaration-strict-value'],\n  rules: {\n    'scale-unlimited/declaration-strict-value': [\n      'z-index',\n      {\n        ignoreValues: ['initial', -1, 0, 1],\n      },\n    ],\n  },\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCSSSR%2Fpostcss-easy-z","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCSSSR%2Fpostcss-easy-z","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCSSSR%2Fpostcss-easy-z/lists"}