https://github.com/rajasegar/ember-csz

Ember template helpers for csz a runtime CSS Modules with SASS like preprocessing
https://github.com/rajasegar/ember-csz

css-in-js csz ember-addon emberjs

Last synced: 4 days ago
JSON representation

Ember template helpers for csz a runtime CSS Modules with SASS like preprocessing

• Host: GitHub
• URL: https://github.com/rajasegar/ember-csz
• Owner: rajasegar
• License: mit
• Created: 2020-07-14T06:49:05.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-10-27T13:29:15.000Z (about 1 year ago)
• Last Synced: 2024-11-02T11:11:35.043Z (11 days ago)
• Topics: css-in-js, csz, ember-addon, emberjs
• Language: JavaScript
• Homepage: https://rajasegar.github.io/ember-csz/
• Size: 552 KB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
ember-csz

==============================================================================

![Build and Deploy](https://github.com/rajasegar/ember-csz/workflows/Build%20and%20Deploy/badge.svg)

[![Coverage Status](https://coveralls.io/repos/github/rajasegar/ember-csz/badge.svg?branch=master)](https://coveralls.io/github/rajasegar/ember-csz?branch=master)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

[![npm version](http://img.shields.io/npm/v/ember-csz.svg?style=flat)](https://npmjs.org/package/ember-csz "View this project on npm")

[![EmberObserver](http://emberobserver.com/badges/ember-csz.svg?branch=master)](http://emberobserver.com/addons/ember-csz)

Ember template helpers for [csz](https://github.com/lukejacksonn/csz), 

a Runtime CSS-Modules with SASS like pre-processing.

See the introductory [blog post](https://dev.to/rajasegar/ember-csz-a-css-in-js-solution-for-styling-in-ember-2mpp) 

and [conference talk](https://www.youtube.com/watch?v=uZrVHGEjLhs) to know more about csz.

Installation

------------------------------------------------------------------------------

```

ember install ember-csz

```

Usage

------------------------------------------------------------------------------

### CSS-in-JS with components

#### component.js

```js

import Component from "@glimmer/component";

import csz from "csz";

export default class MyButtonComponent extends Component {

  styles = csz`

    background: ${this.args.primary ? "palevioletred" : "white"};

    color: ${this.args.primary ? "white" : "palevioletred"};

    font-size: 1em;

    margin: 1em;

    padding: 0.25em 1em;

    border: 2px solid palevioletred;

    border-radius: 3px;

`;

}

```

#### template.hbs

```hbs

  {{yield}}

```

#### Using the component

```hbs

Primary

Normal

```

## Inline usage in templates

```hbs

Hello World

```


Compatibility

------------------------------------------------------------------------------

* Ember.js v3.12 or above

* Ember CLI v2.13 or above

* Node.js v10 or above

Contributing

------------------------------------------------------------------------------

See the [Contributing](CONTRIBUTING.md) guide for details.

License

------------------------------------------------------------------------------

This project is licensed under the [MIT License](LICENSE.md).