Nikolay Suslov 69cdc31168 add new libs		před 3 roky
..
src	69cdc31168 add new libs	před 3 roky
LICENSE	69cdc31168 add new libs	před 3 roky
README.md	69cdc31168 add new libs	před 3 roky
package.json	69cdc31168 add new libs	před 3 roky

Solid Styled Components

This library provides Styled Components and css helper found in popular JS in CSS libraries. This library uses goober a 1kb style library with a wrapper to work with Solid's API. The wrapper also adds a Theming solution.

Features

`styled(tagName)`

@param {String} tagName The name of the dom element you'd like the styled to be applied to

@returns {Function} Returns the tag template function.

import { styled } from "solid-styled-components";

const Btn = styled("button")`
border-radius: 4px;
`;

Tagged Templates

import { styled } from "solid-styled-components";

const Btn = styled("button")`
  border-radius: ${props => props.size}px;
`;

<Btn size={20} />;

Function returns a string

import { styled } from "solid-styled-components";

const Btn = styled("button")(
  props => `
  border-radius: ${props.size}px;
`
);

<Btn size={20} />;

Nesting styled components

import { styled } from "solid-styled-components";

const Icon = styled("span")`
  display: flex;
  flex: 1;
  color: red;
`;

const Button = styled("button")`
  background: dodgerblue;
  color: white;
  border: ${Math.random()}px solid white;

  &:focus,
  &:hover {
    padding: 1em;
  }

  .otherClass {
    margin: 0;
  }

  ${Icon.className} {
    color: black;
  }
`;

Style Object

import { styled } from "solid-styled-components";

const Btn = styled("button")(props => ({
  borderRadius: props.size + "px"
}));

<Btn size={20} />;

`css`

@returns {String} Returns the className.

To create a className, you need to call css with your style rules in a tagged template:

import { css } from "solid-styled-components";

const BtnClassName = css`
  border-radius: 4px;
`;

const App => <button className={BtnClassName}>click</button>

Or an object:

import { css } from "solid-styled-components";

const BtnClassName = css({ borderRadius: "4px" })

const App => <button className={BtnClassName}>click</button>

Passing props to `css` tagged templates

import { css } from "solid-styled-components";

// JSX
const CustomButton = props => (
  <button
    className={css`
      border-radius: ${props.size}px;
    `}
  >
    click
  </button>
);

`extractCss(target?)`

@returns {String}

Returns the <style> tag that is rendered in a target and clears the style sheet. Defaults to <head>. Used to grab the styles for SSR.

const { extractCss } = require("goober");

// After your app has rendered, just call it:
const styleTag = `<style id="_goober">${extractCss()}</style>`;

// Note: To be able to `hydrate` the styles you should use the proper `id` so `goober` can pick it up and use it as the target from now on

`createGlobalStyles`

For a global style component, you call createGlobalStyles with your global tagged template.

import { createGlobalStyles } from "solid-styled-components";

const GlobalStyles = () => {
  const Styles = createGlobalStyles`
    html,
    body {
      background: light;
    }

    * {
      box-sizing: border-box;
    }
  `;
  return <Styles />;
};

`Theme`

You can set a Theme Provider (remember to use state or signals if you want it to be reactive)

import { styled, ThemeProvider } from "solid-styled-components";

const theme = {
  colors: {
    primary: "hotpink"
  }
};

const SomeText = styled("div")`
  color: ${props => props.theme.colors.primary};
`;

render(
  () => (
    <ThemeProvider theme={theme}>
      <SomeText>some text</SomeText>
    </ThemeProvider>
  ),
  document.getElementById("app")
);

The library provides a useTheme hook if you wish to use it elsewhere like in you css functions.

`setup(prefixer: (key: string, value: any) => string)`

Set up a custom prefixer.

README.md

Solid Styled Components

Features

styled(tagName)

Tagged Templates

Function returns a string

Nesting styled components

Style Object

css

Passing props to css tagged templates

extractCss(target?)

createGlobalStyles

Theme

setup(prefixer: (key: string, value: any) => string)