madhavarshney/svelte-linaria-sample

A sample repo showing how to integrate Linaria with Svelte (webpack and rollup)

svelte-linaria-sample

This repo shows how to use the CSS-in-JS library linaria with Svelte v3. The example folder svelte-rollup is generated from sveltejs/template and the example folder svelte-webpack is generated from sveltejs/template-webpack.

Contents

• Svelte with Rollup
• Svelte with Webpack
• Contributing

Rollup

Running the sample

Install the dependencies...

cd svelte-rollup
npm install

...then start Rollup:

npm run dev

Navigate to localhost:5000.

Adding to a project

Take a look: d964432

Install linaria and rollup-plugin-css-only:

npm install -D linaria rollup-plugin-css-only
# OR
yarn add --dev linaria rollup-plugin-css-only

Update rollup.config.js

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

const dev = process.env.NODE_ENV !== 'production';

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

IMPORTANT: rollup-plugin-css-only generates incorrect sourcemaps (see thgh/rollup-plugin-css-only#10). Use an alternative CSS plugin such as rollup-plugin-postcss instead in the same way as above.

Webpack

Running the sample

Install the dependencies...

cd svelte-webpack
npm install

...then start webpack:

npm run dev

Navigate to localhost:8080.

Adding to a project

Take a look: 5ffd69d

Install linaria:

npm install -D linaria
# OR
yarn add --dev linaria

Update webpack.config.js:

const prod = process.env.NODE_ENV === 'production';

const linariaLoader = {
  loader: 'linaria/loader',
  options: {
    sourceMap: !prod,
    cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/.linaria-cache')
  }
};

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: [linariaLoader]
      },
      {
        test: /\.svelte$/,
        use: [
          linariaLoader,
          {
            loader: 'svelte-loader',
            options: {
              dev: !prod,
              emitCss: true,
              hotReload: true
            }
          }
        ]
      },
      ...(CSS rules)
    ]
  }
}

Contributing

All contributions are welcome. Please open an issue or PR if there's something that can be fixed.

Also, consider starring ⭐ this repo if it helped you!

License

The code in this repo is licensed under the MIT license.