{"id":17058288,"url":"https://github.com/garthdb/postcss-inherit","last_synced_at":"2025-08-22T13:10:58.537Z","repository":{"id":33789931,"uuid":"37475577","full_name":"GarthDB/postcss-inherit","owner":"GarthDB","description":"A PostCSS port of https://github.com/reworkcss/rework-inherit","archived":false,"fork":false,"pushed_at":"2018-05-19T05:39:45.000Z","size":158,"stargazers_count":16,"open_issues_count":2,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-15T10:57:34.497Z","etag":null,"topics":["css","npm","postcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GarthDB.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2015-06-15T16:00:58.000Z","updated_at":"2023-04-05T02:59:10.000Z","dependencies_parsed_at":"2022-09-18T17:50:34.110Z","dependency_job_id":null,"html_url":"https://github.com/GarthDB/postcss-inherit","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/GarthDB/postcss-inherit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GarthDB%2Fpostcss-inherit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GarthDB%2Fpostcss-inherit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GarthDB%2Fpostcss-inherit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GarthDB%2Fpostcss-inherit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GarthDB","download_url":"https://codeload.github.com/GarthDB/postcss-inherit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GarthDB%2Fpostcss-inherit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261005514,"owners_count":23095855,"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":["css","npm","postcss"],"created_at":"2024-10-14T10:29:16.594Z","updated_at":"2025-06-20T19:37:15.360Z","avatar_url":"https://github.com/GarthDB.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS Inherit\n\n[![Build Status](https://travis-ci.org/GarthDB/postcss-inherit.svg?branch=master)](https://travis-ci.org/GarthDB/postcss-inherit) [![Code Climate](https://codeclimate.com/github/GarthDB/postcss-inherit/badges/gpa.svg)](https://codeclimate.com/github/GarthDB/postcss-inherit) [![Issue Count](https://codeclimate.com/github/GarthDB/postcss-inherit/badges/issue_count.svg)](https://codeclimate.com/github/GarthDB/postcss-inherit) [![codecov](https://codecov.io/gh/GarthDB/postcss-inherit/branch/master/graph/badge.svg)](https://codecov.io/gh/GarthDB/postcss-inherit) [![Dependency Status](https://david-dm.org/GarthDB/postcss-inherit.svg)](https://david-dm.org/GarthDB/postcss-inherit) [![Inline docs](http://inch-ci.org/github/GarthDB/postcss-inherit.svg?branch=master)](http://inch-ci.org/github/GarthDB/postcss-inherit) [![npm version](https://badge.fury.io/js/postcss-inherit.svg)](https://badge.fury.io/js/postcss-inherit)\n\n---\n\n\u003ca href=\"http://postcss.org/\"\u003e\u003cimg align=\"right\" width=\"95\" height=\"95\"\n     title=\"Philosopher’s stone, logo of PostCSS\"\n     src=\"http://postcss.github.io/postcss/logo.svg\"\u003e\u003c/a\u003e\n\nInherit plugin for [PostCSS](https://github.com/postcss/postcss). Allows you to inherit all the rules associated with a given selector. Modeled after [rework-inherit](https://github.com/reworkcss/rework-inherit).\n\n## API\n\n```js\nvar postcss = require('postcss');\nvar inherit = require('postcss-inherit')\n\npostcss([ inherit ])\n  .process(css, { from: 'src/app.css', to: 'app.css' })\n  .then(function (result) {\n    fs.writeFileSync('app.css', result.css);\n    if ( result.map ) fs.writeFileSync('app.css.map', result.map);\n  });\n```\n\n### Inherit(options{})\n\nOption parameters:\n\n* `propertyRegExp` - Regular expression to match the \"inherit\" at-rule.\n  By default, it is `/^(inherit|extend)s?:?$/i`, so it matches \"inherit\", \"inherits\", \"extend\", and \"extends\".\n  For example, if you only want to allow the `extend` keyword,\n  set the regular expression to `/^extend$/`.\n\n## Examples\n\n### Regular inherit\n\n```css\n.gray {\n  color: gray;\n}\n\n.text {\n  @inherit: .gray;\n}\n```\n\nyields:\n\n```css\n.gray,\n.text {\n  color: gray;\n}\n```\n\n### Multiple inherit\n\nInherit multiple selectors at the same time.\n\n```css\n.gray {\n  color: gray;\n}\n\n.black {\n  color: black;\n}\n\n.button {\n  @inherit: .gray, .black;\n}\n```\n\nyields:\n\n```css\n.gray,\n.button {\n  color: gray;\n}\n\n.black,\n.button {\n  color: black;\n}\n```\n\n### Placeholders\n\nAny selector that includes a `%` is considered a placeholder.\nPlaceholders will not be output in the final CSS.\n\n```css\n%gray {\n  color: gray;\n}\n\n.text {\n  @inherit: %gray;\n}\n```\n\nyields:\n\n```css\n.text {\n  color: gray;\n}\n```\n\n### Partial selectors\n\nIf you inherit a selector,\nall rules that include that selector will be included as well.\n\n```css\ndiv button span {\n  color: red;\n}\n\ndiv button {\n  color: green;\n}\n\nbutton span {\n  color: pink;\n}\n\n.button {\n  @inherit: button;\n}\n\n.link {\n  @inherit: div button;\n}\n```\n\nyields:\n\n```css\ndiv button span,\ndiv .button span,\n.link span {\n  color: red;\n}\n\ndiv button,\ndiv .button,\n.link {\n  color: green;\n}\n\nbutton span,\n.button span {\n  color: pink;\n}\n```\n\n### Chained inheritance\n\n```css\n.button {\n  background-color: gray;\n}\n\n.button-large {\n  @inherit: .button;\n  padding: 10px;\n}\n\n.button-large-red {\n  @inherit: .button-large;\n  color: red;\n}\n```\n\nyields:\n\n```css\n.button,\n.button-large,\n.button-large-red {\n  background-color: gray;\n}\n\n.button-large,\n.button-large-red {\n  padding: 10px;\n}\n\n.button-large-red {\n  color: red;\n}\n```\n\n### Media Queries\n\nInheriting from inside a media query will create a copy of the declarations.\nIt will act like a \"mixin\".\nThus, with `%`placeholders, you won't have to use mixins at all.\nEach type of media query will need its own declaration,\nso there will be some inevitable repetition.\n\n```css\n.gray {\n  color: gray\n}\n\n@media (min-width: 320px) {\n  .button {\n    @inherit: .gray;\n  }\n}\n\n@media (min-width: 320px) {\n  .link {\n    @inherit: .gray;\n  }\n}\n```\n\nyields:\n\n```css\n.gray {\n  color: gray;\n}\n\n@media (min-width: 320px) {\n  .button,\n  .link {\n    color: gray;\n  }\n}\n```\n\n### Limitations\n\n* When in a media query, you can only inherit rules from root, or rules contained in a media query with the same parameters.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarthdb%2Fpostcss-inherit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgarthdb%2Fpostcss-inherit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarthdb%2Fpostcss-inherit/lists"}