Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

styled-components

Last update: Dec 31, 2022

Overview

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

Looking for v5?

The master branch is under development of the upcoming v6 major version of styled-components. For changes targeting v5, please point your PRs at the legacy-v5 branch.

Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!

const Button = styled.button`
  color: grey;
`;

Alternatively, you may use style objects. This allows for easy porting of CSS from inline styles, while still supporting the more advanced styled-components capabilities like component selectors and media queries.

const Button = styled.button({
  color: 'grey',
});

Equivalent to:

const Button = styled.button`
  color: grey;
`;

styled-components is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps! See the documentation about React Native for more information.

Supported by Front End Center. Thank you for making this possible!

Upgrading from v4

npm install styled-components@^5.0.0 react@^16.8 react-dom@^16.8 react-is@^16.8
??
Profit!

If you use jest-styled-components, make sure you update that too.

Docs

See the documentation at styled-components.com/docs for more information about using styled-components!

Quicklinks to some of the most-visited pages:

Example

import React from 'react';

import styled from 'styled-components';

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use them like any other React component – except they're styled!
<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
</Wrapper>

This is what you'll see in your browser:

Screenshot of the above code ran in a browser

Babel Macro

If you're using tooling that has babel-plugin-macros set up, you can switch to the styled-components/macro import path instead to gain the effects of the babel plugin without further setup.

import styled from 'styled-components/macro';

// A static className will be generated for Title (important for SSR)
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

If you wish to provide configuration options to the babel plugin similar to how you would in a .babelrc, see this guide. The config name is "styledComponents".

Built with `styled-components`

A lot of hard work goes into community libraries, projects, and guides. A lot of them make it easier to get started or help you with your next project! There’s also a whole lot of interesting apps and sites that people have built using styled-components.

Make sure to head over to awesome-styled-components to see them all! And please contribute and add your own work to the list so others can find it.

Contributing

If you want to contribute to styled-components please see our contributing and community guidelines, they'll help you get set up locally and explain the whole process.

Please also note that all repositories under the styled-components organization follow our Code of Conduct, make sure to review and follow it.

Badge

Let everyone know you're using styled-components →

[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

License

See LICENSE for more information.

Acknowledgements

This project builds on a long line of earlier work by clever folks all around the world. We'd like to thank Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson & Andrey Sitnik who contributed ideas, code or inspiration.

Special thanks to @okonet for the fantastic logo.

Comments

Separate HTML attributes from styling props

Background

I am trying to style a 3rd party "masked" input. The styles are applied correctly, however, there are props I pass into the "styled" element that are used within the CSS logic of the styled component that I don't want passed down to the 3rd party input. This logs an error saying there are undesired props being put on the input (this is also an issue with the 3rd party component that isn't properly stripping out what should go on the input).

I could see it being an enhancement where we specify what props to terminate at the "styled" part. However, this also could just be looked at as the 3rd party component having an issue not removing those props. I'm fine with it being an issue with the 3rd party developer but just wanted to mention the issue and see if this is happening to other people and if it is worth it to build some extra logic in.

Screenshot

opened by jspangler 207
v4 beta constructive feedback

Please provide as much detail as possible when commenting here so we can help! A huge amount of time and thought has been put into the API changes. We know it won't be a "flip a switch" situation, but the ergonomics of the library going forward should be markedly better and more flexible.

opened by probablyup 148
Discuss SSR API and methods
I just want to kick off a discussion to finalise our SSR API.

So API came from the comments on the #214

const { css, html } = StyleSheet.collect(() => ReactDOMServer.renderToString(<App />) );

Please feel free to suggest what the API will look like, (let the bikeshedding begin!)

Also if we're already doing de-duping in SSR level, do we even need reset()? (related issue #378) Or would that just be a convenience function since we don't need it anymore?

cc @mxstbr / @geelen
opened by thisguychris 104
How do I provide props to styled elements in Typescript?

I looked at the docs and other than creating a whole empty component purely for providing a definition of props I'm not sure of if it's possible to provide custom props to a styled element other than theme.

Example

For the above example I don't know how to make it not error.
bug 🐛

opened by tal 100
Use insertRule in browser

Premlinary patch for using insertRule api. Seems to help performance quite a bit, but the implementation is kind of hacky. I'm just using a naive regexp to split up rules but I'm looking to use a stylis middleware (@mxstbr has suggested looking into https://github.com/thysultan/stylis.js/issues/59 and https://github.com/threepointone/glam/issues/5 for reference)

Edit by @philpl: Updated to respect and enforce component order (out of order injection) and to rehydrate into a new SpeedyBrowserTag purely using insertRule. This also removes a couple of APIs from the BrowserTags that are not needed in production.

opened by schwers-zz 83
Deprecate .extend in favour of only styled(Component)

The FAQ explains the difference between styled() and .extend. However I wonder if it would be possible to take the decision out of the devs hand and have styled check for the handed in Component if its already a styled component. If it is .extend it otherwise create a new class.

Was this considered at one point?

opened by pke 70
5.0 Roadmap
Test it out:

npm install styled-components@beta react@^16.8 react-dom@^16.8 react-is@^16.8

5.0 milestone

[x] ~~rewrite stylesheet + tag classes for the needs of today (#2522)~~

[x] ~~move react-is to peer dependencies (https://github.com/styled-components/styled-components/pull/2187)~~

[x] ~~use react v16.7+ hooks to simplify the context consumer architecture (#2390)~~

[x] ~~babel 7 migration (maybe... there were bundle size regressions before) (#2509)~~

[x] ~~internal rewrite to use hooks (#2390)~~

[x] ~~bump minimum versions of react, react-native to hooks-compatible versions~~

[x] ~~remove code paths deprecated in v4 (https://github.com/styled-components/styled-components/pull/2604)~~

[x] ~~fix cGS style clobbering issues (https://github.com/styled-components/styled-components/pull/2824)~~

5.1 candidate

[ ] stylis -> sweetsour (depending on when it's ready for use and testing)

[ ] figure out CSP / nonce support (#2363)

[ ] solution to drop the prop whitelist (https://github.com/styled-components/styled-components/pull/2093)

[ ] source maps for styles (https://github.com/styled-components/styled-components/issues/827)

[ ] scoping of styles via StyleSheetManager (https://github.com/styled-components/styled-components/issues/1789)

didn't do

[ ] ~~use React.warn and React.error if 16.9 comes out before v5 (https://github.com/styled-components/styled-components/issues/2584)~~ React removed them

follow along on the ~canary~ v5 branch

evolving
opened by probablyup 68
v2 prerelease feedback

If you're using the v2 pre-release, please let us know in a comment below if it works well for you! If you encounter bugs, please submit individual issues for them!

To try the v2 prerelease, use npm install styled-components@next babel-plugin-styled-components and add the plugin to your Babel configuration like a regular Babel plugin. The plugin is optional as it only provides consistent naming for SSR as well as some pre-processing.

help wanted 🆘

opened by mxstbr 67
Babel transform

~~We need a way (probably babel transform?) to extract and precompile the static styles of our components!~~

Extracting static styles is actually not what we want, we want to pre-parse the CSS in a build step but leave it in the JS: See this comment

Has anybody done this before? I know I haven't…
enhancement ✨

opened by mxstbr 67
SSR Memory Leak with v5 release candidate 2
Environment

Default, Baseline

## System: - OS: macOS 10.15 - CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz - Memory: 3.11 GB / 32.00 GB - Shell: 5.6.2 - /usr/local/bin/zsh ## Binaries: - Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node - Yarn: 1.19.1 - ~/****/****/applications/site/node_modules/.bin/yarn - npm: 6.4.1 - ~/.nvm/versions/node/v10.15.1/bin/npm ## npmPackages: - babel-plugin-styled-components: ^1.10.0 => 1.10.6 - styled-components: ^4.0.0 => 4.4.1

After upgrade to RC 2

## System: - OS: macOS 10.15 - CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz - Memory: 3.11 GB / 32.00 GB - Shell: 5.6.2 - /usr/local/bin/zsh ## Binaries: - Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node - Yarn: 1.19.1 - ~/****/****/applications/site/node_modules/.bin/yarn - npm: 6.4.1 - ~/.nvm/versions/node/v10.15.1/bin/npm ## npmPackages: - babel-plugin-styled-components: ^1.10.0 => 1.10.6 - styled-components: ^5.0.0-rc.2 => 5.0.0-rc.2

Notes: Both environments use TypeScript, Next.JS and latest versions of react

Steps to Reproduce

Use the _document.js file found in the with-styled-components example of next.js.

Have styled-components 4.4.1 installed.

Run application using N|Solid from nodesource. Also could probably get this information by attaching chrome inspector to node.

Run npx loadtest -c 5 --rps 10 -k -t 90 http://localhost:8080/

See that memory usage has peaks and valleys, RSS and Heap memory allocation move together. External memory barely moves.

install release candidate 2

repeat the steps above.

See that Heap allocation remains consistent, MORE consistent than in 4.4.1, but RSS and External memory allocation seem to climb indefinitely until the application crashes under load.

Look at memory snapshot and see that ServerStyleSheet is massive, at around 2 gigabytes, and the server is holding onto array buffers and strings that seem to reference styles.

Memory Timeline In N|Solid on version 4.4.1

heapsnapshot

Memory Timeline in N|Solid on Version 5 RC 2

heapsnapshot

Comparison of Heap snapshots

RC 2 is on the left. The snapshots were taken as close to the same point as possible (immediately following the load test that was run with the same stats: 5 concurrent threads, keep-alive connections, 10 requests per second for 90 seconds). The only change between the two is upgraded to RC 2.
needs more info ✋
opened by brad-decker 66
Server Side Rendering: First paint missing some styles (FOUC)
Environment

System:

OS: macOS High Sierra 10.13.5

CPU: x64 Intel(R) Core(TM) i5-4308U CPU @ 2.80GHz

Memory: 82.71 MB / 8.00 GB

Shell: 3.2.57 - /bin/bash

Binaries:

Node: 8.9.4 - ~/.nvm/versions/node/v8.9.4/bin/node

npm: 6.1.0 - ~/temp/Martin/metrics-dashboard/node_modules/.bin/npm

Watchman: 4.7.0 - /usr/local/bin/watchman

npmPackages:

babel-plugin-styled-components: ^1.5.1 => 1.5.1

styled-components: ^3.2.6 => 3.2.6

Reproduction

The chunk of server side rendering code used:

const sheet = new ServerStyleSheet() let html = ReactDOMServer.renderToString(sheet.collectStyles( <Provider store={store}> {<RouterContext {...renderProps} />} </Provider> )) const styleTags = sheet.getStyleTags() // or sheet.getStyleElement()

My index template (index.ejs) as such:

<!DOCTYPE html> <html> <head> <%- styleTags %> </head> <body style="margin: 0; font-family: 'PT Sans', Arial;"> <div id="root" style="height: 100%;"> <%- html %> </div> <script type="text/javascript" charset="utf-8"> window.__REDUX_STATE__ = '<%= reduxState %>'; </script> </body> </html>

And just in case some styled-component code, though I don't expect this to be the issue (possibly because of using extend?).

// H1.js file import styled from 'styled-components'; const H1 = styled.h1.attrs({ className: 'h1' })` font-size: 4rem; `; export default H1; // end of H1.js file // WidgetTitle.js file import NormalH1 from "components/H1"; const WidgetTitle = NormalH1.extend.attrs({ className: 'widget__title' })``; export default WidgetTitle; // end of WidgetTitle.js file

Steps to reproduce

Server side rendering set up as shown above, following closely the steps here: https://www.styled-components.com/docs/advanced#server-side-rendering.

Expected Behavior

For all styles to be applied during first paint (like so below).

Actual Behavior

Only some styles being applied on first paint, while some rules (specifically font-size) seems to be applied only after the JS bundle is parsed and executed.

Remarks

As you can see in the two screenshots, I get a flash of content where the font-size rule isn't respected. I had this same issue with font-family actually, but dealt with it by putting it as an inline style on my <body> tag. Possibly this is a Flash of Unstyled Text (FOUT), but I'm honestly quite lost as to why these specific rules are being ignored on the first paint.

I state that the rules seem to be applied only after the main JS bundle is loaded/parsed/executed because of examining the request for app.js closely in the Chrome Network panel. Is this possible a webpack issue where I need to optimize the bundle further?
needs more info ✋
opened by Nemsae 66
global styles in next.js 13
I am using Next.js 13 and followed the official docs to introduce styled-components in my project https://beta.nextjs.org/docs/styling/css-in-js

this is what my layout.tsx looks like that lives in /app

import { ToastContainer, toast } from 'react-toastify'; import StyledComponentsRegistry from './lib/registry'; import GlobalStyles from '../styles/global_style'; import Layout from '../layouts/App-Layout'; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html> <body> <GlobalStyles /> <StyledComponentsRegistry> <Layout> {children} </Layout> </StyledComponentsRegistry> </body> </html> ); }

Doing that I get this error:

Error: React.Children.only expected to receive a single React element child. But everything works perfectly!

when I remove or when I put above the error disappears but then I see the page without the style for a second and then the global styles kick in after

if I wrap everything inside
that is inside the error also disappears but then it took a second to see the style after a refresh
opened by codelover2k 0
customSyntax for Stylelint v14+
Hi there 👋 First of all, thanks again for all of your work maintaining Styled Components and the ecosystem, really amazing!

Given the bleak situation with Stylelint v14+ and Styled Components / Emotion (TLDR: stylelint-processor-styled-components is deprecated and archived, @stylelint/postcss-css-in-js will probably be deprecated (second reference, third reference), it seems that one of the next releases will probably mean the end of working Stylelint tooling for Styled Components and Emotion.

There's a lot of confusing information out there, but the best, least broken config for now is processors: ['stylelint-processor-styled-components'] + customSyntax: 'postcss-scss'.

I would suggest the following things to avoid tooling breakages:

As a first step towards keeping a healthy ecosystem, I would ask that Styled Components maintainers consider unarchiving the stylelint-processor-styled-components repo - I'm not suggesting to provide any support for this - it can be maintained by selected community members, but @alexander-akait's issue about deprecating the package does not seem valid anymore, now that @stylelint/postcss-css-in-js will be deprecated

In a concerted effort with Styled Components, Emotion and Stylelint maintainers, a new customSyntax should be developed for Stylelint v14+ (this is the main point of this issue) - this may be potentially based on postcss-lit, @43081j even started on a customSyntax for Styled Components here

Re-archive the stylelint-processor-styled-components repo once there is a stable customSyntax option that is not @stylelint/postcss-css-in-js

cc @probablyup @alexandernanberg @SukkaW @mxstbr @agriffis (Styled Components maintainers) @emmatown @Andarist @srmagura (Emotion maintainers) @alexander-akait @ybiquitous @jeddy3 (Stylelint maintainers) @43081j (postcss-lit maintainer)

Prior art:

https://github.com/styled-components/styled-components/issues/3607

https://github.com/styled-components/styled-components/discussions/3707

https://github.com/stylelint/stylelint-demo/issues/343

https://github.com/emotion-js/emotion/issues/2695

Reproduction

https://github.com/styled-components/styled-components/issues/3607#issuecomment-1321151513

Steps to reproduce

Try to reliably set up Stylelint v14+ with Styled Components or Emotion

Expected Behavior

It works reliably and easily with a non-deprecated, non-archived package

Actual Behavior

It works partially with deprecated and/or archived packages (but will probably break in the future)
opened by karlhorky 14
Upgrading react dependency to 18.1
Hi

Im currently getting a dependency conflict issue with styled components. there is a small work around however it cause other issues for other dependencies.

Is there way that the styled component repo can upgrade its react dependent to use react 18.1 and not 16.8?

Environment

System:

OS: macOS 12.6.1

CPU: (10) arm64 Apple M1 Pro

Memory: 84.59 MB / 32.00 GB

Shell: 5.8.1 - /bin/zsh

Binaries:

Node: 18.9.0 - ~/.nvm/versions/node/v18.9.0/bin/node

Yarn: 1.22.19 - /opt/homebrew/bin/yarn

npm: 9.1.3 - ~/.nvm/versions/node/v18.9.0/bin/npm

Watchman: 2022.12.12.00 - /opt/homebrew/bin/watchman

Reproduction

https://codesandbox.io/s/styled-components-base-gc367

Steps to reproduce

create react native repo using latest react version

npm install styled components

observe behaviour

Expected Behavior

Install with no issues

Actual Behavior

dependancy issue with react, using '>=16.8.0' in styled components and 18.1.0 in personal repo
opened by HainesR11 1
css animation doesn't work if use CSSOM API
Environment

System:

OS: macOS 13.0.1

CPU: (8) arm64 Apple M1

Memory: 173.33 MB / 16.00 GB

Shell: 5.8.1 - /bin/zsh

Binaries:

Node: 19.1.0 - /opt/homebrew/bin/node

Yarn: 1.22.17 - ~/Downloads/node_modules/.bin/yarn

npm: 8.19.3 - /opt/homebrew/bin/npm

npmPackages:

styled-components: ^6.0.0-beta.6 => 6.0.0-beta.6

Reproduction

I pushed my demo to https://github.com/dexbol/test-styled-components-v6-beta .

Steps to reproduce

Don't need npm install, just visit index.html by localhost or just file url. Change the global variable SC_DISABLE_SPEEDY to false or true.

Expected Behavior

The circle should be rotating regardless of the value of SC_DISABLE_SPEEDY.

Actual Behavior

Rotating animation is not running if SC_DISABLE_SPEEDY is false
opened by dexbol 0
There is no code prompt at all

There is no code prompt at all. The normal css files are. It is no good to import style components, and I have also installed the style components plug-in. My vscode

opened by huajiujiang 0
SSR / Styled Components SEO Issues?

First I wanted to say thanks for creating and managing this library, it's really nice!

Next, I wanted to see if anyone else had any issues with SEO from Styled Components while using SSR? About 9 months ago we completely lost all our SEO rankings (for daily content) and have been through everything trying to figure it out. We've optimized our site loading times and performance to the 90's in lighthouse but our pages would sometimes get picked up / indexed from google news and then dropped within 24 hours (the google second pass).

Then, on Wednesday, one of our devs pushed some code that broke SSR loading by accident and the next day we had dozens of page 1 rankings from the day's posts! As soon as we fixed the SSR break, we vanished from google once again. So we broke it again today and are now back on google.

We've narrowed the issue down to 2 potential culprits - Styled Components and Fresnel. Both of which might be contributing factors, here's why:

With SSR, styled components works like this: It puts all the CSS in the <head> of the site and on rehydrate, moves it into a separate .css file. This means google receives one set of raw HTML code and then when it renders, it sees something much smaller code wise. UI is the same still but code looks a lot different after it's rendered.

With SSR Fresnel does the same thing. Sends all the HTML to google and when google renders the page (using mobile) and it rehydrates, all the desktop code is removed from the HTML.

With those factors, it's highly likely that google is seeing this variance in file size / code as potential cloaking because our pages would go from page 1-2 to 10+ where you can't find it in google w/out using a direct URL match. We never received a manual action or any note from google but it's clear we triggered an automated penalty.

A little extra context:

At midnight, dozens of pages are added to our sitemap and then submit to google. Within a few hours, the pages get listed in google. When using CSR, we are ranked the next day. When using SSR, we aren't even in the index with an exact match URL search until 1-2 days later, and if we are indexed, we aren't in the first 10 pages.

Has anyone that uses this combo experienced anything similar?

opened by hgcsm 0

Releases(v6.0.0-beta.8)

v6.0.0-beta.8(Dec 23, 2022)
yarn add styled-components@beta

What's Changed

revert rollup upgrade to resolve issues with cjs<>es default import interop

refactor(ThemeProvider): allow multiple children (https://github.com/styled-components/styled-components/commit/871435c81c09c5da46f046f8baada1d6176e75c8)

Breaking changes in v6 (as of this version)

now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)

dropped $as and $forwardedAs props (use as or forwardedAs)

dropped automatic prop filtering; use transient props ($ prefix) for stuff you don't want to be passed to child component / HTML

dropped deprecated withComponent API (87f511a228e5b13b1ff70a416409e0705e5bf456); use "as" prop instead

node >= 14 needed

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.7...v6.0.0-beta.8
Source code(tar.gz)
Source code(zip)
v6.0.0-beta.7(Dec 23, 2022)
yarn add styled-components@beta

What's Changed

feat(StyleSheetManager): add optional namespacing (#3881); replaces functionality in the babel plugin to be performed at runtime

breaking refactor: remove deprecated withComponent API (87f511a228e5b13b1ff70a416409e0705e5bf456); use "as" prop instead

feat: add styled as named export as well (5aed9e3f84cd52fa053693d5b66dc5a0f0c82ee9); note that this syntax will probably not work with the babel plugin until it is updated

chore: dependency maintenance, including rollup upgrades

Breaking changes in v6 (as of this version)

now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)

dropped $as and $forwardedAs props (use as or forwardedAs)

dropped automatic prop filtering; use transient props ($ prefix) for stuff you don't want to be passed to child component / HTML

dropped deprecated withComponent API (87f511a228e5b13b1ff70a416409e0705e5bf456); use "as" prop instead

node >= 14 needed

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.6...v6.0.0-beta.7
Source code(tar.gz)
Source code(zip)
v6.0.0-beta.6(Nov 13, 2022)
yarn add styled-components@beta

What's Changed

Bump stylis to version 4.1.3 by @lunaris in https://github.com/styled-components/styled-components/pull/3860 (adds @container CSS support)

Fix various type issues

Breaking changes in v6 (as of this version)

now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)

dropped $as and $forwardedAs props (use as or forwardedAs)

dropped automatic prop filtering, use transient props ($ prefix) for stuff you don't want to be passed to child component / HTML

node >= 14 needed

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.5...v6.0.0-beta.6
Source code(tar.gz)
Source code(zip)
v6.0.0-beta.5(Oct 26, 2022)
yarn add styled-components@beta

What's Changed

chore: remove extraneous lockfile by @alexandernanberg in https://github.com/styled-components/styled-components/pull/3848

fix(types): react-native should not receive base web attributes by @probablyup in https://github.com/styled-components/styled-components/pull/3849

Breaking changes in v6 (as of this version)

now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)

dropped $as and $forwardedAs props (use as or forwardedAs)

dropped automatic prop filtering, use transient props ($ prefix) for stuff you don't want to be passed to child component / HTML

node >= 14 needed

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.4...v6.0.0-beta.5
Source code(tar.gz)
Source code(zip)
v6.0.0-beta.4(Oct 25, 2022)
yarn add styled-components@beta

What's Changed

v6/beta 3 typescript fixes by @agriffis in https://github.com/styled-components/styled-components/pull/3828

fix: don't send undefined props to DOM by @agriffis in https://github.com/styled-components/styled-components/pull/3839

refactor(types): satisfy attrs scenarios with updated types, fix strict "as" type resolution by @probablyup in https://github.com/styled-components/styled-components/pull/3844

test: kill disused validAttr test by @agriffis in https://github.com/styled-components/styled-components/pull/3840

chore: add node 18 to test matrix by @alexandernanberg in https://github.com/styled-components/styled-components/pull/3837

Breaking changes in v6 (as of this version)

now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)

dropped $as and $forwardedAs props (use as or forwardedAs)

dropped automatic prop filtering, use transient props ($ prefix) for stuff you don't want to be passed to child component / HTML

node >= 14 needed

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.3...v6.0.0-beta.4
Source code(tar.gz)
Source code(zip)
v6.0.0-beta.3(Oct 4, 2022)
yarn add styled-components@beta

What's Changed

fix(types): allow interpolating false by @agriffis in https://github.com/styled-components/styled-components/pull/3799

Disallow mix of $as and as by @agriffis in https://github.com/styled-components/styled-components/pull/3801

chore: update typescript by @agriffis in https://github.com/styled-components/styled-components/pull/3803

fix: typescript typo by @agriffis in https://github.com/styled-components/styled-components/pull/3804

fix: css vars mangled by hyphenateStyleName by @agriffis in https://github.com/styled-components/styled-components/pull/3812

collected fixes for v6 typescript by @agriffis in https://github.com/styled-components/styled-components/pull/3809

chore: correctly link local styled-components to sandbox by @alexandernanberg in https://github.com/styled-components/styled-components/pull/3822

Breaking changes in v6 (as of this version)

now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)

dropped $as and $forwardedAs props (use as or forwardedAs)

dropped automatic prop filtering, use transient props ($ prefix) for stuff you don't want to be passed to child component / HTML

node >= 14 needed

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.2...v6.0.0-beta.3
Source code(tar.gz)
Source code(zip)
v5.3.6(Sep 27, 2022)
What's Changed

Fix statement on Ukraine by @Fer0x in https://github.com/styled-components/styled-components/pull/3724

Fix/nonce in ssr by @samimakicc in https://github.com/styled-components/styled-components/pull/3755

Deprecations

$as and $forwardedAs will be removed in the next major version, use the unprefixed props instead

New Contributors

@samimakicc made their first contribution in https://github.com/styled-components/styled-components/pull/3755

Full Changelog: https://github.com/styled-components/styled-components/compare/v5.3.5...v5.3.6
Source code(tar.gz)
Source code(zip)
v6.0.0-beta.2(Sep 2, 2022)
yarn add styled-components@beta

What's Changed

breaking removed runtime prop validation functionality; use transient props for styling-only props or shouldForwardProp for more advanced scenarios

only minify standalone prod build by @henryqdineen in https://github.com/styled-components/styled-components/pull/3796

refactored component types to use a consolidated setup with a runtime switch (web | native) in the generic

improve misc types

smaller code size

Breaking changes in v6 (as of this version)

now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)

dropped automatic prop filtering, use transient props ($ prefix) for stuff you don't want to be passed to child component / HTML

node >= 14 needed

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.1...v6.0.0-beta.2
Source code(tar.gz)
Source code(zip)
v6.0.0-beta.1(Aug 31, 2022)
yarn add styled-components@beta

What's Changed

Fix speedy rule insertion when css contains multiple rules by @janicduplessis in https://github.com/styled-components/styled-components/pull/3787

performance optimizations

smaller code size

Breaking changes in v6 (as of this version)

now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)

node >= 14 needed

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.0...v6.0.0-beta.1
Source code(tar.gz)
Source code(zip)
v6.0.0-beta.0(Aug 31, 2022)
yarn add styled-components@beta

What's Changed

refactor: conditionally use useInsertionEffect where available by @probablyup in https://github.com/styled-components/styled-components/pull/3726

refactor: replace git.io within error message by @SukkaW in https://github.com/styled-components/styled-components/pull/3733

fix: minor grammar mistakes in contribution guidelines by @imchell in https://github.com/styled-components/styled-components/pull/3771

V6/fix newbie012 type regression by @probablyup in https://github.com/styled-components/styled-components/pull/3776

chore: upgrade jest by @probablyup in https://github.com/styled-components/styled-components/pull/3778

fixed bug #3793 and #3792 by @jasham in https://github.com/styled-components/styled-components/pull/3794

updated a few dependencies

removed react-primitives support

update react-native component aliases to current stable list

build size optimization (now 12.98kB)

Breaking changes in v6 (as of this version)

now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)

node >= 14 needed

New Contributors

@SukkaW made their first contribution in https://github.com/styled-components/styled-components/pull/3733

@imchell made their first contribution in https://github.com/styled-components/styled-components/pull/3771

@jasham made their first contribution in https://github.com/styled-components/styled-components/pull/3794

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.0-alpha.5...v6.0.0-beta.0
Source code(tar.gz)
Source code(zip)
v6.0.0-alpha.5(Mar 24, 2022)
Fix types associated with styled-components/macros

Add optional peer dependency for babel-plugin-styled-components (required for macros)

Updated sandbox for alpha: https://codesandbox.io/s/styled-components-v6-alpha-sandbox-05bod1?file=/src/App.tsx

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.0-alpha.4...v6.0.0-alpha.5
Source code(tar.gz)
Source code(zip)

v6.0.0-alpha.4(Mar 24, 2022)

Added type for CSSProp (this is in definitely typed but wasn't exposed by us)
Exposed more base types

Recommended styled-components.d.ts setup for your project:

// create styled-components.d.ts in your project source
// if it isn't being picked up, check tsconfig compilerOptions.types
import type { CSSProp } from 'styled-components';
import Theme from './theme';

type ThemeType = typeof Theme;

declare module 'styled-components' {
  export interface DefaultTheme extends ThemeType {}
}

declare module 'react' {
  interface DOMAttributes<T> {
    css?: CSSProp;
  }
}

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.0-alpha.2...v6.0.0-alpha.4

Source code(tar.gz)
Source code(zip)

v6.0.0-alpha.2(Mar 24, 2022)

Added "types" package.json fields for TS type acquistion.

Full Changelog: https://github.com/styled-components/styled-components/compare/v6.0.0-alpha.1...v6.0.0-alpha.2
Source code(tar.gz)
Source code(zip)
v5.3.5(Mar 24, 2022)

Add statement of solidarity against the war on Ukraine 🇺🇦
Source code(tar.gz)
Source code(zip)
v6.0.0-alpha.1(Feb 24, 2022)

Fixed the TS declarations not getting emitted correctly by rollup.

Full Changelog: https://github.com/styled-components/styled-components/compare/.v6.0.0-alpha.0...v6.0.0-alpha.1
Source code(tar.gz)
Source code(zip)
v6.0.0-alpha.0(Feb 22, 2022)
After an epic amount of refactoring, I'm pleased to announce the first alpha of styled-components v6!

Highlights:

styled-components is now written in TypeScript and ships its own types

stylis v4

tons of bug fixes

node 14+ now required

Full Changelog: https://github.com/styled-components/styled-components/compare/v5.2.0...v6.0.0-alpha.0
Source code(tar.gz)
Source code(zip)
v5.3.3(Oct 19, 2021)
What's Changed

Backport #3568 (read from textContent rather than innerHTML during rehydrate) to v5 by @keeganstreet in https://github.com/styled-components/styled-components/pull/3591

[v5] generate more complete sourcemaps by @henryqdineen in https://github.com/styled-components/styled-components/pull/3597

New Contributors

@henryqdineen made their first contribution in https://github.com/styled-components/styled-components/pull/3597

Full Changelog: https://github.com/styled-components/styled-components/compare/v5.3.1...v5.3.3
Source code(tar.gz)
Source code(zip)
v5.3.1(Aug 24, 2021)
Fix forced server-side mode not triggering global styles (See #3566)

Fix SSR collisions caused by insufficient hash inputs and reordering of groups on the client, which is a regression in v5.2.0 (See #3563)

Fix dynamic creation React warning for React v18, backported to v5 by @lynndylanhurley (See #3564)

Add missing typeof window check when checking for duplicate instances of styled-components (See #3553)

Prevent ServerStyleSheet from emitting empty style tags, which would cause issues in IE11 (See #3555)

Support css tagged templates inside style objects, by @roginfarrer and @dvingo (See #3469)

Source code(tar.gz)
Source code(zip)
v5.3.0(May 5, 2021)
Pass elementToBeCreated as a third parameter to shouldForwardProp so that the user-specified function can decide whether to pass through props based on whether the created element will be a tag or another component. (see #3436)

Fix React Native components accepts function as style prop. (see #3389)

Source code(tar.gz)
Source code(zip)
v5.2.3(Mar 31, 2021)

fix an issue with an unguarded window accessor in a SSR path (see #3446)
Source code(tar.gz)
Source code(zip)
v5.2.2(Mar 30, 2021)
For React Native based components, pass testID down to the native component if specified for an easier time testing. (see #3365)

Enable users of the babel macro to customize the styled-components import with importModuleName (see #3422)

[fix] COMPLEX_SELECTOR_PREFIX.includes wasn't transpiled (see #3397)

Source code(tar.gz)
Source code(zip)
v5.2.1(Oct 30, 2020)

Tweak server-side build settings to resolve an issue with jest-dom not being able to pick up generated styles (see #3308) thanks @Lazyuki
Source code(tar.gz)
Source code(zip)
v5.2.0(Sep 4, 2020)
Make sure StyleSheetManager renders all styles in iframe / child windows (see #3159) thanks @eramdam!

Rework how components self-reference in extension scenarios (see #3236); should fix a bunch of subtle bugs around patterns like & + &

Fix keyframes not receiving a modified stylis instance when using something like stylis-plugin-rtl (see #3239)

Big performance gain for components using style objects (see #3239)

We no longer emit dynamic classNames for empty rulesets, so some className churn may occur in snapshots

Preallocate global style placement to ensure cGS is consistently inserted at the top of the stylesheet; note that this is done in runtime order so, if you have multiple cGS that have overlapping styles, ensure they're defined in code in the sequence you would want them injected (see #3239)

Add "engines" to package.json (currently set to Node 10, the oldest supported LTS distribution) (see #3201) thanks @MichaelDeBoey!

Finally, special thanks to @willheslam for testing and some last minute fixes on this release!
Source code(tar.gz)
Source code(zip)
v5.2.0-test.10(Aug 31, 2020)
We are planning to release 5.2 on September 2/3, please help us test!

yarn add styled-components@test

Preallocate global style placement to ensure cGS is consistently inserted at the top of the stylesheet; note that this is done in runtime order so, if you have multiple cGS that have overlapping styles, ensure they're defined in code in the sequence you would want them injected (see #3239)

NOTE: This is a behavioral change and might require adjustment in your codebase if you have many createGlobalStyle components in use. We do not think it will affect the majority of projects other than fix existing bugs.

createGlobalStyle is now React.StrictMode compliant

Make sure StyleSheetManager renders all styles in iframe / child windows (see #3159) thanks @eramdam!

Rework how components self-reference in extension scenarios (see #3236); should fix a bunch of subtle bugs around patterns like & + &

Fix keyframes not receiving a modified stylis instance when using something like stylis-plugin-rtl (see #3239)

Big performance gain for components using style objects (see #3239)

We no longer emit dynamic classNames for empty rulesets, so some className churn may occur in snapshots

Add "engines" to package.json (currently set to Node 10, the oldest supported LTS distribution) (see #3201) thanks @MichaelDeBoey!

Source code(tar.gz)
Source code(zip)
v5.1.1(May 25, 2020)
New Functionality

Implement shouldForwardProp API for native and primitive platforms, which was previously missing in [v5.1.0] (see #3093) This has been released under a patch bump instead of a minor, since it's only been missing from Native-support.

Bugfixes

Added useTheme hook to named exports for react-primitives entrypoint (see #2982) thanks @jladuval!

Escape every CSS ident character necessary when converting component display names to class names (see #3102) thanks @kripod!

Source code(tar.gz)
Source code(zip)
v5.1.0(Apr 7, 2020)
New Functionality

Add shouldForwardProp API (almost the same as emotion's, just a slightly different usage pattern); https://github.com/styled-components/styled-components/pull/3006

Sometimes when composing multiple higher-order components together, it's possible to get into scenarios when multiple layers consume props by the same name. In the past we've introduced various workarounds for popular props like "as" but this power-user API allows for more granular customization of what props are passed down to descendant component children when using the styled() HOC wrapper.

When combined with other APIs like .attrs() this becomes a very powerful constellation of abilities.

Here's how you use it:

const Comp = styled('div').withConfig({ shouldForwardProp: (prop, defaultValidatorFn) => !['filterThis'].includes(prop), })` color: red; `; render(<Comp filterThis="abc" passThru="def" />); # Renders: <div className="[generated]" passThru="def"></div>

The second argument defaultValidatorFn is what we use internally to validate props based on known HTML attributes. It's provided so you can filter exactly what props you don't wish to pass and then fall-back to the default filtering mechanism if desired.

Other methods on the styled HOC like .attrs can be chained after withConfig(), and before opening your template literal:

const Comp = styled('div').withConfig({ shouldForwardProp: (prop, defaultValidatorFn) => !['filterThis'].includes(prop), }).attrs({ className: 'foo' })` color: red; `; render(<Comp filterThis="abc" passThru="def" />); # Renders: <div className="[generated] foo" passThru="def"></div>

Thanks @stevesims and all that contributed!

Add "transient props" API; https://github.com/styled-components/styled-components/pull/3052

Think of transient props as a lightweight, but complementary API to shouldForwardProp. Because styled-components allows any kind of prop to be used for styling (a trait shared by most CSS-in-JS libraries, but not the third party library ecosystem in general), adding a filter for every possible prop you might use can get cumbersome.

Transient props are a new pattern to pass props that are explicitly consumed only by styled components and are not meant to be passed down to deeper component layers. Here's how you use them:

const Comp = styled.div` color: ${props => props.$fg || 'black'}; `; render(<Comp $fg="red">I'm red!</Comp>);

Note the dollar sign ($) prefix on the prop; this marks it as transient and styled-components knows not to add it to the rendered DOM element or pass it further down the component hierarchy.

Bugfixes

Fix slow SSR Rehydration for malformed CSS and increase fault-tolerance (see #3018)

Change isPlainObject (internal method) to support objects created in a different context (see #3068) thanks @keeganstreet!

Add support for the <video disablePictureInPicture> (see #3058) thanks @egdbear!

Source code(tar.gz)
Source code(zip)
v5.0.1(Feb 4, 2020)
Added useTheme hook to named exports for react native (#2982)

Performance enhancements

Refactored hashing function that is a bit faster in benchmarks (#2983)

Fixed a bitwise math issue that was causing SSR performance degradations due to how we allocate typed arrays under the hood (#2996)

Added some helpful new dev-time warnings for antipatterns

Recommending against usage of css @import inside createGlobalStyle and what to do instead (#2997)

Catching and warning against dynamic creation of styled-components inside other component render paths (#2998)

Source code(tar.gz)
Source code(zip)
v5.0.0(Jan 13, 2020)
It's finally here!!! 🚀See the migrating to v5 FAQ page for easy upgrade instructions!

Read the v5 release announcement!

TL;DR:

19% smaller bundle size

18% faster client-side mounting

17% faster updating of dynamic styles

45% faster server-side rendering

RTL support

...and much more all, with no breaking changes!

NOTE: At this time we recommend not using @import inside of createGlobalStyle. We're working on better behavior for this functionality but it just doesn't really work at the moment and it's better if you just embed these imports in your HTML index file, etc.

Changes

StyleSheetManager enhancements

you can now supply stylis plugins like stylis-plugin-rtl; <StyleSheetManager stylisPlugins={[]}>...</StyleSheetManager>

disableVendorPrefixes removes autoprefixing if you don't need legacy browser support; <StyleSheetManager disableVendorPrefixes>...</StyleSheetManager>

disableCSSOMInjection forces using the slower injection mode if other integrations in your runtime environment can't parse CSSOM-injected styles; <StyleSheetManager disableCSSOMInjection>...</StyleSheetManager>

Removed the "subfunction" attrs syntax that was deprecated in v4

styled.div.attrs({ role: p => p.onClick ? 'button' : '' })` color: red; `

becomes

styled.div.attrs(p => ({ role: p.onClick ? 'button' : '' }))` color: red; `

Update css-to-react-native to v3.0.0 (#2811); the one breaking change noted is that unitless line height is no longer allowed when setting font properties

if you get a lot of warnings at dev time from not having units in your styles, this codemod is available to help expedite updates: https://github.com/styled-components/styled-components-native-code-mod thanks @jacobp100

disallow /ad/i in generated class names (#2837); this change primarily helps to avoid some overly aggressive ad blockers that will mangle generated classnames containing the substring "ad"

if you use styled-components from CDN, in v5 the "react-is" dependency was added (make sure you add this to your project)

Source code(tar.gz)
Source code(zip)
v5.0.0-rc.3(Dec 30, 2019)
This should be the last RC before general v5 release in a week or two!

NOTE: If you've been testing this stylisPlugins functionality with the stylis-rtl plugin, please switch from stylis-rtl to stylis-plugin-rtl.

make useTheme cleaner (#2879) props @sayjeyhi

unnecessary flattening and interleave of css without interpolations @vepor

switch back to mainline hoist-non-react-statics (#2934) …

use funding field instead of post install script (#2931) props @koba04

fix usage of nested stylesheetmanagers in SSR

expose version in API (#2888) props @jamesarmenta

refactor stylis management (#2936)

Source code(tar.gz)
Source code(zip)
v5.0.0-rc.2(Nov 12, 2019)
Note: we've switched from canary to v5 as the target branch for the new release. It's basically the same, but fixed up so it'll merge cleanly onto master.

Changes from rc.1:

fix a few missed cases where attrs were not preferred over props (d2f4509)

remove the theme usage dev-time check (df36f93); this was done in master already, just forward-porting

aggregate classNames passed via attrs (#2859, 12a9f3c)

replace rehydration from CSSOM with progressive regex (#2872)

Source code(tar.gz)
Source code(zip)