Linaria: Support Svelte.

[pbitkowski]

Hi Tony. Thanks for your request! I checked Svelte and it looks like a really good idea to support it.

[praneybehl]

Curious to know if this issue progressed, or as why it might be happening?

[jayu]

We don't have capacity to provide support for every bundler right now. Prs are very welcomed ❤️

[madhavarshney]

TLDR: order matters - { use: ['linaria/loader', 'svelte-loader'] }.

_Note: webpack runs loaders in reverse order (starting from the last in the list)_

Linaria works out-of-the-box with Svelte using webpack. The trick is to make sure linaria/loader comes _after_ svelte-loader so that the svelte syntax is compiled away by the time linaria processes it. The following rules in your webpack config should work:

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /node_modules/,
      use: 'linaria/loader',
    },
    {
      test: /\.svelte$/,
      use: [
        'linaria/loader',
        {
          loader: 'svelte-loader',
          options: {
            emitCss: true,
            hotReload: true,
          },
        },
      ],
    },
  ],
}

[madhavarshney]

For Rollup, follow the docs and enable emitCss: true for rollup-plugin-svelte. The following should work:

import svelte from 'rollup-plugin-svelte';
import css from 'rollup-plugin-css-only'; // for CSS bundling
import linaria from 'linaria/rollup';

export default {
  ...
  plugins: [
    svelte({
      dev: process.env.NODE_ENV !== 'production',,
      // allow `plugin-css-only` to bundle with CSS generated by linaria
      emitCss: true,
    }),
    linaria({
      sourceMap: process.env.NODE_ENV !== 'production',
    }),
    css({
      output: '<OUT_FOLDER>/bundle.css',
    }),
  ],
};

[jayu]

Thank you @madhavarshney, awesome contribution! I will test it soon If this will work we can update our docs. Wouldn't you mind to open a PR and update bundler integrations docs ?

[madhavarshney]

@jayu Sure! Did you get a chance to try it out? Let me know if I should spin up a sample repo that you can clone directly.

[jayu]

@madhavarshney Unfortunately I didn't have time for testing it. I wouldn't like to overuse your time, but any repo would be very helpful! Even for other users if you leave a link here 😀

[madhavarshney]

@jayu Here you go: https://github.com/madhavarshney/svelte-linaria-sample. Let me know what you think! I'll open a PR to update the docs sometime this week.

[jayu]

@madhavarshney I just tested your setup with rollup and webpack, It works like a charm! I'm really happy that people could use linaria with one more, amazing tool. If you still want to update docs, feel free to open a PR. I will assign this issue to you. I really appreciate your help 🥇 !

[madeleineostoja]

Is anyone successfully using Linaria with Svelte props? Using linaria for plain CSS in svelte components works, but whenever I try using a dynamic prop in a Linaria declaration I get the following error:

EDIT — Opened a new issue instead https://github.com/callstack/linaria/issues/702