giuseppeg / giuseppeg/styled-jsx-plugin-sass

Injecting dynamic variables to rewrite relative URLs

Open
#35 0 comments 2 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
121
Forks
24
PR merge metrics
No merged PRs in 30d

Description

We have a somewhat esoteric case where we use styled-jsx inside a Cordova app (via a `WKWebView`. Cordova apps load their index page from a local file, so `window.location` points to some file URL like `file:///Applications/...`.

While CSS loaded via `link` is fine, the `file://` URL has the side effect that relative URLs used in styled-jsx code won't work:

```jsx
{`
.thing {
background: url(/thing.png);
}
`}
```

We somehow have to change this to be an absolute URL:

```jsx
{`
.thing {
background: url(${Config.assetBase}/thing.png);
}
`}
```

...where `Config.assetBase` is a per-environment configuration. We can't define this string as a SASS variable globally because it's dependent on the current page. (We create a single Docker image for all environments.)

The above would be fine _if_ all our code used styled-jsx, but we also have a ton of shared `.scss` files we import that contain mixins and stuff that need to be augmented this way. We _could_ define `base` for all the imports:

```jsx
{`
$base: ${Config.assetBase}`;
@import "stuff"; // This now has access to $base
.thing {
background: url(${base}/thing.png);
}
`}
```

~~This works~~. This doesn't work because styled-jsx doesn't support string interpolation. Unfortunately, this means _every_ styled-jsx component needs to define this variable.

Is there a way to inject SASS variables _dynamically_ and _not_ at transpilation time? We can't do it during Babel transpilation because it's already too late — the base URL is effectively per-request, not a compile-time setting. Or is there a way to post-process the generated CSS so we can change relative URLs to be absolute?

Any ideas?

Contributor guide

No contributing guide indexed for this repository

Research direction

The issue names no source files, tests, or entry points; begin by locating the plugin's Sass processing and how styled-jsx handles runtime interpolation. Before implementation, establish whether dynamic Sass variables or post-processing is supported and define a testable acceptance criterion for rewriting relative URLs.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, sass, scss
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.