search

TangibleInc / template-system

A template system for WordPress with content type loops and conditions
https://docs.loopsandlogic.com/reference/template-system/
6 stars 2 forks source link

Sass compatibility: Handling of slashes in CSS values #82

Open ghen-arvesu opened 7 months ago

ghen-arvesu commented 7 months ago

Hi @eliot-akira , looks like the new code editor cannot handle the CSS value below,it possible that it’s a problem with the slashes

grid-area: 1 / 1 / 2 / 2;

image

Work around:

 grid-row-start: 1;
 grid-column-start: 1;
 grid-row-end: 2;
 grid-column-end: 2;

Bug Source: https://discourse.tangible.one/t/code-editor-handling-of-slashes-in-css-values/1201

ghen-arvesu commented 7 months ago

Hi @eliot-akira

The customer noticed that the issue could be related to restricting maths inside of the calc property for CCS as it looks like its automatically doing calculations. Hope this help. thank you

eliot-akira commented 6 months ago

Thanks @ghen-arvesu. I've upgraded the Sass compiler (the PHP port we're using), but it turns out this is a known issue that's not solved yet.

For CSS properties that use a slash for any purpose other than division, the compiler doesn't yet support the syntax - and replaces it with the calculated value. The issue has been unsolved for a while, so I'm guessing it's not easy to fix.

As a workaround, the value can be wrapped with unquote('..'). For example:

grid-area: unquote('1 / 1 / 2 / 2');

I'll leave this issue open until it's solved "upstream" in the SCSS-PHP library.

We might move away from Sass in the future, since it's a bit of burden for maintenance - but some of its features are useful and still not possible with regular CSS.

An idea I'm considering is to use the official Sass compiler (written in Dart and server-side only) compiled to WebAssembly to run in the browser. That would ensure compatibility with the newest Sass/CSS specifications. But there will be questions to solve, like how to replace our current use of local Sass variables with CSS variables. I've opened a new issue #88 to keep track of the idea.