{"id":22208368,"url":"https://github.com/topaxi/postcss-selector-namespace","last_synced_at":"2025-07-27T09:30:42.132Z","repository":{"id":3339404,"uuid":"49132150","full_name":"topaxi/postcss-selector-namespace","owner":"topaxi","description":"Namespace your CSS selectors using postcss","archived":false,"fork":false,"pushed_at":"2024-10-04T21:37:30.000Z","size":544,"stargazers_count":36,"open_issues_count":32,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-07T03:17:45.651Z","etag":null,"topics":["component","namespace","postcss","prepend","scss","selector"],"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/topaxi.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}},"created_at":"2016-01-06T11:51:19.000Z","updated_at":"2024-04-09T04:28:14.000Z","dependencies_parsed_at":"2023-09-27T16:03:04.075Z","dependency_job_id":"c3c35682-3bf2-45db-aa4a-9f358fc6c29f","html_url":"https://github.com/topaxi/postcss-selector-namespace","commit_stats":{"total_commits":154,"total_committers":8,"mean_commits":19.25,"dds":0.6688311688311688,"last_synced_commit":"779bba3540f6c73d1e0d600f36e1b71a160a58e7"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/topaxi%2Fpostcss-selector-namespace","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/topaxi%2Fpostcss-selector-namespace/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/topaxi%2Fpostcss-selector-namespace/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/topaxi%2Fpostcss-selector-namespace/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/topaxi","download_url":"https://codeload.github.com/topaxi/postcss-selector-namespace/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227786774,"owners_count":17819777,"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":["component","namespace","postcss","prepend","scss","selector"],"created_at":"2024-12-02T19:18:38.194Z","updated_at":"2024-12-02T19:18:39.399Z","avatar_url":"https://github.com/topaxi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-selector-namespace [![Build Status](https://travis-ci.org/topaxi/postcss-selector-namespace.svg?branch=master)](https://travis-ci.org/topaxi/postcss-selector-namespace) [![Test Coverage](https://codeclimate.com/github/topaxi/postcss-selector-namespace/badges/coverage.svg)](https://codeclimate.com/github/topaxi/postcss-selector-namespace/coverage) [![Code Climate](https://codeclimate.com/github/topaxi/postcss-selector-namespace/badges/gpa.svg)](https://codeclimate.com/github/topaxi/postcss-selector-namespace)\n\n# Installation\n\n```bash\n$ npm install postcss-selector-namespace\n```\n\n## Usage\n\n```javascript\nvar postcss = require('postcss')\nvar selectorNamespace = require('postcss-selector-namespace')\n\nvar output = postcss()\n  .use(selectorNamespace({ selfSelector: ':--component', namespace: 'my-component' }))\n  .process(require('fs').readFileSync('input.css', 'utf8'))\n  .css\n```\n\n`input.css`\n```css\n:--component {\n  color: black;\n}\n\n:--component.danger {\n  color: red;\n}\n\nh1, .h1 {\n  font-weight: bold;\n}\n```\n\nwill output the following css:\n\n```css\n.my-component {\n  color: black;\n}\n\n.my-component.danger {\n  color: red;\n}\n\n.my-component h1, .my-component .h1 {\n  font-weight: bold;\n}\n```\n\nPrepending [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) to a selector prevents the selector from being namespaced:\n\n```css\n:root h1 {\n  font-weight: bold;\n}\n```\n\nwill output the selector without any namespace:\n\n```css\nh1 {\n  font-weight: bold;\n}\n```\n\n## SCSS support\n\nThis plugin can also process scss files and output scss again using the\n[`postcss-scss`](https://github.com/postcss/postcss-scss) module.\n\n```js\nvar postcss = require('postcss')\nvar postscss = require('postcss-scss')\nvar selectorNamespace = require('postcss-selector-namespace')\n\nvar output = postcss()\n  .use(selectorNamespace({ selfSelector: '\u0026', namespace: 'my-component' }))\n  .process(require('fs').readFileSync('input.css', 'utf8'), { syntax: postscss })\n  .css\n```\n\n```scss\n$break = 320px;\n\n\u0026 {\n  float: left;\n  width: 250px;\n  h1 {\n    font-weight: bold;\n    font-size: 32px;\n  }\n  @media screen and (max-width: $break-small) {\n    width: 100px;\n    float: none;\n    h1 {\n      font-size: 24px;\n    }\n  }\n}\n```\n\noutputs:\n\n```scss\n$break = 320px;\n\n.my-component {\n  float: left;\n  width: 250px;\n  h1 {\n    font-weight: bold;\n    font-size: 32px;\n  }\n  @media screen and (max-width: $break-small) {\n    width: 100px;\n    float: none;\n    h1 {\n      font-size: 24px;\n    }\n  }\n}\n```\n\n# Example setup with `postcss-import`\n\nUsing the excellent plugin\n[postcss-import](https://github.com/postcss/postcss-import),\nwe can easily namespace each component with its filename.\n\n`components/my-button.css`\n```css\n:--namespace {\n  border: 1px solid #666;\n  border-radius: 3px;\n}\n```\n\n`components/my-tabs.css`\n```css\n:--namespace {\n  display: flex;\n}\n\n.tab {\n  border: 1px solid #666;\n  border-bottom: none;\n  border-top-radius: 3px;\n  margin: 0 5px;\n}\n```\n\n`main.css`\n```css\n@import 'components/my-button.css';\n@import 'components/my-tabs.css';\n\nbody {\n  margin: 0;\n  color: #333;\n}\n```\n\n`build.js`\n```javascript\nconst fs = require('fs')\nconst path = require('path')\nconst postcss = require('postcss')\nconst postcssImport = require('postcss-import')\nconst postcssSelectorNamespace = require('postcss-selector-namespace')\n\nlet css = fs.readFileSync('main.css', 'utf8')\n\nfunction getComponentName(filename) {\n  if (/components\\//.test(filename)) {\n    return path.basename(filename).replace(/\\.css$/, '')\n  }\n\n  return null\n}\n\npostcss()\n  .use(postcssImport({\n    transform(css, filename, options) {\n      let componentName = getComponentName(filename)\n\n      if (!componentName) {\n        return css\n      }\n\n      return postcss()\n        .use(postcssSelectorNamespace({ namespace: '.' + componentName }))\n        .process(css)\n        .then(result =\u003e result.css)\n    }\n  }))\n  .process(css, { from: 'main.css' })\n  .then(result =\u003e {\n    console.log(result.css)\n  })\n```\n\n`node build.js` outputs:\n```css\n.my-button {\n  border: 1px solid #666;\n  border-radius: 3px;\n}\n.my-tabs {\n  display: flex;\n}\n.my-tabs .tab {\n  border: 1px solid #666;\n  border-bottom: none;\n  border-top-radius: 3px;\n  margin: 0 5px;\n}\nbody {\n  margin: 0;\n  color: #333;\n}\n```\n\n## Options\n\n### `namespace`\n\n(default: `'.self'`)\n\nThe selector to prepend to each selector.\n\n### `selfSelector`\n\n(default: `:--namespace`)\n\nThe selector to use to apply rules directly to your namespace selector.\n\n### `ignoreRoot`\n\n(default: `true`)\n\nSelector won't be namespaced if they start with the `:root` pseudo-class.\n\n### `rootSelector`\n\n(default: `:root`)\n\nIf prefixed with this selector, selectors won't be namespaced.\n\n### `dropRoot`\n\n(default: `true`)\n\nIf `true`, the `rootSelector` will be stripped from the output.\n\n---\n\n## [License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftopaxi%2Fpostcss-selector-namespace","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftopaxi%2Fpostcss-selector-namespace","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftopaxi%2Fpostcss-selector-namespace/lists"}