Improve custom style syntax

[rickhallett]

Do you think that something like log('this is <style="color: red">red</style>') makes the API syntax more specific? I think particularly in terms of beginners and consistency with HTML.

Best regards, Rick

[adamschwartz]

Hey again, Rick! I’ve never been particularly satisfied with log('this is [c="color: red"]red[c]') but I’m not sure I find this syntax much more appealing. I’m definitely open to suggestion though.

[rickhallett]

Once I've played with regexp I will see if I can generate some other suggestions!

[rickhallett]

@adamschwartz the only other syntax I feel isn't difficult to read is something akin to the handlebars templating syntax, perhaps like log('this is <"color: red">{{red}}');

Beyond that, I haven't been able to create anything that isn't pretty ugly. I did a small poll on a slack channel I'm a member of and most people preferred the one initially suggested as it mimics HTML style tags.

Any thoughts?

[adamschwartz]

Thanks for conducting that poll!

As strange as it may sound, I might be more of a fan of something like log('this is <span style="color: red">red</span>'). While this arbitrarily adds support for <span> elements, and is more verbose, I think I find it preferable to creating a pseudo-HTML syntax like <style="..."> or <"...">.

Another possible syntax which might be worth considering is something like "custom element" support, with an associated style object. This would allow for style reusability which none of the current options support (without manually using variables and string concatenation).

Something like this:

log(`
  <header>Result</header>
  <green>The result was successful.</green>

  <header>Instructions</header>
  - Re-run the test by refreshing the page.
  - Add query parameters <code>?safe=true</code> to run the test in safe mode.
`, {
  header: {
    'font-family': 'system-ui, sans-serif',
    'font-size': '13px',
    'color': '#444',
    'padding': '8px 0',
    'line-height': '40px'
  },
  green: {
    'color': 'green'
  },
  code: {
    'font-family': 'monospaced',
    'background': '#eee'
  }
})

[rickhallett]

Wow, that is quite an idea - I can see your thinking for sure. In my opinion, it would be a huge improvement to the current implementation. This is a sizeable piece of work for someone of my ability - would you like me to try and implement this? I would be keen to give it a go.

[adamschwartz]

Up to you!

[jukben]

Hey, I built a similar project based on your ideas https://github.com/jukben/stylog You might want to check it out. 🚀