https://github.com/ndrean/solid-css

Lightweight CSS-in-JS for SolidJS based on BauCSS
https://github.com/ndrean/solid-css

css css-in-js solidjs styled-components

Last synced: 2 months ago
JSON representation

Lightweight CSS-in-JS for SolidJS based on BauCSS

• Host: GitHub
• URL: https://github.com/ndrean/solid-css
• Owner: ndrean
• Created: 2023-07-01T08:43:50.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-07-12T13:52:25.000Z (over 1 year ago)
• Last Synced: 2024-11-02T14:42:33.805Z (2 months ago)
• Topics: css, css-in-js, solidjs, styled-components
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/bau-solidcss
• Size: 226 KB
• Stars: 7
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CSS-in-JS for SolidJS

Shamlessly copied BauCSS, added `styled` for SolidJS.

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

## Usage

```bash

pnpm i bau-solidcss

```

```js

import BauSolidCss from "bau-solidcss";

const { css, styled, keyframes, createGlobalStyles } = BauSolidCss();

```

## Worked example

```bash

cd example

pnpm i

pnpm run dev

```

## `bau-solidcss` package

It exports 4 primitives: `css`to build classes, `keyframes` to build animations, `createGlobalStyles` for global styles and `styled` to build styled components and easy conditional styling.

### Global style with `createGlobalStyles`

```js

createGlobalStyles`

  :root {

    margin: 0;

    --main-color: midnightblue;

  }

  

  body {

    text-align: center;

  }

`;

```

### Build a class with `css`

You write template strings, pass it to the function `css` to build a `class`.

```js

const main = css`

  background-color: bisque;

  color: var(--main-color);

`;

I am an div
;

```


### Build a styled component with `styled`

```js

const P = (props) => styled("p", props)`

  color: ${props.color ?? "var(--main-color)"};

`;

I am blue

I am red
;

```


### Add rules to a styled component

Yo ucan extend rules, not overwrite them. To overwrite them, use the conditional form with props, see below.

```js

const B = (props) => (

  


    {props.children}

  

);


 A bisqued "P";

```

### Conditional classes

Take CSS rules in the form of the object below:

```js

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:

```js

const Btn = (props) =>

  styled("button", props)`

    ${styles(props).root +

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

    (props.disabled ? styles(props).disabled : "")}

  `;

```

Alternatively, when you use the boject above, then the `styled` primitive merges the styles from the props. In other words, with:

```jsx

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

  ${styles(props).base}

  ${styles(props)}

`;

```

you can do:

```jsx

// the 1st version:

 alert('hi')}>Base size 2

Danger

//or the second version

Base Button

  Shadowed Danger

;

```

### Reactive style of a component

```js

const [size, setSize] = createSignal(1)

const Dyn = (props) => {

  const size = () => props.size || 1;

  return (

    
{props.children}

  );

};


 setSize(e.target.value)} />

Dynamic

```

### Animations with `keyframes`

```js

const rescale = keyframes`

0% {transform: scale(0.5)}

100% {transform: scale(1)}

`;

const AnimSurf = (props) => styled("span", props)`

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

  animation: ${rescale} 2s ease infinite;

`;

🏄;

```