{"id":15698987,"url":"https://github.com/pgilad/rework-zyndexer","last_synced_at":"2025-10-10T06:06:36.848Z","repository":{"id":22450660,"uuid":"25789083","full_name":"pgilad/rework-zyndexer","owner":"pgilad","description":"Rework plugin to scale down z-indexes in your stylesheet with ease","archived":false,"fork":false,"pushed_at":"2015-05-22T17:31:05.000Z","size":228,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-09T02:17:16.918Z","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/pgilad.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":"2014-10-26T20:14:27.000Z","updated_at":"2015-05-08T18:56:44.000Z","dependencies_parsed_at":"2022-08-20T17:00:39.551Z","dependency_job_id":null,"html_url":"https://github.com/pgilad/rework-zyndexer","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pgilad%2Frework-zyndexer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pgilad%2Frework-zyndexer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pgilad%2Frework-zyndexer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pgilad%2Frework-zyndexer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pgilad","download_url":"https://codeload.github.com/pgilad/rework-zyndexer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253176443,"owners_count":21866143,"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":"2024-10-03T19:37:15.500Z","updated_at":"2025-10-10T06:06:31.813Z","avatar_url":"https://github.com/pgilad.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rework-zyndexer [![Build Status](http://img.shields.io/travis/pgilad/rework-zyndexer.svg?style=flat)](https://travis-ci.org/pgilad/rework-zyndexer)\n\n\u003e [Rework](https://github.com/reworkcss/rework) plugin to scale down z-indexes in your stylesheet with ease using [array-scaler](https://github.com/pgilad/array-scaler)\n\nFrom [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index):\n\n```\nThe z-index CSS property specifies the z-order of an element and its descendants.\nWhen elements overlap, z-order determines which one covers the other.\nAn element with a larger z-index generally covers an element with a lower one.\n```\n\nThe problems start when your z-indexes are out of control. `z-index: 90001` - familiar?\n\nAnother critical problem has arose lately with support for tablets. A recent article about supporting iPad Air 2\nmentions that iPad Air 2 only supports z-indexes under 100. [Reference](http://alistafart.com/article/4-ways-to-make-your-website-thin-enough-for-the-ipad-air-2/)\n\nWell, if you write your css (or any preprocessor like less, stylus, sass etc.) with messy z-indexes,\nor if you just want to prettify your numbers, and especially if you wish to support tablet users such as iPad Air 2 users,\nyou can do so with ease.\n\nThis is a plugin for [Rework](https://github.com/reworkcss/rework) and uses [array-scaler](https://github.com/pgilad/array-scaler) to scale the z-indexes.\n\nGiven a sample css file:\n```css\nbody {\n  z-index: 12;\n  color: red;\n}\n\n.some-class {\n  z-index: 5000;\n}\n```\n\nRunning this plugin will output by default:\n```css\nbody {\n  z-index: 0;\n  color: red;\n}\n\n.some-class {\n  z-index: 1;\n}\n```\n\nSee how easy that was?\n\n## Install\n\n```bash\n$ npm install --save-dev rework-zyndexer\n```\n\n## Usage\n\n```js\nvar rework = require('rework');\nvar zyndexer = require('rework-zyndexer');\n\nvar css = fs.readFileSync('./css/style.css', 'utf8');\n\n// Basic example\nvar output = rework(css)\n    .use(zyndexer())\n    .toString();\n// --\u003e output now contains the transformed css file with sane scaled z-indexes\n\n// An example of using the options\nvar output = rework(css)\n    .use(zyndexer({\n        limit: 50,\n        start: 1,\n        ignore: [-1]\n    }))\n    .toString();\n\n    // output will be the transformed css with z-indexes that start from 1\n    // z-indexes with values of -1 will be ignored (and untouched)\n    // If the number of unique z-indexes is above 50 you will get an error\n```\n\n## API\n\n`rework-zyndexer(params)`\n\n`params` is an optional object with the following properties:\n\n### limit\n\nType: `number`\n\nDefault: `100`\n\nThe number to limit the z-indexes. This has no effect on the z-indexes,\nbut will provide you a sanity check to make sure you don't have too many unique\nz-indexes so that the limit will be reached.\n\n### start\n\nType: `number`\n\nDefault: `0`\n\nThe number to start the z-indexes from\n\n### step\n\nType: `number`\n\nDefault: `1`\n\nThe increment step to use for z-indexes\n\n### ignore\n\nType: `array`\n\nDefault: `[]`\n\nIf you want `rework-zyndexer` to ignore certain z-index values (such as `-1`) you can\nspecify them in an array. For example `[-1, 0]`\n\n## Benchmark\n\n```sh\n$ npm run bench\n```\n\n## License\n\nMIT @[Gilad Peleg](http://giladpeleg.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpgilad%2Frework-zyndexer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpgilad%2Frework-zyndexer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpgilad%2Frework-zyndexer/lists"}