How to properly write nested classes in CSS

Question

I am using an example from a library @dndkit, so it has some CSS modules for example Item.module.css. The CSS inside those files is not properly working as I forked it from the codepen.

It uses some nested CSS classes or something but I cannot really understand it as it complains about syntax errors! I am trying to re-do it properly but with no luck so far.

Here's an example of how I forked it from the library but it throws me syntax errors:

.Wrapper {
  list-style: none;
  box-sizing: border-box;
  padding-left: var(--spacing);
  margin-bottom: -1px;

  &.clone {.            //syntax error
    display: inline-block;
    pointer-events: none;
    padding: 0;
    padding-left: 10px;
    padding-top: 5px;

    .TreeItem {
      --vertical-padding: 5px;

      padding-right: 24px;
      border-radius: 4px;
      box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
    }
  }

  &.ghost {      //syntax error
    &.indicator {
      opacity: 1;
      position: relative;
      z-index: 1;
      margin-bottom: -1px;

      .TreeItem {
        position: relative;
        padding: 0;
        height: 8px;
        border-color: #2389ff;
        background-color: #56a1f8;

        &:before {
          position: absolute;
          left: -8px;
          top: -4px;
          display: block;
          content: '';
          width: 12px;
          height: 12px;
          border-radius: 50%;
          border: 1px solid #2389ff;
          background-color: #ffffff;
        }

        > * {
          /* Items are hidden using height and opacity to retain focus */
          opacity: 0;
          height: 0;
        }
      }
    }

    &:not(.indicator) {
      opacity: 0.5;
    }

    .TreeItem > * {
      box-shadow: none;
      background-color: transparent;
    }
  }
}

It's kind a big one but basically all the files ...module.css are using this type of syntax!

Any help would be appreciated! :)

Answer 1

If the file extension is .module.css then it's not SCSS, it probably depends upon postcss nested, which is essentially a polyfill for the nested CSS syntax from the CSS spec. The syntax errors are likely caused by a missing postcss config.

If you want to compile it to css, this is how I would interpret the output:

.Wrapper {
    list-style: none;
    box-sizing: border-box;
    padding-left: var(--spacing);
    margin-bottom: -1px;
}

.Wrapper.clone {
    display: inline-block;
    pointer-events: none;
    padding: 0;
    padding-left: 10px;
    padding-top: 5px;
}

.Wrapper.clone .TreeItem {
    --vertical-padding: 5px;

    padding-right: 24px;
    border-radius: 4px;
    box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
}

.Wrapper.ghost.indicator {
    opacity: 1;
    position: relative;
    z-index: 1;
    margin-bottom: -1px;
}

.Wrapper.ghost.indicator .TreeItem {
    position: relative;
    padding: 0;
    height: 8px;
    border-color: #2389ff;
    background-color: #56a1f8;
}

.Wrapper.ghost.indicator .TreeItem > * {
    /* Items are hidden using height and opacity to retain focus */
    opacity: 0;
    height: 0;
}

.Wrapper.ghost.indicator .TreeItem:before {
    position: absolute;
    left: -8px;
    top: -4px;
    display: block;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #2389ff;
    background-color: #ffffff;
}

.Wrapper.ghost:not(.indicator) {
    opacity: 0.5;
}

.Wrapper.ghost .TreeItem > * {
    box-shadow: none;
    background-color: transparent;
}

...however that's my non-strict human brain interpreting it and not being strict, according to the postcss compiler in codepen it's this:

.Wrapper {
  list-style: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: var(--spacing);
  margin-bottom: -1px
}

.Wrapper.clone {
    display: inline-block;
    pointer-events: none;
    padding: 0;
    padding-left: 10px;
    padding-top: 5px;

    .TreeItem {
      --vertical-padding: 5px;

      padding-right: 24px;
      border-radius: 4px;
      -webkit-box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
              box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
    }
  }

.Wrapper.ghost.indicator {
      opacity: 1;
      position: relative;
      z-index: 1;
      margin-bottom: -1px;

      .TreeItem {
        position: relative;
        padding: 0;
        height: 8px;
        border-color: #2389ff;
        background-color: #56a1f8
      }

        .TreeItem:before {
          position: absolute;
          left: -8px;
          top: -4px;
          display: block;
          content: '';
          width: 12px;
          height: 12px;
          border-radius: 50%;
          border: 1px solid #2389ff;
          background-color: #ffffff;
        }

      .TreeItem {

        > * {
          opacity: 0;
          height: 0;
        }
      }
    }

.Wrapper.ghost:not(.indicator) {
      opacity: 0.5;
    }

.Wrapper.ghost {

    .TreeItem > * {
      -webkit-box-shadow: none;
              box-shadow: none;
      background-color: transparent;
    }
  }

which isn't valid CSS, that's because the nesting CSS expects any nested children to have a preceding & before any nested selectors. In SCSS you are able to nest without preceding every child selector with &.

There's a codepen setup here, where I have added the missing &. If you toggle 'view compiled CSS' you'll see the output: