Does using the `css` function inside a styled component cause a performance hit?

Question

To get proper code completion, linting, and coloring of styled-components code using Visual Studio Code we've been using the css function as a template wrapper.

Here's an example. Notice the blue css functions.

import styled, { css } from 'styled-components/native';.

Without the css function all the css code is simply green text without any editor smarts.

Does this have a performance impact? Are we be better off foregoing the code editor conveniences and using simple template literals?

Answer 1

Style definitions from styled-components are parsed and extracted as plain CSS at build time into tags in the head of your index.html file.

As a result, your html file may get larger, but for there to be a noticeable performance hit, you'd need an enormous amount of styles. At that point, you might just consider refactoring.

My two cents, if its working for you and the tool you chose doesn't introduce new bugs and/or performance issues that threaten your app's vitality, just stick with it until you see a need to change it.