CODEWITHSUNDEEP
svelterolluppostcsstailwind-csssvelte-3
Jérôme
Jérôme

Reputation: 2056

Components style ignored after production build

I have a Svelte application with Tailwindcss and Postcss configured.

In development mode everything is working well, every styles (global one and components styles) are used and working.

When I make a new production build, components styles are not used, it seems do be ignored during production build.

I add some style to my component like the Svelte documentation show and this is working well during dev local env.

<style>
  div {
    height: 37px;
  }

  div:hover {
    height: 72px;
    border-radius: 1rem;
  }
</style>

Even when I use a dedicated style file, the css bundle is totally failing and some other css properties (from tailwindcss) are not working...

I don't find inside my Rollup/Postcss configurations what seems to be wrong.

Here is my rollup.config.js

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import livereload from 'rollup-plugin-livereload';
import postcss from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import svelteSVG from 'rollup-plugin-svelte-svg';

const production = !process.env.ROLLUP_WATCH;

function serve() {
  let started = false;

  return {
    writeBundle() {
      if (!started) {
        started = true;

        // eslint-disable-next-line global-require
        require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
          stdio: ['ignore', 'inherit', 'inherit'],
          shell: true,
        });
      }
    },
  };
}

export default {
  input: 'src/main.js',
  context: 'window',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/build/bundle.js',
  },
  plugins: [
    postcss({
      extract: true,
    }),
    json(),
    svelteSVG(),
    svelte({
      preprocess: sveltePreprocess({ postcss: true }),
      dev: !production,
      emitCss: true,
      css: (css) => {
        css.write('public/build/bundle.css');
      },
    }),
    resolve({
      browser: true,
      dedupe: ['svelte'],
    }),
    commonjs(),
    !production && serve(),
    !production && livereload('public'),
    production && terser(),
  ],
  watch: {
    clearScreen: false,
  },
};

Here is my postcss.config.js

const cssnano = require('cssnano');
const postcssColorMod = require('postcss-color-mod-function');
const postcssPresetEnv = require('postcss-preset-env');
const postcssImport = require('postcss-import');
const postcssUrl = require('postcss-url');
const purgecss = require('@fullhuman/postcss-purgecss');
const tailwindcss = require('tailwindcss');
const postcssFontMagician = require('postcss-font-magician');

const production = !process.env.ROLLUP_WATCH;

module.exports = {
  plugins: [
    postcssFontMagician({
      variants: {
        'Roboto Mono': {
          300: [],
          400: [],
          700: [],
        },
      },
      foundries: 'google',
      protocol: 'https:',
    }),
    postcssImport(),
    postcssUrl(),
    tailwindcss(),
    postcssPresetEnv({
      stage: 0,
      autoprefixer: {
        grid: false,
      },
    }),
    postcssColorMod(),
    cssnano({
      autoprefixer: false,
      preset: ['default'],
    }),
    production &&
      purgecss({
        content: ['./**/*.svelte'],
        defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
      }),
  ],
};

After hours of seeking a solution and modifying configurations I can't make it works. I think the purgecss function is removing my component's style without conviction.

Everything seems to be OK, did I miss something?

EDIT

Even some JavaScript is not included in the final bundle. It's very weird

Upvotes: 0

Views: 2696

Answers (1)

grohjy
grohjy

Reputation: 2149

You can check couple of things:
Is cache purged?
Does public/global.css include your styles (or is it /public/build/bundle.css)?

You can make sure that your browser don’t use cached files by changing ”versions” in your index.html like this:

 <link rel="stylesheet" href="/global.css?v=2.4" />
 <link rel="stylesheet" href="/build/bundle.css?v=2.4" />
  <script defer src="/build/bundle.js?v=2.4"></script>

Those v=2.4 don’t mean anything, you just change/increase numbers after every build/deploy and this forces the browser to load fresh every file.

Open your global.css and search your style tags, do you find them. If yes then they are included and it’s cache problem. If not then it’s problem of treeshaking.

Upvotes: 1

Related Questions