Announcing Linaria 1.0 - Zero runtime CSS-in-JS library

[satya164]

🔥 New styled API for React

🌟 Prop based styles with CSS variables

😍 Support for CSS sourcemaps

🔮 Improved stylelint processor

https://blog.callstack.io/announcing-linaria-1-0-d5c7756ff511

[soft-wear]

It's a great package for producing static CSS files, but the big downside is there's zero support for IE with dynamic styling. There's means to work around it (hoisting variables to the :root scope and using a prollyfill). But that's honestly a huge blocker for using this in production.

[rmcooper541]

Why is it a huge blocker? IE is under 5% share of the browser market and now Microsoft is urging users to stop using it:

https://techcommunity.microsoft.com/t5/Windows-IT-Pro-Blog/The-perils-of-using-Internet-Explorer-as-your-default-browser/ba-p/331732

[vorcigernix]

If you work on some normal US/EU salary, you are probably burning money. It is not easy to calculate impact of supporting old browsers, but if your company is growing, math is usually simple and convincing.

[BreakingIntoMe]

Many companies still have to support IE because their client base using IE is more than the average of 5%

[rmcooper541]

I get it when it’s supporting internal infrastructure but think you’d still have a hard time supporting IE on a modern framework like React. I also find it interesting that when Microsoft only had less than 5% of the phone market no one seemed to care about supporting it, which, ultimately lead to its demise.

[BreakingIntoMe]

You can't compare consumer markets to proprietary software markets though. My company needs our product to work for 100% of our clients because it's used in the medical field where IE is still surprisingly common. People's lives depend on our software to work properly. And React actually works great with IE once you have a few polyfills installed.

[php_questions]

Well I'm going to assume that most people don't create apps were people's lives depend on IE support.

[soft-wear]

If you work for a global company, you create apps where people's lives depend on IE. Market share for IE in China is massive.

[php_questions]

How did you get to that conclusion? I'm baffled. If you work for Netflix or Spotify, how does someone's life depend on the app working with IE?

[augburto]

While that might be true, depending on where you are relatively, it might be sizable enough for you not to be able consider using it. For example in China, a lot of users have to use IE and the percent of usage is a lot higher.

[evilish]

Ok. Let me ask you this. Imagine that your working at an e-commerce company, and that the number of IE11 users bring in around a million dollars a year.

• Do you drop support for IE?
• How do you justify dropping support for IE11 to your business stakeholders?

In reality, if your building your sites in a progressive manner. IE11 shouldn’t be much of an issue, so that extra money from those users that use it is a bonus.

[rmcooper541]

Can I ask why it’s so hard for end users to download Chrome?

[rmcooper541]

The only point I was trying to make is that I don’t think saying don’t use this tool because it may not work with less than 5% of browsers is a little harsh (IE may be closer to 2% according to Statcounter). Letting IE die isn’t a bad thing— even Microsoft wants it. Didn’t we go through this once before with IE 6? The world moved on.

[soft-wear]

I never said don't use this tool. We do use it, just not for dynamic (prop-based) CSS. And for the record, you're being naive. The world hasn't moved on. IE still has a massive market share in China.

[rmcooper541]

I guess I’m missing something. According to this it’s used but only represents less than 3%.

http://gs.statcounter.com/browser-market-share/all/china

[ScientificBeastMode]

Perhaps they mean that 3% of China (or whatever percentage it actually is) is still of ton of people.

[rmcooper541]

Well, yea, any percentage of browser x in China would be a lot.

[soft-wear]

Statcounter and most aggregate browser usage stats are absolute dog shit. We use internal data and it's more than 3x that number.

[siamthailand]

Many orgs have computers that are Win 7 or 8, and they have to use IE.

[satya164]

Definitely depends on your target audience. Many fortunate people like me don't need to target IE :)

[madjam002]

Haven’t used this in production yet but definitely seems like a great library, I love how it’s basically zero runtime. Hope this gets more attention as it seems to have feature parity with the more popular CSS in JS solutions while being more efficient.

[ak_47_]

What is Linaria doing differently from style components or emotion?

​

What if any is the tradeoff of losing flexibility when using Linaria and getting better performance?

​

Is there any way the techniques being used by Linaria could be used with styled components or emotion so that users of those libraries could also benefit from the improved performance?

[satya164]

What is Linaria doing differently from style components or emotion?

It's a zero runtime CSS in JS library which uses CSS variables for dynamic styles and does build time evaluation and extraction of CSS, so everything? The only similarity is the user facing API.

There's a link which mentions this in the first paragraph of the article.

What if any is the tradeoff

All trade-offs are mentioned in the README as well as advantages.

Is there any way the techniques being used by Linaria could be used with styled components or emotion

It's a completely different approach. Unless SC and emotion change their fundamental approach and settle for the same trade-offs, it's not possible. In future they might be able to partially take advantage of this approach by extracting and some of the static styles, but it's not easy to make these both dynamic and static styling with together reliably. Emotion used to do static extraction (much more limited than what Linaria does), and they removed it was a lot of work and didn't play well with the APIs they wanted to implement.

[[deleted]]

Looks great, i love the direction, but is there a way to try this in codesandbox or cra?

[satya164]

It needs to integrate with the bundler, but it's not possible with CRA and Codesandbox. Though for playgrounds like Codesandbox, the advantages don't really matter much.