1

I am doing migration vue3 project from webpack to vite. Everything was going well except for the ckeditor. In ck-editor, there is a configuration doing .css and .svg file transpile. https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html#configuring-vueconfigjs

I made a plug-in to do the simillar process but it's not perfectly working.

ckeditor.util.ts

const fileRegex = /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/;
// https://vitejs.dev/guide/api-plugin.html#transforming-custom-file-types
// https://rollupjs.org/guide/en/#plugin-development
export default () => {
  return {
    name: "vite-ckeditor-svg-plugin",
    // https://rollupjs.org/guide/en/#transform
    transform(src, id) {
      if (fileRegex.test(id)) {
        // raw-loader
        src = fs.readFileSync(id, "utf8");
        const json = JSON.stringify(src)
          .replace(/\u2028/g, "\\u2028")
          .replace(/\u2029/g, "\\u2029");
        return {
          code: `export default ${json}`,
          map: { mappings: "" },
        };
      }
    },
    // https://rollupjs.org/guide/en/#generatebundle
    generateBundle(options, bundle) {
      for (const [filename, info] of Object.entries(bundle)) {
        if (fileRegex.test((info as AssetInfo).name)) {
          delete bundle[filename];
        }
      }
    },
  };
};

vite.config.js

import CkeditorUtil from "./src/utils/ckeditor.util";
// https://vitejs.dev/config/
export default defineConfig({
  ...
  plugins: [
    vue(),
    CkeditorUtil(),
  ]
  ...
})

and get error

Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
    @mixin icon {
    ^

What I did to solve this problem is basically everything here https://tailwindcss.com/docs/using-with-preprocessors#nesting , install postcss-mixins not working, and lastly try to make another plug-in like this

const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
const fileRegex = /ckeditor5-[^/\\]+[/\\].+\.css$/;
export default () => {
  return {
    name: "vite-postcss-svg-plugin",
    transform(src, id) {
      if (fileRegex.test(id)) {
        src = fs.readFileSync(id, "utf8");
        // try to do like this but getPostCssConfig() is working with webpack  
        // so unable to call this with vite
        // postcssOptions: styles.getPostCssConfig( {
        //                themeImporter: {
        //                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
        //                },
        //                minify: true
        //           } )
        return {
          code: `export default ${json}`,
          map: { mappings: "" },
        };
      }
    },
  };
};

I guess I'm missing the postcss-loader to transpile the .css files imported by the editor. What's really problem and How to make it work?

Jongmin Yoon
  • 21
  • 3
  • Can you publish something reproducible ? – flydev Mar 04 '22 at 10:42
  • @flydev I'm trying making a demo using CodeSandBox but I get error 'Cannot use import statement outside a module'. Something is broken in CodeSandBox... https://github.com/codesandbox/codesandbox-client/issues/6194. btw, I just changed to Tip-Tap editor and it works fine. now, I am just curious what the problem was, and how to fix it. – Jongmin Yoon Mar 04 '22 at 17:23
  • Did you solve this problem? I am also trying to use ck editor from source using vue3 and vite – Zdenek Hatak Mar 14 '22 at 14:55
  • 1
    @ZdenekHatak No, I didn't. There is not much docs about vite and ck-editor. I just changed to TipTap editor and it works like a charm. – Jongmin Yoon Mar 15 '22 at 05:52

1 Answers1

0

'vite-plugin-raw' is simillar 'raw-loader'. I used it to solve .svg

General Grievance
  • 4,555
  • 31
  • 31
  • 45
adan
  • 1