{"id":15503115,"url":"https://github.com/johno/rework-class-prefix","last_synced_at":"2025-04-11T18:50:27.743Z","repository":{"id":22542529,"uuid":"25883406","full_name":"johno/rework-class-prefix","owner":"johno","description":"Add a class prefix to an import in order to sandbox CSS styling.","archived":false,"fork":false,"pushed_at":"2017-09-28T16:08:32.000Z","size":215,"stargazers_count":1,"open_issues_count":2,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-19T17:31:25.594Z","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/johno.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-28T18:17:36.000Z","updated_at":"2024-05-21T08:25:05.000Z","dependencies_parsed_at":"2022-08-21T07:00:50.922Z","dependency_job_id":null,"html_url":"https://github.com/johno/rework-class-prefix","commit_stats":null,"previous_names":["johnotander/rework-class-prefix"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johno%2Frework-class-prefix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johno%2Frework-class-prefix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johno%2Frework-class-prefix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johno%2Frework-class-prefix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johno","download_url":"https://codeload.github.com/johno/rework-class-prefix/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248463854,"owners_count":21108165,"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-02T09:12:13.631Z","updated_at":"2025-04-11T18:50:27.713Z","avatar_url":"https://github.com/johno.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rework-class-prefix [![Build Status](https://travis-ci.org/johnotander/rework-class-prefix.svg?branch=master)](https://travis-ci.org/johnotander/rework-class-prefix)\n\nAdd a class prefix to further sandbox CSS styling for third-party imports.\n\nThis comes in handy when you want to import two different CSS modules that might\nhave conflictings styles. For example, if module A and module B both have a\n`.media` class selector that have different use cases, you can run them through\n`rework-class-prefix` and result in something like `.a-media` and `.b-media`.\n\n__Example input__\n\n```css\n.grid { /* ... */ }\n.grid-row { /* ... */ }\n.grid-row-col { /* ... */ }\n```\n\n__Example output__\n`classPrefix('flx-')`\n```css\n.flx-grid { /* ... */ }\n.flx-grid-row { /* ... */ }\n.flx-grid-row-col { /* ... */ }\n```\n\n## Installation\n\n```\nnpm install --save rework-class-prefix\n```\n\n## Usage\n\n```javascript\nvar fs        = require('fs'),\n    rework    = require('rework'),\n    classPrfx = require('rework-class-prefix');\n\nvar css = fs.readFileSync('css/my-file.css', 'utf8').toString();\nvar out = rework(css).use(classPrfx('my-prefix-')).toString();\n```\n#### In a gulpfile\n\n```js\nvar gulp        = require('gulp'),\n    name        = require('gulp-rename'),\n    rework      = require('gulp-rework'),\n    reworkNPM   = require('rework-npm'),\n    classPrefix = require('rework-class-prefix');\n\ngulp.task('css', function() {\n  return gulp.src('index.css')\n    .pipe(rework(reworkNPM(), classPrefix('prfx-')))\n    .pipe(name('index-prefixed.css'))\n    .pipe(gulp.dest('css'));\n});\n```\n\n### Using the `ignored` option\n\n```javascript\nvar fs        = require('fs'),\nrework    = require('rework'),\nclassPrfx = require('rework-class-prefix');\n\nvar css = fs.readFileSync('css/my-file.css', 'utf8').toString();\nvar out = rework(css).use(\n            classPrfx('my-prefix-', { ignored: [/\\.ng-/, 'some-class-to-ignore'] })\n          ).toString();\n```\n\n## License\n\nMIT\n\n## Acknowledgements\n\n* Leverages \u003chttps://github.com/intesso/rework-walk\u003e.\n* Built on top of \u003chttps://github.com/reworkcss/rework\u003e.\n\n## Contributing\n\n1. Fork it\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Add some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create new Pull Request\n\nCrafted with \u003c3 by [John Otander](http://johnotander.com) ([@4lpine](https://twitter.com/4lpine)).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohno%2Frework-class-prefix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohno%2Frework-class-prefix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohno%2Frework-class-prefix/lists"}