enable tailwind nesting

[rafh]

Currently, if you implement native CSS nesting within a Vue component a warning will appear in the terminal. It states
Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. To fix this error we need to enable the built-in tailwinds nesting config.

Example code to trigger the warning within a vue component:

<style>
.example {
  &:hover,
  &:focus-visible {
    color: var(--color-text);
  }

  & svg {
    margin-right: 0.78rem;
  }
}
</style>

[silverwind]

Won't this also get us postcss-nested? Seems like a nonstandard nesting syntax I would like to avoid.

Generally I'm fine with nesting syntax currently if it's standard syntax and when it's compiled to flat syntax for compat.

[jtran]

We already have postcss-nested in our dependencies.

gitea/package-lock.json

Line 11504 in 857243b

"postcss-nested": "^6.0.1",

@silverwind, would you prefer to use postcss-nesting instead which uses the standard?

[silverwind]

Yeah, it's a dependency of tailwindcss, but my preference would be standard nesting syntax, transpiled to flat syntax until PaleMoon gains support, or just not use it until then 😆.

[silverwind]

Seems https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting, so please add that as dependency and make it use that, also set edition to latest, which will make removing the plugin later easier.

[jtran]

Looks good to me.

[silverwind]

Yes looks good besides that topic above. I will also give it a test later.

[silverwind]

One final question: What is the motivation for this PR? We don't have any CSS nesting in the code yet as far as I'm aware. Is it for customization or are you preparing a PR that will use it?

[rafh]

One final question: What is the motivation for this PR? We don't have any CSS nesting in the code yet as far as I'm aware. Is it for customization or are you preparing a PR that will use it?

We use CSS nesting within our fork. I thought this would be a good candidate to push upstream because others may eventually use nesting in their PRs.

[silverwind]

Ok, personally I wouldn't use it, but we can give people this option.

[jtran]

👍

[silverwind]

Tested it: In Vue components I see the CSS is flattened as expected. But if I edit a regular CSS file it isn't:

Not sure what's the issue, but I would expect CSS to be flattened in both cases. Example CSS:

.page-footer {
  .left-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    color: red;
  }
}

[silverwind]

Tested it: In Vue components I see the CSS is flattened as expected. But if I edit a regular CSS file it isn't

Fixed in 9a7482f. The magic option importLoaders: 1 made it work.