Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

&.something scss syntax breaks styles

See original GitHub issue

Environment

Latest Nuxt 3 and windicss, see reproduction…

Reproduction

https://stackblitz.com/edit/nuxt3-windi-css-bug

Describe the bug

The following scss syntax broke somewhere between version 3.0.0-27424151.dbab979 and the latest version 3.0.0-27451165.114cbe3

.repo-list-item {
  @apply p-4 bg-white dark:bg-gray-800 md:(shadow-lg rounded-lg);
  &.status-0 {
    .indicator {
      @apply border-gray-300 dark:border-gray-600;
    }
  }
}

What happens is that once &.something... is added the styles for .repo-list-item under @apply p-4 ... are no longer added. Note that this is windicss.

Additional context

The version where it still works had a bug and required components: { global: true }, maybe the fix for that created the problem, but just a wild guess…

Update

The following also doesn’t work:

.repo-list-item {
  @apply p-4 bg-white dark:bg-gray-800 md:(shadow-lg rounded-lg);
  .indicator {
    @apply border-gray-300 dark:border-gray-600;
  }
}

It seems like nested @applys break the ones on the top-level selector.

Issue Analytics

State:
Created 2 years ago
Comments:6 (6 by maintainers)

Top GitHub Comments

1reaction

toniengelhardtcommented, Mar 22, 2022

Thanks so much @danielroe 🙏🏽

1reaction

toniengelhardtcommented, Mar 12, 2022

@danielroe I managed to reproduce.

3.0.0-27451165.114cbe3 broken: https://stackblitz.com/edit/nuxt3-windi-css-bug

3.0.0-27424151.dbab979 working: https://stackblitz.com/edit/nuxt3-windi-css-bug-part-2

Everything but the nuxt version is the same.

If I should still raise it in nuxt-windicss please let me know 🙏🏽

Top Results From Across the Web

word-break - CSS: Cascading Style Sheets - MDN Web Docs

The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.

Style Rules - Sass

Style rules are the foundation of Sass, just like they are for CSS. And they work the same way: you choose which elements...

css - What would cause a sass file to break compilation due to ...

Have you tried deleting the line and re-typing it (not cut/paste style)? · Sounds like you're compiling indented SASS and not SCSS. ·...

CSS word-break property - W3Schools

Default value: normal. Inherited: yes. Animatable: no. Read about animatable. Version: CSS3. JavaScript syntax: object.style.wordBreak="break-all" Try it ...

CSS Basics: The Syntax That Matters & The Syntax That Doesn't

If you miss the opening brace, CSS will keep reading as if the next bit of text is still part of the selector....