support.function.misc.scss applied inconsistently

[alexr00]

Prerequisites

• Put an X between the brackets on this line if you have done all of the following:
  • Reproduced the problem in Safe Mode: https://flight-manual.atom.io/hacking-atom/sections/debugging/#using-safe-mode
  • Followed all applicable steps in the debugging guide: https://flight-manual.atom.io/hacking-atom/sections/debugging/
  • Checked the FAQs on the message board for common solutions: https://discuss.atom.io/c/faq
  • Checked that your issue isn't already filed: https://github.com/issues?utf8=✓&q=is%3Aissue+user%3Aatom
  • Checked that there is not already an Atom package that provides the described functionality: https://atom.io/packages

Description

The tokenization of deep in the sample is inconsistent. Sometimes it is support.function.misc.scss and sometimes it only gets source.css.scss.

Steps to Reproduce

:deep(.el-scrollbar) {
  .reserve-drawer {
    padding: 0 20px;
    .create-btn {
      margin-bottom: 10px;
    }
  }
}
.reserve-edit-form {
  :deep(.el-form-item__content) {
    .el-input-number--mini {
      width: 80px;
    }
  }
}

Expected behavior:

deep always gets the same scope.

Actual behavior:

deep does not always get the same scope.

Reproduces how often:

100%

Versions

303bbf0

Originally posted by @gadfly3173 in microsoft/vscode#139170.

[gadfly3173]

And also .el-input-number--mini in this example rendered not correct, the same performance on this GitHub page.