{"id":16815487,"url":"https://github.com/mario-jerkovic/flush-css-chunks-webpack-plugin","last_synced_at":"2025-04-11T02:11:37.227Z","repository":{"id":57239085,"uuid":"99499982","full_name":"mario-jerkovic/flush-css-chunks-webpack-plugin","owner":"mario-jerkovic","description":"Generates CSS asset map from chunks","archived":false,"fork":false,"pushed_at":"2018-04-04T10:48:18.000Z","size":93,"stargazers_count":12,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T02:11:32.157Z","etag":null,"topics":["webpack","webpack-plugin"],"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/mario-jerkovic.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":"2017-08-06T16:42:10.000Z","updated_at":"2018-09-25T02:33:42.000Z","dependencies_parsed_at":"2022-09-05T08:21:37.996Z","dependency_job_id":null,"html_url":"https://github.com/mario-jerkovic/flush-css-chunks-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mario-jerkovic%2Fflush-css-chunks-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mario-jerkovic%2Fflush-css-chunks-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mario-jerkovic%2Fflush-css-chunks-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mario-jerkovic%2Fflush-css-chunks-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mario-jerkovic","download_url":"https://codeload.github.com/mario-jerkovic/flush-css-chunks-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248328161,"owners_count":21085261,"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":["webpack","webpack-plugin"],"created_at":"2024-10-13T10:34:32.897Z","updated_at":"2025-04-11T02:11:37.197Z","avatar_url":"https://github.com/mario-jerkovic.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003cimg width=\"500\" height=\"200\"\n    src=\"https://cdn.rawgit.com/mario-jerkovic/flush-css-chunks-webpack-plugin/22d6154e/flush_css.png\"\u003e\n  \n  \u003ch1\u003eFlush CSS Chunks Webpack Plugin\u003c/h1\u003e\n  \u003cp\u003eGenerates CSS hash for mapping between Webpack chunks and CSS chunks.\u003c/p\u003e\n\u003c/div\u003e\n\n # Installation\n \n```bash\nyarn add flush-css-chunks-webpack-plugin\n```\nor\n```bash\nnpm install flush-css-chunks-webpack-plugin\n```\n\n## Introduction\n\n If your using awesome [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)\n or [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import)\n and for some reason you cannot implement SSR than this plugin is what you need.\n \n It maps trough webpack stats and generates ```cssHash```:\n \n ```javascript\nwindow.__CSS_CHUNKS__ = {\n    Foo: '/static/Foo.css',\n    Bar: '/static/Bar.css'\n}\n```\n```cssHash``` will be injected in your ```.js``` or ```hot-update.js``` files \nwhich are generated by webpack so that means it also works with Hot module replacement (HMR) :thumbsup:\n\n # Usage\n \n```javascript\nconst FlushCSSChunksWebpackPlugin = require('flush-css-chunks-webpack-plugin');\n\nconst config = {\n    entry: '...',\n    output: {},\n    modules: {},\n    plugins: [\n        new FlushCSSChunksWebpackPlugin({\n            assetPath: '/asset/static/', // defaults to output.publichPath defined in webpack.config\n            entryOnly: true, // defaults to false,\n            entries: ['common'] // defaults to null\n        })\n    ]\n};\n```\n\n- **assetPath** - ***default: null*** By default plugin uses output.publichPath defined in webpack.config to generate\nasset mapping but if you need custom asset path you can use this property\n- **entryOnly** - ***default: false*** By default plugin injects the ```cssHash``` to every ```.js``` \nfile produced by webpack as this enables hot swap mapping, if set to ```true``` plugin will only inject the mapping\nin the initial ```.js``` bundle (use only for **PRODUCTION**)\n- **entries** - ***default: null*** By default, if ```entryOnly``` is specified, plugin injects the ```cssHash``` into every entry chunk. Using this option you can specify entry chunks in which the CSS mapping will be injected. This is useful if you have common chunks that are already loaded on the page. **Note:** This only works if ```entryOnly``` is set to ```true```, if it is set to ```false```, CSS mapping will be injected in every chunk.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmario-jerkovic%2Fflush-css-chunks-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmario-jerkovic%2Fflush-css-chunks-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmario-jerkovic%2Fflush-css-chunks-webpack-plugin/lists"}