Not Parents' Money

    inStyle

    1.6.3 • Public • Published

    inStyle

    inStyle is a CSS authoring tool to append, insert or replace elements in the current selector (&), giving you an intuitive way to style the current element based on parent variants without repeating complex queries. Enables fully nested CSS writing styles and wealth of one's soul.

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

    Currently available for SASS 3.4+ and PostCSS.

    What's new in 1.6.3:

    • libsass 3.4+ compatibility (thanks andrezrv)

    1) Append

    Appending a state to an existing parent 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
     
        &.blue
          color: blue
     
        .isIE6 &
          background-image: url("fake-borders.png")
     
        +in('<.expanded')
          color: red // .my-app.expanded .widget { };
     
        @media (max-width: 768px)
          float: left

    You can also explicitly mention the compound selector, which is useful for filtering out undesired multiselector parents. May also be preferential for readability.

    ul, ol
      list-style: none
     
      li
        display: inline-block
     
        a
          text-decoration: underline
     
          +in('ol.links')
            color: orange // ol.links li a { };

    2) Insert

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

    .container
      display: flex
     
      div
        flex: 1
     
        span
          color: red
     
          +in('^.upside-down')
            transform: rotate(180deg) // .container div .upside-down span { };
     
          +in('^^[class^=foo]')
            content: 'bar' // .container [class^=foo] div span { };
    table
      table-layout: fixed
     
      thead
        font-weight: normal
     
      tr
        height: 30px
     
        +in('^thead')
          height: 50px // table thead tr { };

    3) 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('@.cool')
            background: pink // ul .cool a, ol .cool a { };
     
          +in('@@.special-list')
            color: orange // .special-list li a { };

    Features

    • Infinitely nestable
    • Any amount of modifications separated by a space
    • Accepts multiselectors separated by a comma
    • Validates all CSS input by SASS internal selector-parse()
    • Order of modifications makes no difference, RTL priority

    Options

    Change any of the special characters to your preference by setting the following global variables:

    $__inTagAppend: '<'
    $__inTagInsert: '^'
    $__inTagReplace: '@'

    Installation

    @import 'node_modules/inStyle/src/instyle' in your SASS/SCSS stylesheet.

    npm install inStyle
    bower install inStyle

    Tests

    npm install
    npm run test

    Roadmap

    • Stylus port (blocked by #1703)

    Keywords

    none

    Install

    npm i inStyle

    DownloadsWeekly Downloads

    17

    Version

    1.6.3

    License

    MIT

    Last publish

    Collaborators

    • mystrdat