Newtonian Physics Mockumentary

    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:

    Keywords

    none

    Install

    npm i basic-css-in-js

    DownloadsWeekly Downloads

    1

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    28.9 kB

    Total Files

    16

    Last publish

    Collaborators

    • jackyef