Skip to Main Content
Feature Request FR-3727
Product Area Developer Experience
Status DELIVERED

9 Voters

CSS Minifier should support CSS Nesting

tcaruth Public
· Apr 9 2024

Idea Summary
CSS nesting is now supported in all major browsers. When using css files in APEX, the editor will highlight nested css selectors as invalid. More importantly, the file minifier will strip nested css that it sees as invalid. Currently the workaround is to skip minification on css files that have nesting, but this workaround doesn't work for inline page css.

Use Case
Support web standards and ease of use features for developers.

In APEX, you can see this happening by using a nested selector, then looking at the minified file. Here's a simple nested selector:

body {
  background: gainsboro;
  a {
    background: tomato;
  }
}

https://caniuse.com/css-nesting

This has been delivered in Oracle APEX 24.2!

Comments

Comments

  • tcaruth OP 1.3 years ago

    but this workaround doesn't work for inline page css

    I stand corrected. A page's defined inline css is dumped directly into a style tag on the page, so minification and new css features not supported by the minifier will still work correctly.

    The editor will still highlight these as errors.

    For future readers: the suggested workaround is simply bypassing minification; which can be done by using #LOCATION#main.css as the reference instead of #LOCATION#main.min.css

  • ino.laurensse OP 1.2 years ago
  • tcaruth OP 1.2 years ago

    Thanks @ino.laurensse 

    Just to further the credibility of this idea, I'll mention the draft was updated April 24

    https://drafts.csswg.org/css-nesting/