Nebulous Puffy Marshmallows

    stylie-mcstyleface

    1.2.1 • Public • Published

    Stylie McStyleface

    Tagged template strings for SASS. Uses node-sass so not useful for client-side code.

    The intended use-case is for rendering static sites with JS and React, but keeping the styles in the same files as the code. I was previously using free-style but struggled with its lexicographic approach to rule ordering (bad news for @media queries). It also fails silently way too often and has some bugginess around deeply-nested things. All this led me to a comparatively simple approach.

    import style from 'stylie-mcstyleface';
     
    // include global rules
    style.rules `
      body {
        font-size: 12pt;
      }
     
      @media (min-width: 90000px) {
        font-size: 500pt;
      }
    `;
     
    // or define anonymous classes
    const className = style.register `
      color: #777;
      &:hover {
        color: #222;
      }
    `;
     
    className // => 'mc1igb8ty'
     
    // and use them in JSX or wherever
    const elem = <div className={className}>some content</div>;

    Accumulated styles can be retrieved with the .getCSS method.

    style.getCSS();
    // body {
    //   font-size: 12pt; }
    //
    // @media (min-width: 90000px) {
    //   font-size: 500pt; }
    // .mc1igb8ty {
    //   color: #777; }
    //   .mc1igb8ty:hover {
    //     color: #222; }

    Keywords

    none

    Install

    npm i stylie-mcstyleface

    DownloadsWeekly Downloads

    1

    Version

    1.2.1

    License

    MIT

    Last publish

    Collaborators

    • ds300