Angular Styler

Keep CSS in TypeScript.

Currently in a deep beta!

Install

npm install @ngx-kit/styler --save

Usage

Provide module

import{StylerModule}from'@ngx-kit/styler';
...
@NgModule({imports: [
...
StylerModule.forRoot(),
...

Use import with .forRoot() only once on the top level.

Add styles to component

...
@Component({
...
viewProviders: [StylerComponent]
...
constructor(privatestyler: StylerComponent){this.styler.register({wrapper: {background: '#ffffff',color: 'red',},inside: {color: 'yellow',fontSize: '2rem',}});
...

Use styles in template

<divstyler="wrapper"><divstyler="inside"></div></div>

Cases

:host styling

Just define host element:

this.styler.register({host: {display: 'flex',flexDirection: 'column',},});

Nested styles

this.styler.register({wrapper: {$nest: {'&:hover': {background: 'grey',},'& a': {textDecoration: 'none',},},},});

Register media styles

this.styler.register({wrapper: {display: 'flex',flexDirection: 'row',$media: [[{maxWidth: 600},{flexDirection: 'column',}],],},});

Element state styling

Define element states:

constructor(privatedef: StylerDefService)...this.styler.register({host: {
...
},panel: (state)=>{border: '1px solid green',// multi-state
...this.def.pick(state.size,{small: {padding: 2,},medium: {padding: 4,},large: {padding: 8,},},'medium'),// bool-state
...this.def.toggle(state.disabled,{color: '#666',background: '#999'}),},
...
});

Set state via service for host:

this.styler.host.applyState({size: 'small'});

Or set state with styler directive:

<divstyler="panel" [stylerState]="{size: 'small'}"></div>

Move styles to a separate file

Provide styler view built-it module method:

@Component({
...
viewProviders: [StylerModule.forComponent(ThisComponentStyle)],

Define style injectable:

import{Injectable}from'@angular/core';import{ComponentStyle,StylerDefService,StyleDef}from'@ngx-kit/styler';
@Injectable()exportclassThisComponentStyleimplementsComponentStyle{constructor(privatedef: StylerDefService){}host(): StyleDef{return{display: 'block',};}wrapper(): StyleDef{return{background: '#ffffff',color: 'red',};}// state handlingpanel(state): StyleDef{return{border: '1px solid green',// multi-state
...this.def.pick(state.size,{small: {padding: 2,},medium: {padding: 4,},large: {padding: 8,},},'medium'),// bool-state
...this.def.toggle(state.disabled,{color: '#666',background: '#999'}),};};}

Multi-register

Styles deep-merged from left to right.

this.styler.register([{host: {background: '#ffffff',color: 'yellow'},},{host: {color: 'red',fontSize: '1.1rem',},},]);

Similar to:

this.styler.register([{host: {background: '#ffffff',color: 'red',fontSize: '1.1rem',},},]);

Provide few separated styles to component:

viewProviders: [StylerModule.forComponent(LayoutStyle),StylerModule.forComponent(ThisComponentStyle),],

Fallback styles

TBD

Smart styles

• padding: [10, 20] => padding: '10px 20px'
• padding: {top: 10, left: 30} => paddingTop: '10px', paddingLeft: '30px'
• margin: [10, 20, 30] => padding: '10px 20px 30px'
• border: [1, 'solid', 'blue'] => border: '1px solid blue'

Mixins

TBD

@keyframes

constructor(privatestyler: StylerComponent){this.styler.register({host: {animationDuration: '1s',animationName: this.styler.keyframes({'0%': {transform: 'rotate(0deg)',},'100%': {transform: 'rotate(360deg)',},}),animationTimingFunction: 'linear',animationIterationCount: 'infinite',},});}

Automatically add classes

Styler can add classes to elements. Class attribute based on component name (should be setted), element name and element state.

Provide BemClassGenStrategy:

providers: [{provide: ClassGenStategy,useClass: BemClassGenStrategy,},],

Set component name:

constructor(privatestyler: StylerComponent){this.styler.classPrefix='component-name';}

Helpers

Styles definition

• defPick(state: string, styles: StyleDef, default?: string) - returns styles[state|default]
• defToggle(state: boolean, styles: StyleDef, falseStyles?: StyleDef) - returns styles if state is true
• defMerge(styles: StyleDef[]) - js deepMerge, needed if states have $nest props

Colors

Helpers for color manipulating.

...
background: darken(0.2,someColorVar),

• adjustHue
• complement
• darken
• desaturate
• grayscale
• hsl
• hsla
• invert
• lighten
• mix
• opacify
• rgb
• rgba
• saturate
• setHue
• setLightness
• setSaturation
• shade
• tint
• toColorString
• transparentize