{"id":15704154,"url":"https://github.com/neurosnap/postcss-scopeify-everything","last_synced_at":"2025-08-14T05:15:36.992Z","repository":{"id":57142786,"uuid":"65629890","full_name":"neurosnap/postcss-scopeify-everything","owner":"neurosnap","description":"Scopify all your CSS selectors","archived":false,"fork":false,"pushed_at":"2020-04-21T08:10:20.000Z","size":53,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-16T21:18:52.827Z","etag":null,"topics":["css","postcss","postcss-plugin","scoped-css"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/neurosnap.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-13T17:55:17.000Z","updated_at":"2021-09-05T12:48:19.000Z","dependencies_parsed_at":"2022-09-05T18:41:37.517Z","dependency_job_id":null,"html_url":"https://github.com/neurosnap/postcss-scopeify-everything","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/neurosnap/postcss-scopeify-everything","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neurosnap%2Fpostcss-scopeify-everything","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neurosnap%2Fpostcss-scopeify-everything/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neurosnap%2Fpostcss-scopeify-everything/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neurosnap%2Fpostcss-scopeify-everything/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/neurosnap","download_url":"https://codeload.github.com/neurosnap/postcss-scopeify-everything/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neurosnap%2Fpostcss-scopeify-everything/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270364971,"owners_count":24571423,"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","status":"online","status_checked_at":"2025-08-14T02:00:10.309Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","postcss","postcss-plugin","scoped-css"],"created_at":"2024-10-03T20:10:33.842Z","updated_at":"2025-08-14T05:15:36.937Z","avatar_url":"https://github.com/neurosnap.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"PostCSS Scopeify Everything [![Build Status](https://travis-ci.org/neurosnap/postcss-scopeify-everything.svg?branch=master)](https://travis-ci.org/neurosnap/postcss-scopeify-everything)\n===========================\n\nThis PostCSS plugin will scopeify the following CSS selectors:\n\n* Converts HTML elements into classes\n* Classes\n* Ids\n* Keyframes\n* Font-faces\n\nUse as a plugin\n---------------\n\n```js\nconst postcss = require('postcss');\nconst scopeify = require('postcss-scopeify-everything');\nconst opts = {};\n\npostcss([ scopeify(opts) ])\n  .process(css)\n  .then(result =\u003e { console.log(result); });\n```\n\nUse in javascript\n-----------------\n\nThis will return an object with the following properties:\n\n* css {string, hidden use `getCss` access}: the raw scopeified CSS\n* elements {object}: map containing all the HTML element scopeified and converted into classes\n* classes {object}: map containing all the class selectors scopeified\n* ids {object}: map containing all the id selectors scopeified\n* keyframes {object}: map containing all the \\@keyframe animations that were scopeified\n* fontFaces {object}: map containing all the \\@font-face definitions that were scopeified\n\n### Async\n\n```js\nconst pse = require('postcss-scopeify-everything');\nconst scopeify = pse.api();\nconst getCss = pse.getCss;\n\nconst css = 'div \u003e .bro { display: flex; height: 50px; }';\n\nscopeify(css).promise()\n  .then(result =\u003e {\n    console.log(result);\n    /* { elements: { div: 'div_el_4wb1Hi' },\n      classes: { bro: 'bro_4wb1Hi' },\n      ids: {},\n      keyframes: {} }\n    */\n    console.log(getCss(result));\n    // .div_el_4wb1Hi \u003e .bro_4wb1Hi { display: flex; height: 50px; }\n  });\n```\n\n### Sync\n\n```js\nconst pse = require('postcss-scopeify-everything');\nconst scopeify = pse.api();\nconst getCss = pse.getCss;\n\nconst css = '#foo, .bro { display: flex; height: 50px; }';\n\nconst scopified = scopeify(css).sync();\nconsole.log(scopified);\n/* { elements: {},\n  classes: { bro: 'bro_4uC3yI' },\n  ids: { foo: 'foo_4uC3yI' },\n  keyframes: {} }\n*/\nconsole.log(getCss(scopified));\n// #foo_4uC3yI, .bro_4uC3yI { display: flex; height: 50px; }\n```\n\n### Only scopeify classes\n\n```js\nconst pse = require('postcss-scopeify-everything');\nconst scopeify = pse.api({ ids: false, keyframes: false, elements: false });\nconst getCss = pse.getCss;\n\nconst scopeified = scopeify(css).sync();\nconsole.log(scopeified);\nconsole.log(getCss(scopeified));\n```\n\n### Modify scope hash\n\n```js\nconst pse = require('postcss-scopeify-everything');\nconst scopeify = pse.api({ scopeifyFn: hashFn });\nconst getCss = pse.getCss;\n\nconst scopeified = scopeify(css).sync();\nconsole.log(scopeified);\nconsole.log(getCss(scopeified));\n\nfunction hashFn(css) {\n  return scopedName(name) {\n    return name + '_' + Math.round(+new Date()/1000);\n  }\n}\n```\n\n### Add PostCSS plugins\n\n```js\nconst autoprefixer = require('autoprefixer');\nconst pse = require('postcss-scopeify-everything');\nconst scopeify = pse.api({ plugins: [autoprefixer()] });\nconst getCss = pse.getCss;\n\nconst css = '.prefix { display: flex; }';\nconst scopeified = scopeify(css).sync();\nconsole.log(scopeified);\n/* { elements: {},\n  classes: { prefix: 'prefix_gQhnX' },\n  ids: {},\n  keyframes: {} }\n*/\nconsole.log(getCss(scopeified));\n// .prefix_gQhnX { display: -webkit-box; display: -ms-flexbox; display: flex; }\n```\n\n### No scope\n\n```js\nconst pse = require('postcss-scopeify-everything');\nconst scopeify = pse.api({ scopeifyFn: () =\u003e name =\u003e name });\nconst getCss = pse.getCss;\n\nconst css = '.cool { display: flex; } div { font-size: 12px; }';\nconst scopeified = scopeify(css).sync();\nconsole.log(scopeified);\n/* { elements: { div: 'div_el' },\n  classes: { cool: 'cool' },\n  ids: {},\n  keyframes: {} }\n*/\nconsole.log(getCss(scopeified));\n// .cool { display: flex; }\n// .div_el { font-size: 12px; }\n```\n\n### Convert an element into a class with a different postfix.\n\nBy default, anytime an element is converted into a class, a special postfix is attached to avoid\nclass name conflicts, we can override this behavior to set a custom postfix using the\n`scopeifyElFn` option.\n\n```js\nconst pse = require('postcss-scopeify-everything');\nconst scopeify = pse.api({ scopeifyElFn: name =\u003e name + '_special' });\nconst getCss = pse.getCss;\n\nconst css = 'table { width: 100%; } .table { border: 1px solid black; }';\nconst scopeified = scopeify(css).sync();\nconsole.log(scopeified);\n/* { elements: { table: 'table_special_gQhnX' },\n  classes: { table: 'table_gQhnX' },\n  ids: {},\n  keyframes: {} }\n*/\nconsole.log(getCss(scopeified));\n// .table_special_gQhnX { width: 100%; }\n// .table_gQhnX { border: 1px solid black; }\n```\n\n### Wildcard selector\n\nThe asterisk selector will be converted into a class using a special name `__asterisk`.\n\n```js\nconst css = '* { font-size: 12px; }';\nconst scopeified = scopeify(css).sync();\nconsole.log(scopeified);\n/* { elements: { '*': '__asterisk_gQhnX' },\n  classes: {},\n  ids: {},\n  keyframes: {} }\n*/\nconsole.log(getCss(scopeified));\n// .__asterisk_gQhnX { font-size: 12px; }\n```\n\nUse your own wildcard name\n\n```js\nconst pse = require('postcss-scopeify-everything');\nconst scopeify = pse.api({ asteriskName: '__wildcard__' });\nconst getCss = pse.getCss;\n\nconst css = '* { font-size: 12px; }';\nconst scopeified = scopeify(css).sync();\nconsole.log(scopeified);\n/* { elements: { '*': '__wildcard__gQhnX' },\n  classes: {},\n  ids: {},\n  keyframes: {} }\n*/\nconsole.log(getCss(scopeified));\n// .__wildcard__gQhnX { font-size: 12px; }\n```\n\nOptions\n-------\n\n* plugins (Array): adds PostCSS plugins before the scopeify plugin\n* scopeifyFn (Function): the function that hashes the identifier name\n* scopeifyElFn (Function): the function that converts an element name to a class name\n* asteriskName (Function|String): the string that is used for the wildcard selector `*`\n* ids (Boolean): determines whether or not to disable scoping `ids`\n* elements (Boolean): determines whether or not to disable scoping `elements`\n* classes (Boolean): determines whether or not to disable scoping `classes`\n* keyframes (Boolean): determines whether or not to disable scoping `keyframes`\n* fontFaces (Boolean): determines whether or not to disable scoping `fontFaces`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneurosnap%2Fpostcss-scopeify-everything","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneurosnap%2Fpostcss-scopeify-everything","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneurosnap%2Fpostcss-scopeify-everything/lists"}