{"id":20247595,"url":"https://github.com/design4pro/angular","last_synced_at":"2026-05-08T12:34:59.893Z","repository":{"id":37072922,"uuid":"463812159","full_name":"design4pro/angular","owner":"design4pro","description":"JSS integration with Angular","archived":false,"fork":false,"pushed_at":"2023-03-06T20:40:31.000Z","size":1583,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-15T23:34:21.719Z","etag":null,"topics":["angular","css-in-js","css-in-ts","jss"],"latest_commit_sha":null,"homepage":"https://design4pro.github.io/angular/","language":"TypeScript","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/design4pro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"custom":["https://www.paypal.me/rafalwolak"]}},"created_at":"2022-02-26T09:43:53.000Z","updated_at":"2022-11-25T15:33:50.000Z","dependencies_parsed_at":"2023-07-17T02:08:23.968Z","dependency_job_id":"d29f1713-43de-44a3-885c-1afc011e8e61","html_url":"https://github.com/design4pro/angular","commit_stats":{"total_commits":98,"total_committers":3,"mean_commits":"32.666666666666664","dds":0.5102040816326531,"last_synced_commit":"00f608f6f99391bdeb6a7797e2508214754c70c4"},"previous_names":["design4pro/angular-jss"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/design4pro%2Fangular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/design4pro%2Fangular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/design4pro%2Fangular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/design4pro%2Fangular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/design4pro","download_url":"https://codeload.github.com/design4pro/angular/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241693545,"owners_count":20004444,"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","css-in-js","css-in-ts","jss"],"created_at":"2024-11-14T09:38:05.726Z","updated_at":"2026-05-08T12:34:54.844Z","avatar_url":"https://github.com/design4pro.png","language":"TypeScript","funding_links":["https://www.paypal.me/rafalwolak"],"categories":[],"sub_categories":[],"readme":"# NgStyled\n\n\u003cimg width=\"20%\" height=\"20%\" src=\"./logo.svg\"\u003e\n\n\u003e [JSS](https://cssinjs.org/) integration with Angular\n\n[![Version](https://img.shields.io/npm/v/@design4pro/ng-styled.svg?style=flat-square)](https://npmjs.org/package/@design4pro/ng-styled)\n[![License](https://img.shields.io/npm/l/@design4pro/ng-styled.svg?style=flat-square)](https://github.com/design4pro/ng-styled/jss/blob/master/LICENSE.md)\n[![Downloads](https://img.shields.io/npm/dm/@design4pro/ng-styled.svg?style=flat-square)](https://npmjs.org/package/@design4pro/ng-styled)\n[![Size](https://img.shields.io/bundlephobia/minzip/@design4pro/ng-styled.svg?style=flat-square)](https://npmjs.org/package/@design4pro/ng-styled)\n[![design4pro](https://img.shields.io/badge/@-design4pro-383636?style=flat-square\u0026labelColor=8f68d4)](https://github.com/design4pro/)\n\n## Features\n\n- [x] Component decorator `Styled`\n- [x] Theming with `Theme`\n- [ ] Theme switching (dark/light mode)\n- [x] Server Side Rendering with Angular Universal\n- [ ] Critical CSS\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n\n## Installation\n\nUsing `npm`:\n\n```sh\nnpm install @design4pro/ng-styled\n```\n\nor using `yarn`:\n\n```sh\nyarn add @design4pro/ng-styled\n```\n\n## Usage\n\nInject the `StyledModule` module into your root module:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { StyledModule } from '@design4pro/ng-styled';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule, StyledModule.forRoot()],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\nUse class decorator `Styled` to add styles to your component:\n\n```ts\nimport { Component } from '@angular/core';\nimport { Styled, StyledProp, Theme } from '@design4pro/ng-styled';\n\n@Component({\n  selector: 'ng-styled-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css'],\n})\n@Styled(({ css, injectGlobal }) =\u003e {\n  // global styles\n  injectGlobal({\n    '@global': {\n      ':root': {\n        '--background-color': (data: { backgroundColor: string }) =\u003e\n          data.backgroundColor,\n      },\n    },\n  });\n\n  // element styles\n  return css(\n    (theme: Theme) =\u003e ({\n      root: {\n        color: '#fff',\n        backgroundColor: 'var(--background-color)',\n        padding: '20px',\n        direction: theme.direction,\n      },\n    }),\n    { name: 'first' }\n  );\n})\nexport class AppComponent {\n  classes: any; // required to use `[ngClass]=\"classes.root\"` in html template\n\n  @StyledProp() // mark property as styled property\n  backgroundColor = 'red';\n\n  click() {\n    this.backgroundColor = this.backgroundColor === 'red' ? 'green' : 'red';\n  }\n}\n```\n\n```html\n\u003cdiv [ngClass]=\"classes.root\"\u003e\u003c/div\u003e\n```\n\n## Config options\n\n```ts\nimport { create, Jss } from 'jss';\nimport extend from 'jss-plugin-extend';\nimport propsSort from 'jss-plugin-props-sort';\nimport { JssOptions, StyledModule, Theme } from '@design4pro/ng-styled';\n\nconst jss: Jss = create({\n  // additional JSS plugins @see https://cssinjs.org/plugins?v=v10.9.0\n  plugins: [extend(), propsSort()],\n});\n\nconst options: JssOptions = {\n  jss: jss,\n  normalize: false, // disable normalizing (normalize.css)\n};\n\nconst theme: Theme = {\n  palette: {\n    primary: {\n      main: '#00bcd4', // use in decorator `theme.palette?.primary?.main`\n    },\n    secondary: {\n      main: '#f50057',\n    },\n  },\n};\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule, StyledModule.forRoot(options, theme)],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n## License\n\n[MIT](https://github.com/design4pro/ng-styled/blob/master/LICENSE.md) © DESIGN4 ᴾ ᴿ ᴼ\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdesign4pro%2Fangular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdesign4pro%2Fangular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdesign4pro%2Fangular/lists"}