Rollup. js - иметь Post CSS для обработки всего пакета. css вместо отдельных файлов из rollup-plugin-svelte - PullRequest
Новая
       36

Rollup. js - иметь Post CSS для обработки всего пакета. css вместо отдельных файлов из rollup-plugin-svelte

0 голосов
/ 17 января 2020

Я перепробовал несколько руководств и множество конфигураций, но не могу заставить мой процесс накопления, публикации css и связки svelte работать правильно.

Сейчас плагин svelte извлекает css из моих файлов .svelte и отправляет его в плагин posct css, но он делает это по одному файлу за раз вместо всего пакета. Это делает так, что некоторые функции в плагинах purge css и nano css post css не работают полностью, потому что им нужен весь пакет для таких вещей, как удаление дублирующих / избыточных / неиспользуемых css правил. 

// rollup.config.js
import svelte from 'rollup-plugin-svelte'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import livereload from 'rollup-plugin-livereload'
import { terser } from 'rollup-plugin-terser'
import rollup_start_dev from './rollup_start_dev'
import builtins from 'rollup-plugin-node-builtins'
import postcss from 'rollup-plugin-postcss'

const production = !process.env.ROLLUP_WATCH

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/bundle.js',
    },
    plugins: [
        svelte({
            dev: !production,
            emitCss: true,
        }),
        postcss({
            extract: true,
            sourceMap: true,
        }),
        builtins(),
        resolve({
            browser: true,
            dedupe: importee =>
                importee === 'svelte' || importee.startsWith('svelte/'),
        }),
        commonjs(),
        !production && rollup_start_dev,
        !production && livereload('public'),
        production && terser(),
    ],
    watch: {
        clearScreen: false,
    },
}

// postcss.config.js
const production = !process.env.ROLLUP_WATCH
const purgecss = require('@fullhuman/postcss-purgecss')


module.exports = {
    plugins: [
        require('postcss-import')(),
        require('tailwindcss'),
        require('autoprefixer'),
        production &&
            purgecss({
                content: ['./src/**/*.svelte', './src/**/*.html', './public/**/*.html'],
                css: ['./src/**/*.css'],
                whitelistPatterns: [/svelte-/],
                defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
            }),
        production &&
            require('cssnano')({
                preset: 'default',
            }),
    ],
}

Как сделать так, чтобы сведение прошло весь пакет. css для публикации css вместо одного "файла" за раз?

...