https://github.com/hmmhmmhm/svelte-css-in-js

📦 This module makes to handle css in js form from svelte. ( svelte css in js )
https://github.com/hmmhmmhm/svelte-css-in-js

autoprefixer component css css-in-js javascript svelte typescript

Last synced: 3 months ago
JSON representation

📦 This module makes to handle css in js form from svelte. ( svelte css in js )

• Host: GitHub
• URL: https://github.com/hmmhmmhm/svelte-css-in-js
• Owner: hmmhmmhm
• License: mit
• Created: 2019-12-15T05:55:37.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-31T00:07:22.000Z (about 2 years ago)
• Last Synced: 2023-03-02T21:05:52.454Z (almost 2 years ago)
• Topics: autoprefixer, component, css, css-in-js, javascript, svelte, typescript
• Language: TypeScript
• Homepage:
• Size: 58.6 KB
• Stars: 8
• Watchers: 3
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-css-in-js

> 📦 This module makes to handle css in js form from svelte.

With svelte-css-in-js, you can use css in javascript (and typescript). You can use this module when you want to conveniently use the css attribute that should be changed frequently on js or when you have the style that you want to assign as component properties.

> This module has been developed by modifying some of the code in the [shineup](https://github.com/Vehmloewff/shineup/blob/master/index.js) library created by `Vehmloewff`. The code also specifies the source. Do not erase that. The licenses for the original module from which the code was quoted are all the same under MIT License.

## Spec

- Add automatic prefixes through Autoprefixer.

- Entering JSON data to generate css class.

- When data entered in JSON format is changed, only changes are apply as dom.

- Reuse of css keys that prevent conflicts between components without generating them each time.

- Allow deformation by distinguishing between style and theme concept.

## Install

```bash

npm i svelte-css-in-js

```

## Usage

```svelte

    import { makeCSS } from 'svelte-css-in-js'

    export let a = ''

    export let b = ''

    export let c = ''

    // CSS Prop

    let themePrimaryColor = 'blue'

    // CSS Style

    export let style = {

        background: {

            color: themePrimaryColor

        }

    }

    // CSS Theme

    export let theme = {

        background: {

            fontSize: '30px'

        }

    }

    // You can transform css as soon as you want.

    // The value of the key remaining in the <header> will not be wasted.

    setTimeout(()=>{

        style.background.color = 'yellow'

    }, 3000)

    const css = makeCSS({ style, theme })



    {a} {b} {c}



```

## License

MIT License.