{"id":21502486,"url":"https://github.com/tzachbon/css-webpack-plugin-example","last_synced_at":"2026-04-04T21:33:17.571Z","repository":{"id":100361085,"uuid":"389723741","full_name":"tzachbon/css-webpack-plugin-example","owner":"tzachbon","description":"A short guide for creating a CSS Webpack loader and plugin.","archived":false,"fork":false,"pushed_at":"2021-09-12T07:32:33.000Z","size":1084,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-03T15:28:53.186Z","etag":null,"topics":["css","html","javascript","preprocessor","react","sass","stylable","testing","typescript","vue","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/tzachbon.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}},"created_at":"2021-07-26T17:57:59.000Z","updated_at":"2021-09-12T07:32:35.000Z","dependencies_parsed_at":"2023-05-14T03:15:43.947Z","dependency_job_id":null,"html_url":"https://github.com/tzachbon/css-webpack-plugin-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tzachbon/css-webpack-plugin-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzachbon%2Fcss-webpack-plugin-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzachbon%2Fcss-webpack-plugin-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzachbon%2Fcss-webpack-plugin-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzachbon%2Fcss-webpack-plugin-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tzachbon","download_url":"https://codeload.github.com/tzachbon/css-webpack-plugin-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzachbon%2Fcss-webpack-plugin-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31415110,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T20:09:54.854Z","status":"ssl_error","status_checked_at":"2026-04-04T20:09:44.350Z","response_time":60,"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":["css","html","javascript","preprocessor","react","sass","stylable","testing","typescript","vue","webpack"],"created_at":"2024-11-23T18:15:21.754Z","updated_at":"2026-04-04T21:33:17.545Z","avatar_url":"https://github.com/tzachbon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Webpack Plugin - Style the modern web\n​\n_Styling a modern application is no simple task - traditionally it is done by serving HTML with CSS for styling, and sprinkling the web app with Javascript to get the job done.\nThe question is how to modernize the approach of setting up an app, and the answer is to use a bundler like Webpack and JavaScript framework / library like React. But how do we handle the **CSS**, and why is it not that simple as you would expect?_\n\n## Agenda - \n* [Part 1: Understanding the issue with native CSS.](./docs/native-css-issue.md)\n* [Part 2: Setting up our webpack application without a CSS plugin.](./docs/setup-the-solution.md)\n* [Part 3: Writing the Loader.](./docs/css-loader.md)\n* [Part 4: Writing advanced Plugin.](./docs/css-plugin.md)\n​\n\u003e If you are here just for implementation information, skip to part 3.\n​\n\u003e Disclaimer - This is not a production-ready plugin. To see one that is, check out what my team and I are working on: [Stylable](https://stylable.io/)\n​\n## Development\n​\nThis project is written as a Yarn workspace with TypeScript, and contains two main packages:\n​\n```\n- css-loader\n- css-plugin\n```\n​\nFor examples of different frameworks, see [`examples`](./examples).\n​\n### Bootstrap\n​\n```bash\nyarn\nyarn build\n```\n​\n### Testing\n​\nThe package `css-loader` has integration tests to ensure the correct output is received from the loader.\n​\nInside the `css-plugin` package is an e2e test that creates a project, serves it with playwright, and makes sure that the UI works according to the output.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftzachbon%2Fcss-webpack-plugin-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftzachbon%2Fcss-webpack-plugin-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftzachbon%2Fcss-webpack-plugin-example/lists"}