Style linting

We use Vite’s stylelint plugin with many customized rules to automatically lint our styles and make sure they comply with our standards.

There is a lot of automated work and the objective of this linting is for you to have a clear guidance on how to write styles in Terra projects, but since it is possible that you’ll need to override certain rules at certain points, we’ve provided a couple of simplified files that are available for you to edit.

What the linter does

This is a list of what the linter ensures:

Component names are valid c-- or g--
Reserved words fall within a list of accepted examples
Modifiers also fall within a list of accepted examples
Certain form modifiers are always inside a form Component
Ordinal modifiers are sequential
JavaScript hooks, invalid classes or ID’s are not used to style
Nested selectors are prefixed correctly with __ and --
Maximum nesting depth is 5

What you should override and when

You have three overriding options. Use them only for their intended purposes. If you need something that is not detailed here, reach out to Andrés or Amaia.

Experimental modifiers

You have one file called modifiers.mjs that will allow you to add experimental modifiers that you need in the allowed list of modifiers for one project only. This effectively adds them and allows you to use them within the project.

export const experimental = () => {
    return new Set([
    "second-align",
    "second-visibility",
]);
}

Flexible components

Some components, like content, table or slider, require some flexibility that the usual linter would not allow: external classes, more nesting depth…

You can add them into an array of components where namings, nesting depth and ID selectors will be ignored by using the following file:

/**
 * Flexible Components
 *
 * Components listed here are exempt from:
 * - Strict element naming validation (can use any nested selectors)
 * - Max nesting depth limit (default: 5)
 * - ID selector restriction (can use #id selectors)
 *
 * Add component names (without the c--/g-- prefix and -letter/-number suffix)
 * Example: 'content' matches c--content-a, g--content-01, etc.
 */
export const flexible = () => {
   return ['content', 'table', 'slider'];
}

Disable linter for external files

Some external libraries, like tiny slider, will force you to use their classes in order to style the elements. For these, we can directly use a linter disabler in the scss file:

// Version: 2.9.4
// ! External class
// stylelint-disable
.tns-outer {
    padding: 0 !important; // remove padding: clientWidth = width + padding (0) = width
    [hidden] {
        display: none !important;
    }
    [aria-controls],
    [data-action] {
        cursor: pointer;
    }
}

...

The stylelint-disable instruction works from where it’s put until the end of the file, unless we add stylelint-enable at a lower point in the file.

Knowledge Check

Test your understanding of this section

Loading questions...