Question 306943 in CSS Question posted in
Some basic documentation can be found here.

Vue 3: disable renaming CSS properties from "top/bottom/left/right" to "inset"

Vue (or maybe Vite) automatically converts my css style from
"top: 0; right: 0; left: 0; bottom: 0;"
to "inset: 0px;"

Since I need to support older browsers, where inset is not available, this results in a bug.
I need to have top/right/left/bottom and not inset in the final css output.

I tried to apply style like this:

:style="'to'+'p: 0; right: 0;' + ' left: 0; bot'+'tom: 0;'"

But it converts to inset anyway.

I also have

build: {
    target: 'es2015'
  }

in my vite.config.ts

I expected to have the styles exactly how I input them.

Tags:

2

Answers


  1. 0

    Where do you see it’s converted?

    Did you inspect your file build and find that there is a inset and not your bottom, top , left … property?

    Because, in other case the conversion is done not by the projet or the build, but the browser itself see this for example.

    And in that case, this is not a problem, the browser do it because is support it.

    Login or Signup to reply.
  2. 0

    You can use a polyfill that is for PostCSS, postcss-logical. It gives you the opportunity to still author your code with logical properties while fixing the browsers support for it. Once the support is there it will no longer build for logical properties.

    Do you know if it’s lightning or PostCSS that is used in your project?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search