Basic-css-in-js NPM

`basic-css-in-js`

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

Created for learning how stuffs work.

Example codesandbox

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

Clone the repo
Install dependencies
```
yarn
```
Build the package
```
yarn build
```
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:

tiny-css-prefixer

@everything-registry/sub-chunk-1217 @zalastax/nolb-basi

4 years ago

4 years ago

4 years ago

4 years ago