{"id":13630942,"url":"https://github.com/johno/immutable-css","last_synced_at":"2025-04-09T20:08:39.380Z","repository":{"id":28524658,"uuid":"32041481","full_name":"johno/immutable-css","owner":"johno","description":"A css linter for immutable selectors","archived":false,"fork":false,"pushed_at":"2016-07-22T16:53:31.000Z","size":973,"stargazers_count":375,"open_issues_count":5,"forks_count":11,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-09T20:08:33.970Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://immutablecss.com","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":"2015-03-11T21:12:56.000Z","updated_at":"2025-03-23T00:57:25.000Z","dependencies_parsed_at":"2022-08-24T07:00:24.286Z","dependency_job_id":null,"html_url":"https://github.com/johno/immutable-css","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johno%2Fimmutable-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johno%2Fimmutable-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johno%2Fimmutable-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johno%2Fimmutable-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johno","download_url":"https://codeload.github.com/johno/immutable-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103873,"owners_count":21048245,"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-08-01T22:02:04.045Z","updated_at":"2025-04-09T20:08:39.361Z","avatar_url":"https://github.com/johno.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg width=\"360\" src=\"https://rawgit.com/johnotander/immutable-css/master/media/logo.png\" alt=\"immutable-css\"\u003e\n\u003c/h1\u003e\n\n[![Build Status](https://secure.travis-ci.org/johnotander/immutable-css.png?branch=master)](https://travis-ci.org/johnotander/immutable-css) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://github.com/feross/standard)\n\nBest practices suggest avoiding overriding styles from vendor libraries to prevent unwanted side effects. Base library styles should not be altered – or as Harry Roberts describes, base styles should be treated as [Immutable CSS](http://csswizardry.com/2015/03/immutable-css/).\n\nSee the interactive [web app](http://immutablecss.com).\n\n## Installation\n\n```bash\nnpm install --save immutable-css\n```\n\n## Usage\n\n`immutableCss.processFiles(immutableSourceCss, customCss, options)` takes two stylesheet paths, and ensures the custom CSS doesn't override any selectors contained within the immutable source.\nThis is typically best when comparing vendor CSS ([Bootstrap](http://getbootstrap.com), [Tachyons](http://tachyons.io), [Basscss](http://basscss.com), etc.) to your app's customizations.\n\n```js\nvar immutableCss = require('immutable-css')\n\nimmutableCss.processFiles('css/vendor.css', 'css/app.css')\n// =\u003e [...]\n\n```\n\n`immutableCss.processGlob(cssGlob, options)` takes a glob that matches CSS files and ensures that no stylesheet overrides selectors contained within another.\nThis is useful to ensure that CSS partials aren't mixing concerns by mutating selectors contained within another file.\n\n```js\nvar immutableCss = require('immutable-css')\n\nimmutableCss.processGlob('src/css/**/*.css', { verbose: true })\n```\n\n### Using with [PostCSS](https://github.com/postcss/postcss)\n\nImmutable CSS detects mutations among files by leveraging PostCSS sourcemaps. It is also best used as a PostCSS plugin in tandem with `postcss-import` and `postcss-reporter`.\n\n```js\nvar fs = require('fs')\nvar postcss = require('postcss')\nvar import = require('postcss-import')\nvar reporter = require('postcss-reporter')\nvar immutableCss = require('immutable-css')\n\nvar css = fs.readFileSync('styles.css', 'utf8')\n\nvar mutations = postcss([import(), immutableCss(), reporter()])\n                  .process(css, { from: 'styles.css' })\n```\n\n### Using with [Gulp](http://gulpjs.com)\n\n```js\nvar gulp = require('gulp')\nvar postcss = require('gulp-postcss')\nvar import = require('postcss-import')\nvar reporter = require('postcss-reporter')\nvar immutableCss = require('immutable-css')\n\ngulp.task('immutable', function () {\n  var processors = [\n    import,\n    immutableCss,\n    // If you want Immutable CSS to halt the gulp pipline if there are any warnings\n    // then set throwError to true\n    reporter({clearMessages: true, throwError: false})\n  ]\n  \n  gulp.src('assets/css/base.css')\n    .pipe(postcss(processors))\n    .pipe(gulp.dest('dist/css'))\n})\n```\n\n#### Input\n\n```css\n@import 'basscss';\n\n.button {}\n.left {}\n.something-else {}\n```\n\n#### Output\n\n```sh\n⚠  .button was mutated 2 times\n[line 93, col 1]: /css/basscss.css\n[line 3, col 1]: /css/custom.css\n[immutable-css]\n⚠  .left was mutated 2 times\n[line 291, col 1]: /css/basscss.css\n[line 4, col 1]: /css/custom.css\n[immutable-css]\n```\n\n### Options\n\n* `strict` (Boolean): Whether class mutations are allowed in the same file. Default: `false`.\n* `ignoredClasses` (Array): List of classes to ignore for mutation violations. \u003cbr\u003eEx: `['.some-mutable-class']`\n* `immutableClasses` (Array): List of classes to check against. \u003cbr\u003eEx: `['.button', '.foobar']`\n* `immutablePrefixes` (Array): List of prefix regexes that are immutable. \u003cbr\u003eEx: `[/\\.u\\-/, /\\.util\\-/]`\n* `callback` (Function): Callback that receives a mutations object. \u003cbr\u003eEx: `function (mutations) { console.log(mutations) }`\n* `verbose` (Boolean): Whether mutations are logged (defaults to true with PostCSS).\n\n#### Using the callback\n\nImmutable CSS accepts an optional callback, which returns the mutations hash. The key is the mutated class name, the value is an array of mutating filenames.\n\n```js\npostcss([\n  import(),\n  immutableCss({ ignoredClasses: ['.button'] }, function(mutations) {\n    console.log(mutations)\n    // =\u003e { '.foobar': [] }\n  })\n]).process(css, { from: cssFile })\n```\n\n### Using the [immutable-css-cli](https://github.com/johnotander/immutable-css-cli)\n\n```sh\nnpm i -g immutable-css-cli\n```\n\n```sh\nimmutable-css css/main.css\n⚠  .button was mutated 2 times\n[line 93, col 1]: /css/_basscss.css\n[line 11, col 1]: /css/_custom.css\n[immutable-css]\n⚠  .left was mutated 2 times\n[line 291, col 1]: /css/_basscss.css\n[line 15, col 1]: /css/_custom.css\n[immutable-css]\n```\n\n\u003chttps://github.com/johnotander/immutable-css-cli\u003e\n\n## Dependencies\n\n* \u003chttps://github.com/postcss/postcss\u003e\n* \u003chttps://github.com/johnotander/get-css-classes\u003e\n* \u003chttps://github.com/css-modules/css-selector-tokenizer\u003e\n\n## Related Reading\n\n* \u003chttp://csswizardry.com/2015/03/immutable-css/\u003e\n* \u003chttp://csswizardry.com/2012/06/the-open-closed-principle-applied-to-css/\u003e\n* \u003chttp://www.jon.gold/2015/07/functional-css/\u003e\n* \u003chttp://eng.wealthfront.com/2013/08/functional-css-fcss.html\u003e\n* \u003chttp://www.basscss.com/docs/reference/principles/#immutable-utilities\u003e\n\n## License\n\nMIT\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 [@jxnblk](https://twitter.com/jxnblk) \u0026 [@4lpine](https://twitter.com/4lpine).\n\n***\n\n\u003e This package was initially generated with [yeoman](http://yeoman.io) and the [p generator](https://github.com/johnotander/generator-p.git).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohno%2Fimmutable-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohno%2Fimmutable-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohno%2Fimmutable-css/lists"}