Skip to content

Support SASS import statement when analyzing SCSS variable to expose CSS variable #11824

@cderv

Description

@cderv

Currently, when some variable are defined inside a scss file used as @import inside main theme files, some warning like this will be thrown

Warning: variable used before declaration
variable:  my-blue 1047

This was introduced by brand work in #10727 to warn when exposing all SCSS variable to CSS variable, if a variable is found before it seems to be defined.

This analysis should handle SASS import and look in there too to avoid those uncessary warnings (which are confusing to users).

Reproducible example

$ quarto create project website test-scss
$ rm style.css

and modify

  • style.scss

    /*-- scss:defaults --*/
    
    // import shared colors
    @import '_colors';
    
    /*-- scss:variables --*/
    $primary: $my-blue;
  • _colors.scss

    /* Color definitions */
    $my-blue:             #174570;
  • _quarto.yml

    format:
      html: 
        theme: 
          - styles.scss

Then

❯ quarto preview
Terminating existing preview server....DONE

Preparing to preview

Watching files for changes
Browse at http://localhost:6032/
Warning: variable used before declaration
variable:  my-blue 1047
GET: /

Use case

This was encountered by @m-- while using Posit doc extension (https://github.com/posit-dev/product-doc-theme)

Metadata

Metadata

Assignees

Labels

enhancementNew feature or requestthemesRelated to HTML theming or any other style related issue (like highlight-style)triaged-toIssues that were not self-assigned, signals that an issue was assigned to someone.

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions