Question about CSS support in pseudo-elements

[jiyuujin]

I'd like to hear about the behavior of css support in pseudo-elements. I think it don't work properly below.

Environment:

• node.js 16.18.1
• nuxt 3.2.0
• pinceau 0.18.0

css({
  '.title': {
    'h3': {
      position: 'relative',
      '&::before': {
        content: '',
        position: 'absolute',
        top: '50%',
        left: 0,
        display: 'inline-block',
        width: '45px',
        height: '1px',
        backgroundColor: '#fff',
      },
    },
  },
})

Is there anything that seems strange to you?

[SGAMERyu]

can you provide a minimum reproducible available repository

[jiyuujin]

Sample repository have been created, and please check it

[SGAMERyu]

It should be that the content property is erased for the string, and I made a judgment call in this pr https://github.com/Tahul/pinceau/pull/77

.test::before {
   content: 
}

Therefore, the style does not take effect

[SGAMERyu]

@jiyuujin I have noticed that the 'content' property in CSS can be manipulated using the "''" syntax. However, it does not handle errors well when dealing with quotation marks enclosed in double quotes.

[Tahul]

I'm bumping this as I should think of a better solution than #77 ;

For now I'm pretty sure you can workaround this issue using:

defineTheme({
   utils: {
      content: (value) => value ? value : `\'\'`
   }
})

Utils properties can also be used to overwrite native css properties behavior :)