rollup-css

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import svelte from 'rollup-plugin-svelte';
import babel from 'rollup-plugin-babel';
import postcss from 'postcss';
import postcssrc from 'postcss-load-config';
import syntax from 'postcss-syntax';
import env from 'postcss-preset-env';
import { promises as fs } from 'fs';
import { sync as rimraf } from 'rimraf';
import { createFilter } from 'rollup-pluginutils';

const paths = {
  from: 'src',
  to: 'public',
};
const production = !process.env.ROLLUP_WATCH;

// rimraf(paths.to);

export default {
  input: `${paths.from}/index.js`,
  output: {
    format: 'esm',
    dir: paths.to,
    sourcemap: true,
    preferConst: true,
  },
  plugins: [
    resolve({
      browser: true,
      modulesOnly: true,
    }),
    svelte({
      exclude: '**/*.html',
      dev: !production,
      emitCss: true,
      preprocess: {
        async style({ content, filename }) {
          const { css } = await postcss([
            env({
              stage: false,
              autoprefixer: false,
              features: {},
            }),
          ]).process(content, { from: filename });

          return {
            code: css,
          };
        },
      },
      // async css(source) {
      //   const { code } = source;
      //   const { plugins, options } = await postcssrc({ production });
      //   const { css } = await postcss(plugins).process(code, { ...options, from: undefined });

      //   source.code = css;
      //   source.write(`${paths.to}/index.css`);
      // },
    }),
    css({
      // targets: [
      //   {
      //     from: `${paths.from}/index.html`,
      //     to: `${paths.to}/index.html`,
      //   },
      // ],
      ctx: {
        production,
      },
    }),
    babel({
      extensions: ['.svelte', '.js'],
    }),
  ],
  watch: {
    clearScreen: false,
  },
  treeshake: production,
};

function css(options = {}) {
  let { include, exclude, targets, ctx } = options;

  if (!include) include = '**/*.{html,css}';

  const filter = createFilter(include, exclude);

  let arr = [];

  return {
    name: 'css',

    async transform(code, id) {
      if (!filter(id)) return;

      // ???????????????????????????????????????????????????????????????????????
      // console.log(id);
      arr.push(id);
      // console.log(arr);

      const filename = id
        .split('\\')
        .pop()
        .split('.')
        .shift();
      const fileext = id.split('.').pop();
      const { plugins, options } = await postcssrc(ctx);
      const { css } = await postcss(plugins).process(code, {
        ...options,
        syntax: syntax,
        from: id,
        // map: {
        //   inline: false,
        // },
      });

      // css = css.replace(/^\/\*#.*\/$/gm, `/*# sourceMappingURL=${filename(id)}.css.map */`);

      if (fileext === 'css') await fs.writeFile(`${paths.to}/${filename}.css`, css);
      if (fileext === 'html') await fs.writeFile(`${paths.to}/${filename}.html`, css);
      // await fs.writeFile(`${paths.to}/${filename}.css.map`, map.toString());

      return {
        code: '',
        map: null,
      };
    },

    async buildEnd() {
      if (targets) {
        for (const { from, to } of targets) {
          if (from && to) {
            const code = await fs.readFile(from).catch((err) => console.log(err));
            const { plugins, options } = await postcssrc(ctx);
            const { css } = await postcss(plugins).process(code, {
              ...options,
              syntax: syntax,
              from,
              to,
            });

            await fs
              .access(paths.to)
              .then(async () => await writeHtmlFile())
              .catch(async () => {
                await fs.mkdir(paths.to).catch((err) => console.log(err));
                await writeHtmlFile();
              });

            async function writeHtmlFile() {
              await fs.writeFile(to, css).catch((err) => console.log(err));
            }
          }

          // return 'err';
        }
      }

      // console.log(arr);
      // const result = arr.filter((file) => file.split('.').pop() === 'css');
      // console.log(result);
      // let code;
      // for (const file of result) {
      //   // console.log(file)
      //   code += await fs.readFile(file)
      // }
    },

    async generateBundle() {
      const result = arr.filter((file) => file.split('.').pop() === 'css');
      console.log(result);
      let code;
      for (const file of result) {
        // console.log(file)
        code += await fs.readFile(file)
      }
    },
  };
}