{"id":16182747,"url":"https://github.com/seveves/ng-inline-styles-loader","last_synced_at":"2025-04-01T23:31:05.692Z","repository":{"id":77532917,"uuid":"81936886","full_name":"seveves/ng-inline-styles-loader","owner":"seveves","description":"A simple webpack loader for inlined stylesheets of angular components","archived":false,"fork":false,"pushed_at":"2017-02-28T11:37:33.000Z","size":22,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-22T16:04:44.042Z","etag":null,"topics":["angular","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":"","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/seveves.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-14T11:06:33.000Z","updated_at":"2017-07-14T19:39:39.000Z","dependencies_parsed_at":"2023-03-12T00:55:18.121Z","dependency_job_id":null,"html_url":"https://github.com/seveves/ng-inline-styles-loader","commit_stats":{"total_commits":11,"total_committers":1,"mean_commits":11.0,"dds":0.0,"last_synced_commit":"46e7887b7e1d360c13cb41f785294b77412e663b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seveves%2Fng-inline-styles-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seveves%2Fng-inline-styles-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seveves%2Fng-inline-styles-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seveves%2Fng-inline-styles-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seveves","download_url":"https://codeload.github.com/seveves/ng-inline-styles-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246670481,"owners_count":20814993,"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":["angular","webpack","webpack-loader"],"created_at":"2024-10-10T06:43:47.493Z","updated_at":"2025-04-01T23:31:05.660Z","avatar_url":"https://github.com/seveves.png","language":"JavaScript","readme":"# ng-inline-styles-loader\n[![codecov](https://codecov.io/gh/seveves/ng-inline-styles-loader/branch/master/graph/badge.svg)](https://codecov.io/gh/seveves/ng-inline-styles-loader)\n[![Build Status](https://travis-ci.org/seveves/ng-inline-styles-loader.svg?branch=master)](https://travis-ci.org/seveves/ng-inline-styles-loader)\n\nA simple webpack loader for inlined stylesheets of angular components (designed for people who like small components with inlined css).\n\nCurrently this loader supports minification by using [clean-css](https://github.com/jakubpawlowicz/clean-css) and adds vendor prefixes with [autoprefixer](https://github.com/postcss/autoprefixer).\n\n\u003e **Notice:** This loader works with AOT compiled components but that is very experimental (but there are unit tests!)\n\n## example\nFor example the following angular component ...\n```ts\n@Component({\n  selector: \"foo-bar\",\n  styles: [ \":fullscreen a { display: flex }\"],\n  template: \"\u003cdiv\u003eFoo Bar\u003c/div\u003e\"\n})\nexport class FooBarComponent {}\n```\n... would result in same same but different:\n```ts\n@Component({\n  selector: \"foo-bar\",\n  styles: [\":-webkit-full-screen a{display:flex}:-moz-full-screen a{display:flex}:-ms-fullscreen a{display:flex}:fullscreen a{display:flex}\"],\n  template: \"\u003cdiv\u003eFoo Bar\u003c/div\u003e\"\n})\nexport class FooBarComponent {}\n```\n\n## install\n`npm install ng-inline-styles-loader --save-dev`\n\n## usage\nchain the `ng-inline-styles-loader` to your currently used typescript loader:\n\n```js\nloaders: ['awesome-typescript-loader', 'ng-inline-styles-loader'],\n```\n\nwith options (disables minfication and prefixing ... very senseless example IMHO):\n\n```js\nloaders: ['awesome-typescript-loader', 'ng-inline-styles-loader?minify=false\u0026prefix=false'],\n```\n\nwith autoprefixer options (no prefixes for flexbox properties):\n\n```js\nloaders: ['awesome-typescript-loader', 'ng-inline-styles-loader?flexbox=false'],\n```\n\nYou can see all available options for autoprefixer [here](https://github.com/postcss/autoprefixer#options) (but of course I have not tested all of them).\n\n## bugs\nI've already added some unit tests that worked for my current angular projects (very large non-optimized non-aot-compiled bundles with a f**ton of components) but I'm really sure that my regular expressions do suck.\nSo feel free to add bug reports with your actual angular component and the expected result.\nPull requests are also accepted if I like your avatar.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseveves%2Fng-inline-styles-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseveves%2Fng-inline-styles-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseveves%2Fng-inline-styles-loader/lists"}