Class and Variable Suggestions from Common Style Files

The styleFilesConfig configuration key for codux.config.json makes working with classes and variables in Codux easier. With this configuration set up, Codux will make suggestions from your common style files when you add or create SASS vars, Stylable vars, native CSS vars, and classes. This not only streamlines the class creation process, but also encourages the reuse of common styles, leading to more consistent and maintainable code.

styleFilesConfig

Description: Formats code styling in the Codux code drawer.
Type: Object {}
Properties: commonStyleFilePattern (string)

How to add to codux.config.json

Property: commonStyleFilePattern

The commonStyleFilePattern property is an extended glob pattern that matches the file paths of common style files. For example, **/src/styles/common/*.css for CSS files in a common directory in src/styles with any depth of directories before.

Here's a sample configuration using this property:

1
2
3
4
5
6
{  
    "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
    "styleFilesConfig": {
        "commonStyleFilePattern": "**/src/styles/common/*.css"
    }
}

In this example, Codux is configured to look for CSS files in the src/styles/common directory of the project with any directory depth before ("**/" part ensures this).

As another example, let's say you modified the above to include all files in the common directory:

1
2
3
4
5
6
{  
    …
    "styleFilesConfig": {
        "commonStyleFilePattern": "**/src/styles/common/**"
    }
}

Here, all our project's .scss files are suggested:

Tip!

This configuration will also work for variables if properly imported globally via boardGlobalSetup configuration.

Was this article helpful?

Yes

Codux Help Center

Browse our articles to find the answers you need

Class and Variable Suggestions from Common Style Files

styleFilesConfig

Property: commonStyleFilePattern