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

Add support for style module imports #23

Open
tech-team-rural-mda opened this issue Sep 24, 2024 · 1 comment
Open

Add support for style module imports #23

tech-team-rural-mda opened this issue Sep 24, 2024 · 1 comment

Comments

@tech-team-rural-mda
Copy link

tech-team-rural-mda commented Sep 24, 2024

In the directory _components, there's a file called App.tsx that defines the component. The App component begins with:

import style from "./App.module.css";

... referring to another file located in the same _components dir called ./App.module.css. When attempting to preview or render, quarto fails with this error:

App > react-App-IeolzYf2
ERROR (/.../Documents/CORI/coriverse/modules/cori.data.rin/_extensions/clearmatics/qreacto/qreacto.lua:226) local import not found: /.../Documents/CORI/coriverse/modules/cori.data.rin/_components/App.module.css
Error: File not found or unable to open.
Error running filter /Applications/quarto/share/filters/main.lua:
...ori.data.rin/_extensions/clearmatics/qreacto/qreacto.lua:133: attempt to concatenate a nil value (local 'content')
stack traceback:
        ...ori.data.rin/_extensions/clearmatics/qreacto/qreacto.lua:282: in upvalue 'inject_imported_stylesheets'
        ...ori.data.rin/_extensions/clearmatics/qreacto/qreacto.lua:381: in function <...ori.data.rin/_extensions/clearmatics/qreacto/qreacto.lua:354>
        (...tail calls...)
        [string "..."]:1888: in function <[string "..."]:1886>
        (...tail calls...)
        /Applications/quarto/share/filters/main.lua:20078: in upvalue 'handle_shortcode'
        /Applications/quarto/share/filters/main.lua:20122: in function </Applications/quarto/share/filters/main.lua:20114>
        [C]: in ?
        [C]: in method 'walk'
        /Applications/quarto/share/filters/main.lua:557: in function </Applications/quarto/share/filters/main.lua:546>
        (...tail calls...)
        /Applications/quarto/share/filters/main.lua:20162: in field 'Pandoc'
        /Applications/quarto/share/filters/main.lua:568: in function 'run_emulated_filter'
        /Applications/quarto/share/filters/main.lua:1334: in local 'callback'
        /Applications/quarto/share/filters/main.lua:1352: in upvalue 'run_emulated_filter_chain'
        /Applications/quarto/share/filters/main.lua:1388: in function </Applications/quarto/share/filters/main.lua:1385>
stack traceback:
        /Applications/quarto/share/filters/main.lua:557: in function </Applications/quarto/share/filters/main.lua:546>
        (...tail calls...)
        /Applications/quarto/share/filters/main.lua:20162: in field 'Pandoc'
        /Applications/quarto/share/filters/main.lua:568: in function 'run_emulated_filter'
        /Applications/quarto/share/filters/main.lua:1334: in local 'callback'
        /Applications/quarto/share/filters/main.lua:1352: in upvalue 'run_emulated_filter_chain'
        /Applications/quarto/share/filters/main.lua:1388: in function </Applications/quarto/share/filters/main.lua:1385>
@dweng0
Copy link
Collaborator

dweng0 commented Sep 25, 2024

Hey @tech-team-rural-mda thanks for reaching out. You're right at the moment the lua script only picks up css files in a very rudimentary way where you just specify the css and it imports it. css modules has been around for a while, but it wasn't really a "thing" when i created this extension! But lets see if we can debug and work out what needs updating.

From the trace it looks like the linematching works ok https://github.com/clearmatics/qreacto/blob/main/_extensions/qreacto/qreacto.lua#L180

It also looks like (based on your trace) it finds the file correctly here.https://github.com/clearmatics/qreacto/blob/main/_extensions/qreacto/qreacto.lua#L186 (unless the file isn't located at /cori.data.rin/_components/App.module.css ?).

But after that, it looks like its treating the module like a jsx file and falling into the import check https://github.com/clearmatics/qreacto/blob/main/_extensions/qreacto/qreacto.lua#L203-L227.

This kind of makes sense as it is an import. So This will need to be tightened up to allow for css modules to be imported and treated appropriately. Thanks for pointing this out, i'll schedule some time to fix it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants