Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/design4pro/angular
JSS integration with Angular
https://github.com/design4pro/angular
angular css-in-js css-in-ts jss
Last synced: about 1 month ago
JSON representation
JSS integration with Angular
- Host: GitHub
- URL: https://github.com/design4pro/angular
- Owner: design4pro
- License: mit
- Created: 2022-02-26T09:43:53.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-06T20:40:31.000Z (almost 2 years ago)
- Last Synced: 2024-12-15T07:06:39.983Z (2 months ago)
- Topics: angular, css-in-js, css-in-ts, jss
- Language: TypeScript
- Homepage: https://design4pro.github.io/angular/
- Size: 1.51 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# NgStyled
> [JSS](https://cssinjs.org/) integration with Angular
[](https://npmjs.org/package/@design4pro/ng-styled)
[](https://github.com/design4pro/ng-styled/jss/blob/master/LICENSE.md)
[](https://npmjs.org/package/@design4pro/ng-styled)
[](https://npmjs.org/package/@design4pro/ng-styled)
[](https://github.com/design4pro/)
## Features
- [x] Component decorator `Styled`
- [x] Theming with `Theme`
- [ ] Theme switching (dark/light mode)
- [x] Server Side Rendering with Angular Universal
- [ ] Critical CSS
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
## Installation
Using `npm`:
```sh
npm install @design4pro/ng-styled
```
or using `yarn`:
```sh
yarn add @design4pro/ng-styled
```
## Usage
Inject the `StyledModule` module into your root module:
```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StyledModule } from '@design4pro/ng-styled';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, StyledModule.forRoot()],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
Use class decorator `Styled` to add styles to your component:
```ts
import { Component } from '@angular/core';
import { Styled, StyledProp, Theme } from '@design4pro/ng-styled';
@Component({
selector: 'ng-styled-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
@Styled(({ css, injectGlobal }) => {
// global styles
injectGlobal({
'@global': {
':root': {
'--background-color': (data: { backgroundColor: string }) =>
data.backgroundColor,
},
},
});
// element styles
return css(
(theme: Theme) => ({
root: {
color: '#fff',
backgroundColor: 'var(--background-color)',
padding: '20px',
direction: theme.direction,
},
}),
{ name: 'first' }
);
})
export class AppComponent {
classes: any; // required to use `[ngClass]="classes.root"` in html template
@StyledProp() // mark property as styled property
backgroundColor = 'red';
click() {
this.backgroundColor = this.backgroundColor === 'red' ? 'green' : 'red';
}
}
```
```html
```
## Config options
```ts
import { create, Jss } from 'jss';
import extend from 'jss-plugin-extend';
import propsSort from 'jss-plugin-props-sort';
import { JssOptions, StyledModule, Theme } from '@design4pro/ng-styled';
const jss: Jss = create({
// additional JSS plugins @see https://cssinjs.org/plugins?v=v10.9.0
plugins: [extend(), propsSort()],
});
const options: JssOptions = {
jss: jss,
normalize: false, // disable normalizing (normalize.css)
};
const theme: Theme = {
palette: {
primary: {
main: '#00bcd4', // use in decorator `theme.palette?.primary?.main`
},
secondary: {
main: '#f50057',
},
},
};
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, StyledModule.forRoot(options, theme)],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
## License
[MIT](https://github.com/design4pro/ng-styled/blob/master/LICENSE.md) © DESIGN4 ᴾ ᴿ ᴼ