search

KyleAMathews / typography.js

A powerful toolkit for building websites with beautiful design
http://kyleamathews.github.io/typography.js/
MIT License
3.84k stars 182 forks source link

CSS pseudo classes not working in overrideThemeStyles() #181

Closed grubersjoe closed 5 years ago

grubersjoe commented 6 years ago

I'm trying to set the CSS pseudo class :before of a li element like this:

theme.overrideThemeStyles = () => ({
  li: {
    marginBottom: '0.25rem',
  },
  'li:before': {
    content: '*',
  },
});

Unfortunately, this has no effect at all. The li:before rule is simply ignored and won't show up in the resulting CSS. I also tried &:before inside of the li block, but this doesn't work either.

The pseudo elements :before and :after are very useful sometimes and in this case I'd like to style lists globally instead of using a component every time. So I think it would be a good thing to support this.

suniahk commented 6 years ago

I managed to get my own example working by wrapping the content in additional quotes, as the CSS needs to have the quotes for content to work. So for your example, it should work with

theme.overrideThemeStyles = () => ({
  li: {
    marginBottom: '0.25rem',
  },
  'li:before': {
    content: "'*'", // <- Notice, double quotes for the js, single for the css
  },
});
grubersjoe commented 5 years ago

Thank's for the suggestion. Meanwhile, I think that this kind of functionality is not really in the scope of typography.js. Closing the ticket...