{"id":13471069,"url":"https://github.com/csstools/postcss-nesting","last_synced_at":"2025-03-26T13:30:43.245Z","repository":{"id":33892506,"uuid":"37605706","full_name":"csstools/postcss-nesting","owner":"csstools","description":"Nest style rules inside each other","archived":true,"fork":false,"pushed_at":"2021-12-22T19:12:03.000Z","size":257,"stargazers_count":450,"open_issues_count":0,"forks_count":26,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-03-20T03:48:32.644Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/csstools.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-17T16:06:45.000Z","updated_at":"2024-12-06T07:56:12.000Z","dependencies_parsed_at":"2022-08-17T20:15:26.781Z","dependency_job_id":null,"html_url":"https://github.com/csstools/postcss-nesting","commit_stats":null,"previous_names":["jonathantneal/postcss-nesting"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-nesting","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-nesting/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-nesting/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-nesting/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csstools","download_url":"https://codeload.github.com/csstools/postcss-nesting/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245662710,"owners_count":20652068,"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-07-31T16:00:39.288Z","updated_at":"2025-03-26T13:30:42.902Z","avatar_url":"https://github.com/csstools.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e⚠️ PostCSS Nesting was moved to \u003ca href=\"https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting\"\u003e@csstools/postcss-plugins\u003c/a\u003e. ⚠️ \u003cbr\u003e\n\u003ca href=\"https://github.com/csstools/postcss-plugins/discussions/75\"\u003eRead the announcement\u003c/a\u003e\u003c/div\u003e\n\n# PostCSS Nesting [\u003cimg src=\"https://postcss.github.io/postcss/logo.svg\" alt=\"PostCSS\" width=\"90\" height=\"90\" align=\"right\"\u003e][postcss]\n\n[![NPM Version][npm-img]][npm-url]\n[![CSS Standard Status][css-img]][css-url]\n[![Build Status][cli-img]][cli-url]\n[![Support Chat][git-img]][git-url]\n\n[PostCSS Nesting] lets you nest style rules inside each other, following the\n[CSS Nesting] specification. If you want nested rules the same way [Sass] works\nyou might want to use [PostCSS Nested] instead.\n\n```pcss\na, b {\n  color: red;\n\n  \u0026 c, \u0026 d {\n    color: white;\n  }\n}\n\n/* becomes */\n\na, b {\n  color: red;\n}\n\na c, a d, b c, b d {\n  color: white;\n}\n```\n\n## Usage\n\nAdd [PostCSS Nesting] to your project:\n\n```bash\nnpm install postcss-nesting --save-dev\n```\n\nUse [PostCSS Nesting] to process your CSS:\n\n```js\nimport postcssNesting from 'postcss-nesting';\n\npostcssNesting.process(YOUR_CSS /*, processOptions, pluginOptions */);\n```\n\nOr use it as a [PostCSS] plugin:\n\n```js\nimport postcss from 'postcss';\nimport postcssNesting from 'postcss-nesting';\n\npostcss([\n  postcssNesting(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n[PostCSS Nesting] runs in all Node environments, with special instructions for:\n\n| [Node](INSTALL.md#node) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |\n| --- | --- | --- | --- | --- |\n\n### Deno\n\nYou can also use [PostCSS Nesting] on [Deno]:\n\n```js\nimport postcss from \"https://deno.land/x/postcss/mod.js\";\nimport postcssNesting from \"https://cdn.jsdelivr.net/npm/postcss-nesting@10/mod.js\";\n\nawait postcss([postcssNesting]).process(YOUR_CSS /*, processOptions */);\n```\n\n### ⚠️ Spec disclaimer\n\nThe [CSS Nesting Module] spec states on nesting that \"Declarations occuring after a nested rule are invalid and ignored.\".\nWhile we think it makes sense on browsers, enforcing this at the plugin level introduces several constrains that would\ninterfere with PostCSS' plugin nature such as with `@mixin`\n\n[cli-img]: https://img.shields.io/travis/csstools/postcss-nesting.svg\n[cli-url]: https://travis-ci.org/csstools/postcss-nesting\n[css-img]: https://cssdb.org/badge/nesting-rules.svg\n[css-url]: https://cssdb.org/#nesting-rules\n[git-img]: https://img.shields.io/badge/support-chat-blue.svg\n[git-url]: https://gitter.im/postcss/postcss\n[npm-img]: https://img.shields.io/npm/v/postcss-nesting.svg\n[npm-url]: https://www.npmjs.com/package/postcss-nesting\n\n[CSS Nesting]: https://drafts.csswg.org/css-nesting-1/\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Nesting]: https://github.com/jonathantneal/postcss-nesting\n[Deno]: https://deno.land/x/postcss_nesting\n[PostCSS Nested]: https://github.com/postcss/postcss-nested\n[Sass]: https://sass-lang.com/\n[CSS Nesting Module]: https://www.w3.org/TR/css-nesting-1/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fpostcss-nesting","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsstools%2Fpostcss-nesting","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fpostcss-nesting/lists"}