https://github.com/uppercod/cssthis-object

It allows using cssthis based on an object, avoiding the need for cssthis-parse.
https://github.com/uppercod/cssthis-object

css css-in-js preact react

Last synced: 11 days ago
JSON representation

It allows using cssthis based on an object, avoiding the need for cssthis-parse.

• Host: GitHub
• URL: https://github.com/uppercod/cssthis-object
• Owner: UpperCod
• Created: 2018-09-07T04:56:35.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-09-08T00:42:49.000Z (over 6 years ago)
• Last Synced: 2024-12-05T22:34:32.878Z (29 days ago)
• Topics: css, css-in-js, preact, react
• Language: JavaScript
• Homepage: https://codesandbox.io/s/lpql5vo6n9
• Size: 20.5 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# cssthis-object

It allows using [cssthis](https://github.com/uppercod/cssthis) based on an object, avoiding the need for [cssthis-parse](https://github.com/uppercod/cssthis-parse).

## Installation

By default cssthis, has a method within the style function, called **parse**, this allows to read the content given to cssthis, before executing the css as a function.

```javascript

import {style} from "cssthis";

import transform from "cssthis-object";

transform(style);

```

Once you have done the above you can use objects such as CSS.

## Example

```javascript

import { style } from "cssthis";

let Button = style("button")({

    ":this": {

        padding: ".5rem 1rem",

        background: "transparent",

        border: "1px solid black"

    },

    ":this:hover": {

        animation: "hover 1s infinite alternate"

    },

    "@keyframes hover": {

        from: {

            transform: "scale(1)"

        },

        to: {

            transform: "scale(1.2)"

        }

    }

});

```

Cssthis-object, does not work with nested styles, for example those inherited from sass.