https://github.com/ndrean/bau-preat-css

Lightweight CSS-in-JS for Preact based on BauCSS
https://github.com/ndrean/bau-preat-css

css css-in-js preact styled-components

Last synced: 16 days ago
JSON representation

Lightweight CSS-in-JS for Preact based on BauCSS

• Host: GitHub
• URL: https://github.com/ndrean/bau-preat-css
• Owner: ndrean
• Created: 2023-07-04T16:18:29.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-07-12T13:58:31.000Z (over 1 year ago)
• Last Synced: 2024-10-25T13:42:08.823Z (2 months ago)
• Topics: css, css-in-js, preact, styled-components
• Language: JavaScript
• Homepage:
• Size: 114 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
# CSS-in-JS package for Preact

This package is based on BauCSS and adds a `styled` component for Preact.

[![npm bundle size](https://img.badgesize.io/ndrean/bau-preact-css/main/src/bau-preactcss.js?compression=gzip)](https://bundlephobia.com/package/[email protected])

## Usage

```js

import BauPreactCss from "bau-preactcss";

const { css, styled, keyframes, createGlobaStyles } = BauPreactCss();

```

## Worked example

## Create a class

```jsx

const class = css`

    color: var(--main-color);

`;

A paragraph

```


## Create a styled component

```jsx

const Btn = (props) => style("button", props)`

    cursor: pointer;

    color: ${props.color};

`;

Blue button component;

```

## Create a keyframe

```js

const rescale = keyframes`

    0% {transform: scale(0.5)}

    100% {transform: scale(1)}

`;

const class = css`

    color: red;

    animation: ${rescale} 1s ease infinite;

`

```

## Create global styles

```js

createGlobalStyles`

    :root {

        margin: 0px;

    }

`;

```

## Example of conditional classes

You have two ways to use it. Define a function or object that returns CSS strings:

```jsx

const styles = (props) => {

  base: `

    cursor: pointer;

    font-size: ${props.size ?? 1}em;

    border-radius: 0.3em;

    padding: 0.3em;

  `,

  danger: `

    color: red;

    animation: ${rescale} 1s ease infinite;

  `,

  disabled: `

    pointer-events: none;

    opacity: ${props.opacity};

  `;

}

```

You can do:

```jsx

const Btn = (props)=> styled('button', props)`

    ${styles(props).base +

    props.danger ? styles(props).danger : ""

    }

`

// and use it

Base button

 alert('danger')}>Danger button

```

The primitive `styled` lets you read the styles defined as above from the props:

```jsx

const Button = (props) => styled("button", props)`

  ${styles(props).base}

  ${styles(props)}

`;

```

and you can use it:

```jsx

Base Button

  Shadowed Danger

;

```

## Example of class extension of a styled component

```jsx

const UL = (props) => styled("ul", props)`

  list-style-type: none;

  > li:nth-of-type(1) {

    background-color: bisque;

    color: green;

  }

`;

const chevronCl = css`

  > li:nth-of-type(2) {

    &::marker {

      content: ">>";

      font-size: 1.2em;

    }

  }

`;



  
without marker, with background

  
With chevron

;

```