module that works in electron and browser

[max-mapper]

hey, i'm using this in an electron app but want to write components that work in both electron and the browser

given code like this:

var csjs = require('csjs-inject')
module.exports = csjs`
.foo { color: salmon }
`

in electron, since no bundling is required, csjs-inject is the only way to use csjs. but in a browser I would want to change it to use csjs instead. maybe if you use the browser field of package.json and override csjs-inject with a no-op if it's being bundled with browserify then the same code would work for both use cases?

[rtsao]

In your browser use case, how is the CSS getting added to the page? If I understand correctly, it sounds like with electron you want to rely on the injection provided by csjs-inject but don't want that with browserify -- presumably because there's some alternate method the CSS is getting added?

[max-mapper]

I guess it makes more sense to describe the use cases as bundling vs not bundling. If I'm creating a bundle with browserify I would use something like csjs-injectify or csjs-extractify at bundle time, so I would want the csjs-inject code to not happen in that case. But when I am not bundling (e.g. in electron, or maybe just doing a small browser based demo that doesnt bundle), then I do want csjs-inject to kick in.

[rtsao]

Ah, I see. Running non-bundled code inside electron was not a use case I had thought of initially (I was only thinking of server-side node and bundled code inside browsers/electron).

I wonder if maybe something like this would work:

var csjs = require('csjs-inject/non-bundled');

where the package.json of csjs-inject contains:

"browser": {
    "./non-bundled.js": "./no-inject.js"
}