clearmatics / qreacto

Run standalone React components in your Quarto project!
https://clearmatics.github.io/qreacto/example.html
MIT License
34 stars 1 forks source link

Add support for style module imports #23

Open tech-team-rural-mda opened 2 months ago

tech-team-rural-mda commented 2 months ago

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 commented 1 month ago

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