Giters

csstools / postcss-nesting

Nest style rules inside each other

Home Page:https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Nesting Rule Validation

vasco-santos opened this issue · comments

commented

Hello,

Regarding the commit for version 4.0.1, the nesting rule validation had an impact on the verification of selectors that start with -

Version 4.0.0

/^&([^A-z]|$)/.exec(selector)

Version 4.0.1

/&([^\w-]|$)/.exec(selector)

Considering this change, the first one ignored all letters, while the new one ignores all Word Character. However, the new regex also ignores the -.

As a consequence of the - being ignored, the postcss-nexting cannot be used with a CSS Loader containing the camelCase option dashes (for the mapping between the className and the selector). For example:

.list {
    list-style-type: none;

    &-item {
        display: flex;
        justify-content: space-between;
    }
}

Taking into consideration the example, the css classname list-item is ignored.

Therefore, is there any reason for ignoring the - character? If not, I would recommend changing the regex for the following one:

/&([^\w]|$)/.exec(selector)

commented

@vasco-santos because it is not possible by spec (http://tabatkins.github.io/specs/css-nesting/)

You can use https://github.com/postcss/postcss-nested if you want this behaviour.

commented

Nevertheless, this is a huge breaking change from the consumer perspective. This should have been a major and is causing some of our projects to fail. Please follow the semver semantics next time.

commented

The major breaking change in v4 was to only respect valid nesting. It seemed against the spirit of semver to push major releases for fixing exploitable bugs.