❤
npm
Sign UpSign In

basic-css-in-js
TypeScript icon, indicating that this package has built-in type declarations

0.1.3 • Public • Published

basic-css-in-js npm bundle size

Not to be used on production (at least not yet).

Created for learning how stuffs work.

Example codesandbox

image

APIs

  • css

    import { css } from 'basic-css-in-js';
     
    const blueClass = css`
      color: blue;
    `;
     
    const Component = () => {
      return <div className={blueClass}>I am blue</div>;
    }

  • keyframes

    import { css, keyframes } from 'basic-css-in-js';
     
    const Spinning = keyframes`
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    `;
     
    const blueClass = css`
      color: blue;
      animation: ${Spinning} infinite 20s linear;
    `;
     
    const Component = () => {
      return <div className={blueClass}>I am blue and spinning</div>;
    }

  • sheet.extract() for rendering HTML in node environment

    import { css, getSheet } from 'basic-css-in-js';
     
    const blue = css`
      color: blue;
    `;
     
    const getHtml = () => {
      return `
        <html>
        <head>
          <style>${getSheet().extract()}</style>
        </head>
        <body>
          <div class="${blue}">I should be blue colored</div>
        </body>
        </html>
      `;
    }

    SSR Example on Codesandbox

Running the example

  1. Clone the repo

  2. Install dependencies

    yarn

  3. Build the package

    yarn build

  4. Run example

    yarn example

Goals:

  • ✅ css and keyframes works!
  • ✅ Support template literal syntax
    css`
      display: none;
    `
  • ✅ vendor prefixing (via tiny-css-prefixer)
  • ✅ SSR support
  • optimisation

References:

Readme

Keywords

none

Package Sidebar

Install

npm i basic-css-in-js

Weekly Downloads

1

Version

0.1.3

License

MIT

Unpacked Size

28.9 kB

Total Files

16

Last publish

Collaborators

  • jackyef
Try on RunKit
Report malware