inStyle is a tool that helps describe
complex relationships inside nested CSS architectures.

#Modify parents without escaping the current element context

my-app
  display: block

  .widget
    border-radius: 5px

    &.blue
      color: blue

    @media (max-width: 768px)
      float: left

  &.expanded .widget
    color: red

my-app
  display: block

  .widget
    border-radius: 5px

    &.blue
      color: blue

    +in('<.expanded')
      color: red

    @media (max-width: 768px)
      float: left

#Insert a new selector into any position in the current selector

table
  table-layout: fixed

  thead
    font-weight: normal

    tr
      height: 50px

  tr
    height: 30px

  td
    background-color: #fafafa

table
  table-layout: fixed

  thead
    font-weight: normal

  tr
    height: 30px

    +in('^thead')
      height: 50px

  td
    background-color: #fafafa

#Replace a parent selector for another one

ul, ol
  list-style: none

  li
    display: inline-block

    a
      text-decoration: underline

  .cool a
    background: pink

.special-list li a
  color: orange

ul, ol
  list-style: none

  li
    display: inline-block

    a
      text-decoration: underline

      +in('@.cool')
        background: pink

      +in('@@.special-list')
        color: orange

#Try it yourself!Codepen