Noticeably Playful Monkeys

    postcss-inrule

    1.2.7 • Public • Published

    postcss-inrule NPM Version Build Status

    The one rule to nest them all!

    https://css-tricks.com/instyle-current-selector-sass/

    Just like a nested media query, inRule describes its parent element. Configurable special characters are used to easily modify all possible relationships inside its parent tree and produce new selectors.

    Also available for SASS 3.4+.

    Installation

    npm install postcss-inrule

    Needs to be used before style unwrappers like postcss-nested.

    Append

    Appending to one of current element parents is done with the < special character. Each additional use of this character targets a higher parent (works the same for all features).

    .my-app {
      display: block;
     
      .widget {
        border-radius: 5px;
     
        @in <.expanded {
          color: red; // .my-app.expanded .widget { };
        }
     
        @in <.mobile, <.tablet {
          width: 50vw; // .my-app.mobile .widget, .my-app.tablet .widget { };
        }
     
        @media (max-width: 768px) {
          float: left;
        }
      }
    }

    Insert

    Inserting a new selector at a certain position above the current element is done with the ^ special character.

    table {
      table-layout: fixed;
     
      thead {
        font-weight: normal;
      }
     
      tr {
        height: 30px;
     
        @in ^thead {
          height: 50px; // table thead tr { };
        }
      }
    }

    Replace

    Replacing a certain selector is done using the @ character. Multiselectors that become duplicit due to the replacement are removed from the rendered selector.

    ul, ol {
      list-style: none;
     
      li {
        display: inline-block;
     
        a {
          text-decoration: underline;
     
          @in @.modifier {
            color: orange; // ul .modifier a, ol .modifier a { };
          }
     
          @in @@.links @span {
            background: pink; // .links span a { };
          }
        }
      }
    }

    Options

    Special character tags are configurable by passing new options to the plugin.

    { tagAppend: '<', tagInsert: '\\^', tagReplace: '@' }

    Install

    npm i postcss-inrule

    DownloadsWeekly Downloads

    2

    Version

    1.2.7

    License

    MIT

    Last publish

    Collaborators

    • mystrdat