question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Possibility to write css as template literal

See original GitHub issue

👋 Hey, is it possible to add a way to write css as template literals?

Simple example:

import stylesheet from 'style9'

const styles = stylesheet`
  .one {
    color: red;
  }
`

console.log('my class', styles('one'))

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
johanholmerincommented, Aug 6, 2020

I’m not going to include support for template literals. style9 is about defining styles, not CSS classes, and objects enables thing that are not possible with strings, like strong typing.

If you are interested in using template literals you could try using https://github.com/JakeCoxon/babel-plugin-css-to-js in combination with style9.

0reactions
vladshcherbincommented, Aug 6, 2020

@sergiodxa I’ve checked them before but didn’t like styled api, just my personal preference to be zero runtime and more like css modules. Linaria and astroturf are best candidates so far but have issues unfortunately. Thanks for suggestion though 😉

Read more comments on GitHub >

github_iconTop Results From Across the Web

Template Literals | CSS-Tricks
The Template Literal, introduced in ES6, is a new way to create a string. With it comes new features that allow us more...
Read more >
Create a CSS Parser Using Tagged Template Literals - Medium
We're going to write our own tagged template literal. Although a few npm packages that use template literals to write CSS already exist ......
Read more >
How can i be able to apply style on template literals
It's possible to use a tag function and assign a css class only to the variables in the template string, thus styling dynamic...
Read more >
Understanding Tagged Template Literal in JS
Tagged Template Literals are a powerful feature that give us another option on how to parse strings in different ways. With them, the...
Read more >
JavaScript | template literals - GeeksforGeeks
Template Literal in ES6 provides new features to create a string that gives more control over dynamic strings. Traditionally, String is ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found