yikoyu / vuetify-pro-tiptap

A Rich Text Editor (WYSIWYG) for Vue3 with tiptap & Vuetify.
https://yikoyu.github.io/vuetify-pro-tiptap/
MIT License
162 stars 24 forks source link

how to coexist with amfe-flexible and pxtorem #363

Open OoKyleoO opened 1 week ago

OoKyleoO commented 1 week ago

Im using amfe-flexible and pxtorem to fit mobile view, when introduce vuetify-pro-tiptap on PC, the icon of vuetify grow so big due to the rem css setting. How can I fix this?

OoKyleoO commented 1 week ago

I've fix this with a postcss plugin. For reference

const REM_REGEX = /(\d*.?\d+\s?)(rem)/gi;
const PROCESSED = Symbol("processed");

const remtoEm = (opts = {transformMediaQuery:true, onlyVClasses: true }) => {
// This function converts rem units to em units in CSS declarations and media queries
const { transformMediaQuery = false , onlyVClasses = false } = opts;

return {
postcssPlugin: "postcss-rem-to-em-plugin",
Rule(rule) {
if (onlyVClasses && !hasVClass(rule.selector)) return;

  rule.walkDecls(decl => {  
    if (!decl[PROCESSED]) {  
      decl.value = decl.value.replace(REM_REGEX, "$1em");  
      decl[PROCESSED] = true;  
    }  
  });  

  if (transformMediaQuery) {  
    rule.walkAtRules('media', atRule => {  
      if (!atRule[PROCESSED]) {  
        atRule.params = atRule.params.replace(REM_REGEX, "$1em");  
        atRule[PROCESSED] = true;  
      }  
    });  
  }  
},  
};
function hasVClass(selector) {
return /.(v-|text-)[^, {]+/.test(selector);
}
};