{"id":14976499,"url":"https://github.com/bmatcuk/mock-css-modules","last_synced_at":"2025-10-27T20:31:53.979Z","repository":{"id":3806236,"uuid":"50961253","full_name":"bmatcuk/mock-css-modules","owner":"bmatcuk","description":"Mock CSS Modules for testing","archived":false,"fork":false,"pushed_at":"2022-12-30T20:54:42.000Z","size":160,"stargazers_count":28,"open_issues_count":8,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-30T08:56:39.570Z","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/bmatcuk.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":"2016-02-03T00:08:51.000Z","updated_at":"2023-08-22T00:34:40.000Z","dependencies_parsed_at":"2023-01-13T12:45:44.562Z","dependency_job_id":null,"html_url":"https://github.com/bmatcuk/mock-css-modules","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmatcuk%2Fmock-css-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmatcuk%2Fmock-css-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmatcuk%2Fmock-css-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmatcuk%2Fmock-css-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bmatcuk","download_url":"https://codeload.github.com/bmatcuk/mock-css-modules/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238553264,"owners_count":19491397,"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-09-24T13:53:59.109Z","updated_at":"2025-10-27T20:31:53.649Z","avatar_url":"https://github.com/bmatcuk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Release](https://img.shields.io/npm/v/mock-css-modules.svg)\n[![Build Status](https://travis-ci.com/bmatcuk/mock-css-modules.svg?branch=master)](https://travis-ci.com/bmatcuk/mock-css-modules)\n[![codecov.io](https://img.shields.io/codecov/c/github/bmatcuk/mock-css-modules.svg?branch=master)](https://codecov.io/github/bmatcuk/mock-css-modules?branch=master)\n\n# mock-css-modules\n[Webpack](https://webpack.github.io/) loaders are great. With them, you can\n`require()` just about any file and the loaders will take care of transpiling\ninto javascript.\n\nCSS Modules are great because you can write CSS for each of your components\nwithout worrying about rules from one stepping on the rules of another. The\naforementioned webpack loaders (the [css-loader](https://github.com/webpack/css-loader)\nin particular) will let you `require()` your CSS and return a nice map of\noriginal class names to generated CSS Module class names so you can do\nsomething like:\n\n```javascript\nimport styles from './styles.css';\nimport {render} from 'react-dom';\n\nrender(\u003ch1 class={styles.myClass}\u003eHello, World!\u003c/h1\u003e, document.body);\n```\n\nThe problem is testing... your testing toolchain ([mocha](https://mochajs.org/)\nperhaps) doesn't know how to require CSS files. This inevitably leads to a\nsyntax error while node tries to parse the CSS as if it was javascript.\n\n## How Can We Fix This?\nThere are several solutions to this problem. The most common solutions either\nattempt to parse the CSS faithfully or attempt to ignore the CSS `require()`\naltogether.\n\nIn the first case, you're just complicating things and wasting time. In my\nautomated tests, I don't _need_ to know that `myClass` is going to become\n`_23_aKvs-b8bW2Vg3fwHozO`, so why should I waste the time to parse the CSS to\nfind that out? Further, if there's an error in my CSS, the parsing will fail\nand cause my component test to fail... is that where the failure belongs? I\ndunno... maybe, maybe not...\n\nIn the second case, all of my class names become empty strings in my automated\ntests. While it's true that I don't need to know _exactly_ what my class names\nwill become after transpiling, I might want to be able to test that there is\n_some_ class and I can't do that if just make my CSS `require()`s return null.\n\n### mock-css-modules' solution\nmock-css-modules' solution is somewhere between the former and the latter.\nmock-css-modules registers a handler for requiring CSS files. When node comes\nupon a `require()` for a CSS file, it will run mock-css-modules' handler which\nwill return a [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)\nobject. This Proxy object will trap getters and return the name of the\nrequested property as a string. So, for example:\n\n```javascript\nimport styles from './styles.css';\n\nstyles.myClass\n=\u003e \"myClass\"\n\nstyles.anotherClass\n=\u003e \"anotherClass\"\n\netc ...\n```\n\nThis gives all of our classes names without the overhead of parsing the actual\nCSS files. And since code that is using CSS Modules shouldn't be making any\nassumptions about the names of the generated classes, these values are just as\nvalid as the real ones so they shouldn't cause any issues.\n\n## Installation\nInstall with npm:\n\n```bash\nnpm install --save-dev mock-css-modules\n```\n\n## Usage\nSimply `require(\"mock-css-modules\")` before any CSS files and you'll be rockin'.\nBy default, mock-css-modules will handle `require()`d .css files. If your\nproject has some other extensions (such as .sass, .scss, etc), you'll need to\nregister handlers for those, too:\n\n```javascript\nvar mockCssModules = require(\"mock-css-modules\");\n\nmockCssModules.register(['.sass', '.scss', ...]);\n```\n\nUnfortunately, this means that if you are taking advantage of webpack's\nresolvers to `require()` files without extensions, it won't work. You should\nuse extensions for your CSS files.\n\n### Mocha\nIf you are using mocha to run your tests, you can use mock-css-modules from the\ncommand line:\n\n```bash\nmocha --require mock-css-modules ...\n```\n\nIf you need to handle additional extensions, copy the two lines above into a\nfile called `test-setup.js`, for example, and require the file instead of\nmock-css-modules directly:\n\n```bash\nmocha --require test-setup.js ...\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmatcuk%2Fmock-css-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbmatcuk%2Fmock-css-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmatcuk%2Fmock-css-modules/lists"}