vercel/styled-jsx

Resolve urls inside separate css-files

Open

#598 opened on Nov 8, 2019

View on GitHub
 (6 comments) (2 reactions) (0 assignees)JavaScript (7,547 stars) (310 forks)batch import
enhancementhelp wanted

Description

Do you want to request a feature or report a bug?

Request a feature or request docs addition

Images in url() do not resolve if separate css-files setup is used.

https://github.com/zeit/styled-jsx#styles-in-regular-css-files Here it is documented how to use separate files for styles. However if we do that we can no longer insert images resolved by Webpack.

I tried to use css-loader but then the styles are rendered in such a way that it won't work at all.

Are there any plans or ideas how to handle this properly? Css inside components doesn't seem right but images have to be handled with Webpack. Normally there are some means to parse them out of url(). Without Webpack I can't use image loaders like those that encode images in base64. Without separate files I can't use IDE css helping tools. Something is off.

I ended up rolling my own Webpack loader to handle this but it seems like too much complexity.

Contributor guide

Tech stack
javascriptreactcss
Domain
frontendbuild system
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
styled jsxWebpackCSS url() resolution
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
Investigate the styled jsx Webpack plugin's handling of external CSS files. Determine how to parse url() references and resolve them using webpack's asset resolution. Consider adding a configuration option to enable CSS loader integration. Test with webpack's url loader or asset modules.