CSS Imports

Although CSS custom properties significantly reduce the need for general CSS preprocessing, there are still a handful of circumstances where there is a lot of style repetition due to the lack of inheritance support. In particular, unstyling buttons and focus states to have the same appearance on all browsers is quite repetitive, and typography can have multiple parts (e.g., font-family and font-size) which makes custom properties less useful.

Vanilla Plus JS provides a preprocessor command to include the directives within a different qualified rule into the current one. This does not create additional declarations and thus the rules prelude must be specified exactly. It will not copy over additional styles if the rule is overriden in various at-rules - it will only take the top-level qualified rule matching the given prelude. The behavior is undefined when multiple matching top-level qualified rules exist - for performance, the imported file may be in any state of parsing after completely determining the first matching top-level qualified rule, and hence, Vanilla Plus JS may not behave consistently.

Imports will come from the default CSS file (typically src/public/css/main.css) unless otherwise indicated. Here is an example that would work within the default CSS file:

.text-body-1 {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.125rem;
    line-height: 1.5;
}

p {
    /*! PREPROCESSOR: import .text-body-1 */
}

The above example would be equivalent to:

.text-body-1 {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.125rem;
    line-height: 1.5;
}

p {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.125rem;
    line-height: 1.5;
}

The file to import from can be specified in the preprocessor directive:

p {
    /*! PREPROCESSOR: import .text-body-1 FROM /css/typography.css */
}

Where the file is specified relative to the src/public directory. You may reference rules within the same file before they are declared, and you may reference rules within another file, but you cannot cause circular file dependencies or circular rule dependencies. Build times are improved by having more commonly imported styles near the top of the file in the order they are needed, though this is rarely an issue if file sizes are kept reasonable.

This is related to but not quite the same as nesting support, which you can follow the W3C Working Draft for.