Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
cderv opened this issue Jan 9, 2025 · 0 comments
Assignees
Labels
enhancement New feature or request themes Related to HTML theming or any other style related issue (like highlight-style) triaged-to Issues that were not self-assigned, signals that an issue was assigned to someone.
Milestone

Comments

@cderv
Copy link
Collaborator

cderv commented Jan 9, 2025

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)

@cderv cderv added enhancement New feature or request themes Related to HTML theming or any other style related issue (like highlight-style) triaged-to Issues that were not self-assigned, signals that an issue was assigned to someone. labels Jan 9, 2025
@cscheid cscheid added this to the v1.7 milestone Jan 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request themes Related to HTML theming or any other style related issue (like highlight-style) triaged-to Issues that were not self-assigned, signals that an issue was assigned to someone.
Projects
None yet
Development

No branches or pull requests

2 participants