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

Overview

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

downloads: 600k/month Join the community on Spectrum gzip size module formats: umd, cjs, esm Code Coverage

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

  1. npm install [email protected]^5.0.0 [email protected]^16.8 [email protected]^16.8 [email protected]^16.8
  2. ??
  3. 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:

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

[![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]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

License

Licensed under the MIT License, Copyright Β© 2016-present Glen Maddern and Maximilian Stoiber.

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

    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

    screen shot 2017-01-31 at 11 31 51 am

    opened by jspangler 207
  • v4 beta constructive feedback

    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

    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?

    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

    image

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

    bug πŸ› 
    opened by tal 100
  • Use insertRule  in browser

    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)

    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

    5.0 Roadmap

    Test it out:

    npm install [email protected] [email protected]^16.8 [email protected]^16.8 [email protected]^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

    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 [email protected] 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

    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

    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

    1. Use the _document.js file found in the with-styled-components example of next.js.
    2. Have styled-components 4.4.1 installed.
    3. Run application using N|Solid from nodesource. Also could probably get this information by attaching chrome inspector to node.
    4. Run npx loadtest -c 5 --rps 10 -k -t 90 http://localhost:8080/
    5. See that memory usage has peaks and valleys, RSS and Heap memory allocation move together. External memory barely moves.
    6. install release candidate 2
    7. repeat the steps above.
    8. 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.
    9. 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 image

    Memory Timeline in N|Solid on Version 5 RC 2

    heapsnapshot image

    Comparison of Heap snapshots

    image

    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)

    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

    1. 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).

    First paint expected

    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.

    first paint missing font size rules

    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
  • Why I get HTML tags instead of CSS properties with Vite.js?

    Why I get HTML tags instead of CSS properties with Vite.js?

    Environment

    1. Linux Ubuntu: 22.04
    2. VS code: 1.74.2
    3. Build tool: Vite ( Vite + React + TS )

    Steps to reproduce

    1. Vite CLI :npm create [email protected] react-vite-app -- --template react-ts. source
    2. Install styled-component-extension from vs-code-styled-component.

    Expected Behavior

    1. CSS properties autocomplete available in vs code emmet

    Actual Behavior

    HTML tags instead of CSS properties.

    Screenshot from 2023-01-04 01-23-51

    opened by MenaiAla 0
  • Beta.9 new namespace breaking css parent selector

    Beta.9 new namespace breaking css parent selector

    Environment

    System:

    • OS: macOS 12.5.1
    • CPU: (10) arm64 Apple M1 Pro
    • Memory: 78.30 MB / 32.00 GB
    • Shell: 5.8.1 - /bin/zsh

    Binaries:

    • Node: 18.7.0 - /opt/homebrew/bin/node
    • Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    • npm: 8.15.0 - /opt/homebrew/bin/npm

    Reproduction

    Using Beta 9.

    import React from "react";
    import styled, { StyleSheetManager } from "styled-components";
    
    const StyledComponent = styled.div`
      color: blue;
      .child & {
        color: green;
      }
    `;
    
    const App = () => {
      return (
        <div className="parent">
          <div className="child">
            <StyledComponent>Green</StyledComponent>
          </div>
          <StyledComponent>Blue</StyledComponent>
        </div>
      );
    };
    
    export default () => {
      return (
        <StyleSheetManager namespace={".parent"}>
          <App />
        </StyleSheetManager>
      );
    };
    
    

    Steps to reproduce

    https://codesandbox.io/s/parent-ampersand-u9hgop?file=/src/App.js I have created a PR and added a failing test but wasn't able to solve the issue myself: https://github.com/styled-components/styled-components/pull/3908

    Expected Behavior

    I would expect the above to generate

    .parent .child .sc-a{color:green;}
    

    Actual Behavior

    but instead I get

    .child .parent .sc-a{color:green;}
    

    Note the child selector is moving right to the front, before the namespace.

    opened by marmite22 0
  • Added failing test to demonstrate issue with ampersand in selector when used with namespaced style guide manager

    Added failing test to demonstrate issue with ampersand in selector when used with namespaced style guide manager

    The instructions on raising an issue said to consider making a PR with a failing test so here is one:

    The issue this tests for is that when using an ampersand (&) to scope css to a parent selector and also using the new namespace feature added in the latest beta version, the resulting css has the parent selector before the namespace selector.

    I took a stab at resolving this but while I was able to get the original issue solved, it breaks down with more complex use cases (as seen in the 2nd test)

    opened by marmite22 0
  • global styles in next.js 13

    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+

    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:

    1. 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 Screenshot 2022-12-20 at 11 40 15
    2. 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
    3. 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
Releases(v6.0.0-beta.9)
  • v6.0.0-beta.9(Jan 3, 2023)

    yarn add [email protected]
    

    What's Changed

    • fix: add <use> to domElements by @shanpriyan in https://github.com/styled-components/styled-components/pull/3901
    • refactor(typings): revise to support more attrs patterns by @probablyup in https://github.com/styled-components/styled-components/pull/3906

    New Contributors

    • @shanpriyan made their first contribution in https://github.com/styled-components/styled-components/pull/3901

    Breaking changes in v6

    • now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)
    • styled-components now provides its own types; if you installed @types/styled-components in the past, you'll want to remove it
    • 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.8...v6.0.0-beta.9

    Source code(tar.gz)
    Source code(zip)
  • v6.0.0-beta.8(Dec 23, 2022)

    yarn add [email protected]
    

    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

    • now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)
    • styled-components now provides its own types; if you installed @types/styled-components in the past, you'll want to remove it
    • 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 [email protected]
    

    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

    • now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)
    • styled-components now provides its own types; if you installed @types/styled-components in the past, you'll want to remove it
    • 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 [email protected]
    

    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)
    • styled-components now provides its own types; if you installed @types/styled-components in the past, you'll want to remove it
    • 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.5...v6.0.0-beta.6

    Source code(tar.gz)
    Source code(zip)
  • v6.0.0-beta.5(Oct 26, 2022)

    yarn add [email protected]
    

    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

    • now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)
    • styled-components now provides its own types; if you installed @types/styled-components in the past, you'll want to remove it
    • 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.4...v6.0.0-beta.5

    Source code(tar.gz)
    Source code(zip)
  • v6.0.0-beta.4(Oct 25, 2022)

    yarn add [email protected]
    

    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

    • now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)
    • styled-components now provides its own types; if you installed @types/styled-components in the past, you'll want to remove it
    • 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.3...v6.0.0-beta.4

    Source code(tar.gz)
    Source code(zip)
  • v6.0.0-beta.3(Oct 4, 2022)

    yarn add [email protected]
    

    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

    • now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)
    • styled-components now provides its own types; if you installed @types/styled-components in the past, you'll want to remove it
    • 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.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 [email protected]
    

    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

    • now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)
    • styled-components now provides its own types; if you installed @types/styled-components in the past, you'll want to remove it
    • 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.1...v6.0.0-beta.2

    Source code(tar.gz)
    Source code(zip)
  • v6.0.0-beta.1(Aug 31, 2022)

    yarn add [email protected]
    

    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

    • now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)
    • styled-components now provides its own types; if you installed @types/styled-components in the past, you'll want to remove it
    • 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.0...v6.0.0-beta.1

    Source code(tar.gz)
    Source code(zip)
  • v6.0.0-beta.0(Aug 31, 2022)

    yarn add [email protected]
    

    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

    • now using stylis v4 (if using stylis-plugin-rtl you'll need to upgrade to the newer version)
    • styled-components now provides its own types; if you installed @types/styled-components in the past, you'll want to remove it
    • 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

    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)

  • 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:

    1. styled-components is now written in TypeScript and ships its own types
    2. stylis v4
    3. tons of bug fixes
    4. 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)

  • 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)

  • 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 [email protected]
    
    • 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)
Owner
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress πŸ’…
styled-components
CSS Maid 🧹 A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!

CSS Maid ?? What is it? CSS Maid is a tool for React.js that helps clean up & reset default css! It resets default padding, remove text-decoration on

Josh Daniel 7 Aug 31, 2022
CSS style loader for Webpack that is optimized for isomorphic (universal) web apps.

Isomorphic CSS style loader for Webpack CSS style loader for Webpack that works similarly to style-loader, but is optimized for critical path CSS rend

Kriasoft 1.3k Dec 19, 2022
Style your React components with simplicity using css inside your comments.

Style your React components with simplicity using css inside your comments.

Charly Albin 1 Oct 12, 2021
🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!

Aesthetic Start using Aesthetic now! aestheticsuite.dev Aesthetic is an end-to-end, multi-platform styling and design suite, that offers the following

Aesthetic 198 Nov 11, 2022
CSS-in-JS solution with style-to-state bindings, SSR, and a next-level developer experience.

A set of modules is for CSS-in-JS solution that includes state-to-style bindings, SRR and next-level developer experience. It includes a framework-agnostic implementation

Numl.Design 20 Nov 24, 2022
Court.css - A naive CSS Utility framework based on JSX and css custom properties

court.css ?? A (work in progress) JSX-based, CSS utility framework with a predic

Tone Row 7 Aug 29, 2022
πŸ‘©β€πŸŽ€ CSS-in-JS library designed for high performance style composition

emotion The Next Generation of CSS-in-JS Emotion 11 has been released ?? See the blog post Emotion is a performant and flexible CSS-in-JS library. Bui

emotion 15.9k Jan 5, 2023
Flexibly styled chat-widget for your react apps.

Flexibly styled chat-widget for your react apps. It was mainly created for integration with chat-bots in messengers.

Eddie Nubes 4 Nov 5, 2022
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Khan Academy 5.3k Jan 1, 2023
Parse CSS and add vendor prefixes to rules by Can I Use

Autoprefixer PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twi

PostCSS 20.8k Jan 9, 2023
Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

Creative Tim 1.4k Jan 6, 2023
Autoprefixer for JavaScript style objects

inline-style-prefixer A small, simple and fast vendor prefixer from JavaScript style object. Support Us Support Robin Frischmann's work on Fela and it

Robin Weser 385 Nov 18, 2022
A tool for creating ratio-based style systems built in React.

Rational Design is a tool for generating type-scales for greater consistency in design systems or web design projects. It’s built with React Hooks, SCSS, Webpack, and npm scripts, and is fully responsive.

Timothy Merritt 4 Nov 16, 2022
A terminal style/styled portfolio website made with <3 using react.

A Terminal Styled Portfolio Website. ??‍??, a terminal style/styled portfolio website made with <3 using react.

ashish 67 Nov 22, 2022
Dynamic, theme-driven, style props for vanilla-extract.

Rainbow Sprinkles ?? Dynamic, theme-driven, style props for vanilla-extract Rainbow sprinkles works similarly to @vanilla-extract/sprinkles. Like spri

Wayfair Tech 90 Dec 23, 2022
Tailwind CSS variants for email client CSS targeting.

tailwindcss-email-variants A plugin that provides variants for email client targeting hacks used in HTML emails. All variants are based on targeting h

Maizzle 23 Nov 3, 2022
Encapsulated styling for your javascript components with all the power of javascript and CSS combined.

Stilr Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Unique class names (Content Hash Based) U

kodyl 236 Nov 18, 2022
Use smooth corners in your React application

Leverage the CSS Houdini API and the wopian/smooth-corners npm package to create a rounded corner look for your React elements

Dana Janoskova 49 Dec 22, 2022
Repositório utilizado na criação de um setup para facilitar o inicio do desenvolvimento de apps com React, Next e TypeScript. Só "clonar" e "codar"! hahaha

Template para desenvolvimento de projetos utilizando REACT e NEXT com TypeScript Como executar Clone o projeto e acesse a pasta do mesmo. $ git clone

Adair Juneo 1 Jan 7, 2022