{"id":21935419,"url":"https://github.com/zeecoder/exporting-css-loaders","last_synced_at":"2026-04-18T01:32:32.269Z","repository":{"id":66155353,"uuid":"114543685","full_name":"ZeeCoder/exporting-css-loaders","owner":"ZeeCoder","description":"An experiment with webpack loaders that operate on css and contribute to a final exported module.","archived":false,"fork":false,"pushed_at":"2017-12-17T17:22:53.000Z","size":28,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-26T07:45:56.057Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/ZeeCoder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2017-12-17T14:39:28.000Z","updated_at":"2018-03-31T16:22:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"f4f7fbb0-e340-495e-b877-7c13781ada3b","html_url":"https://github.com/ZeeCoder/exporting-css-loaders","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ZeeCoder/exporting-css-loaders","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZeeCoder%2Fexporting-css-loaders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZeeCoder%2Fexporting-css-loaders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZeeCoder%2Fexporting-css-loaders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZeeCoder%2Fexporting-css-loaders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ZeeCoder","download_url":"https://codeload.github.com/ZeeCoder/exporting-css-loaders/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZeeCoder%2Fexporting-css-loaders/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31953513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"ssl_error","status_checked_at":"2026-04-18T00:39:20.671Z","response_time":62,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2024-11-29T00:19:58.948Z","updated_at":"2026-04-18T01:32:32.262Z","avatar_url":"https://github.com/ZeeCoder.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Exporting CSS Loaders\n\nThis is a prototype of an idea on how css webpack loaders could work in the\nfuture in a way that they contribute to the same exported module.\n\n## How to start\n\nTo check out the prototype in action, run the following:\n\n* `yarn`\n* `npx webpack --watch`\n\nThen open the `web/index.html` file.\n(Results will be in the console.)\n\n## Summary\n\nAssuming \"first-loader\" and \"second-loader\" is in the chain of loaders, the\nfollowing should work:\n\n```js\nimport css, { first, second } from \"styles.css\";\n\n// Where \"css\" is a css string, processed by both loaders, and\n// \"first\" / \"second\" are loader-specific exports, like stats, JS objects, etc.\n```\n\n## Webpack Config\n\nTo allow such functionality, loaders must agree to expect and pass on a\nstandardised meta object, which contains the processed css and parts of the\nmodule that'll eventually be returned at the end of the loader chain.\n\nIn order for this to work, we also need an extra loader at the very end, which\ncreates the js module from the parts, and returns it as a string, like so:\n\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\"css-exports-loader\", \"second-loader\", \"first-loader\"]\n      }\n    ];\n  }\n}\n```\n\n## Outstanding Issues\n\n* The need for an \"css-exports-loader\": if the loader can't detect whether it's\n  the last one in the loader-chain, then we need to make the above described\n  \"css-exports-loader\". (Otherwise all css-loaders could have the capability to\n  return the actual js module string, if it knows it's the last one in the chain.)\n* This prototype allows loaders work in the same scope, which means name\n  collisions and conflicts are highly likely. This is due to the fact, that the\n  final loader simply concatenates all the module parts added by previous loaders.\n* It would be nice to be able to read other loaders' output in following ones.\n  For example: a loader might need the classmap generated by the css-loader in\n  modules mode.\n* if the css-loader runs in module:true mode, the classmap will no longer be\n  exported as default.\n\n## Goals\n\n* Make it possible for multiple css loaders to contribute to the same js module\n  exports\n* Make it possible for loaders to access each others' output. (A loader running\n  after another one might do things differently based on stats from the previous\n  one in the chain.)\n* Avoid conflicts that may arise if the css loaders add not only exports, but\n  other local JS code to the module string.\n* Avoid named export conflicts: if two loaders add the same named export,\n  they'll collide.\n* Make it possible to decide which module's export should be the default one.\n  (Would be very useful to configure the css-loader to export it's classmaps as\n  defaults, as it does it currently.)\n* Make the `meta =\u003e js module string` conversion automatic when webpack reaches\n  the last loader in the chain, instead of using the `css-exports-loader`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeecoder%2Fexporting-css-loaders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeecoder%2Fexporting-css-loaders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeecoder%2Fexporting-css-loaders/lists"}