styled-jsx-url-loader

 

Webpack loader to transform url() to es6 imports inside the css or sass when using separate files to create styled-jsx styles.\
This loader needs to be used together with styled-jsx/webpack loader.\
It's similar to what css-loader does, but css-loader is incompatible with styled-jsx/webpack loader.

Installation

Using yarn:

``sh
yarn add styled-jsx-url-loader --dev
`

Or using npm:

`sh
npm install styled-jsx-url-loader --dev
`

Configuration

This loader should be executed right after styled-jsx/webpack and before babel loader.\
Since loaders are executed from last to first, usage can be like this (with next.js):

`js
config.module.rules.push({
test: /\.s?css$/,
use: [
options.defaultLoaders.babel,
{
loader: require.resolve('styled-jsx-url-loader'),
options: {},
},
{
loader: require('styled-jsx/webpack').loader,
options: {
type: 'scoped',
},
},
],
})
`

Options

#### scss

Type: Boolean\
Default: false

Allow parsing scss code.\
(It will not transform scss to css, only allow parser to parse it)

#### exclude

Type: String|RegExp\
Default: null

Exclude urls from transformations.

#### debug

Type: Boolean\
Default: false

Print debug messages.

Caveats

Sass variables inside the urls are not supported. For example: background: url($heroImage)`.\
If you need to transform urls with variables, transform your sass code first to plain css.

There is no source maps support. (PR welcome)

License

MIT © Daniel Husar