⬢ Style props for rapid UI development

  • By Styled System
  • Last update: Jan 4, 2023
  • Comments: 17

Styled System

Responsive, theme-based style props for building design systems with React https://styled-system.com

stars Build Status Downloads Version spectrum-badge size MIT License system-ui/theme

npm i styled-system

Features

  • Add style props that hook into your own theme
  • Quickly set responsive font-size, margin, padding, width, and more with props
  • Influenced by constraint-based design system principles
  • Typographic scale
  • Spacing scale for margin and padding
  • Works with any color palette
  • Works with most css-in-js libraries, including styled-components & emotion
  • Used in Rebass, Reflexbox, and the Priceline Design System

"This is honestly my favourite way to build UI components right now party parrot"

– Varun Vachhar

"If you haven't seen Styled System before, do yourself a favour and check it out. It's been a huge influence in my thinking on component-oriented styles."

– Mark Dalgleish

"The future of css-in-js is going to look something like styled-system with its responsive values."

– Kye Hohenberger

"Coming from @tachyons_css, the styled-system utilities from @jxnblk is the missing link I’ve been looking for."

– Nathan Young

"If you make websites/apps with React check out Styled System if you haven't already. You will be amazed at how much faster you can build."

– David Yeiser

"If you like Tachyons you will love styled-system. If you don't like Tachyons, you will love styled-system."

– Adam Morse

"Styled System is one of the best libraries I have ever used."

– Miha Sedej

Try It Out

Try the examples on CodeSandbox

Table of Contents

Usage

// Example uses styled-components, but styled-system works with most other css-in-js libraries as well
import styled from 'styled-components'
import { space, layout, typography, color } from 'styled-system'

// Add styled-system functions to your component
const Box = styled.div`
  ${space}
  ${layout}
  ${typography}
  ${color}
`

Each style function exposes its own set of component props that handle styles based on values defined in a theme.

// width: 50%
<Box width={1/2} />

// font-size: 20px (theme.fontSizes[4])
<Box fontSize={4} />

// margin: 16px (theme.space[2])
<Box m={2} />

// padding: 32px (theme.space[3])
<Box p={3} />

// color
<Box color='tomato' />

// color: #333 (theme.colors.gray[0])
<Box color='gray.0' />

// background color
<Box bg='tomato' />

Responsive Style Props

Set responsive width, margin, padding, font-size, and other properties with a shorthand array syntax. Read more

// responsive width
<Box width={[ 1, 1/2, 1/4 ]} />

// responsive font-size
<Box fontSize={[ 2, 3, 4 ]} />

// responsive margin
<Box m={[ 1, 2, 3 ]} />

// responsive padding
<Box p={[ 1, 2, 3 ]} />

To learn more, see the Getting Started guide or read the docs.

Docs

Further Reading

Built with Styled System

Related

MIT License

Github

https://github.com/styled-system/styled-system

Comments(17)

  • 1

    Is the project abandoned?

    I was just looking at the release frequency, current issues, pending pull request, and overall activity as of late; and considering that I myself am experiencing some of the issues already reported, it is hard to not think the case. So, is the project abandoned?

  • 2

    v5 Roadmap

    This is a WIP issue to track potential changes for the next major version.

    • [x] Remove propTypes from core
    • [x] Add optional package for React propTypes
    • [x] Remove conversion of unitless numbers into pixels (most CSS-in-JS libraries support this by default now)
    • [x] Setup monorepo with Yarn workspaces and Lerna
    • [x] Split style functions into separate packages #281
    • [x] Create separate variants package
    • [x] Create separate propTypes package
    • [x] Create utilities package with themeGet, etc
    • [x] ~~Remove support for implicit breakpoints~~
    • [x] Use sizes key per the Theme Specification
    • [x] ~~(Under consideration) remove fractional width support – if you make use of this feature, please speak up~~
    • [x] Move experimental css and/or JSX pragma packages into monorepo
    • [x] Move should-forward-prop package into monorepo

    Notes

    • For the monorepo setup, and all-in-one package should be created to make migration from v4 to v5 as easy as possible

    cc @neoziro

  • 3

    Improve performances

    Following #444, I bring perf improvements from @smooth-ui/system into styled-system. The goal is to make this library the best one and the universal one.

    What has changed?

    • I switched to the core of @smooth-ui/system, more performant especially with multiple compose. Composition is now flat, it means you can compose 10 times and it will not be slower. We are probably in O(n), where "n" is the number of props.
    • I splitted the logic in several files to make it clearer
    • I switched to rollup in order to optimize build, provide umd and improve tree shaking

    What are the breaking changes?

    • We now rely on the order of props. ES2015 is here and we can rely on it, see this tweet for context: https://twitter.com/ianstormtaylor/status/1115680037875752963.
    • We are more strict in breakpoints, we don't accept a non-existing breakpoint
    • We don't export utilities like get, themeGet, etc...
    • PropTypes are no longer included, they can be generated from meta
    • We don't return array, just an object with all props merged
    • Properties that default to pixels unit (like margin, padding) no longer include it
    • Breakpoints are no longer magic, the smallest has to be 0 if you want it to be

    Benchmarks

    I added a benchmark in the project, the result:

    $ npm run bench

> [email protected] bench /Users/neoziro/Projects/styled-system
> node benchmarks

Initial run...
actual { padding: 10,
  '@media screen and (min-width: 40em)': { padding: 20 },
  marginTop: 10,
  margin: '20px',
  fontSize: 10 }
v4 [ { fontSize: '10px' },
  [ { margin: '20px' },
    { marginTop: '10px' },
    [ [Object], [Object] ] ] ]
Run suite...
actual x 351,931 ops/sec ±0.66% (88 runs sampled)
v4 x 190,533 ops/sec ±0.45% (90 runs sampled)
Fastest is actual
  • 4

    Any way to create a complex `style` or a responsive `variant`?

    My use case is as follows: I need to make a form label 'visually hidden' on some screens, and visible on others. For accessibility this cannot be a simple display: none and it needs to apply a several styles.

    Using custom style declarations, this might be possible, although it would not be neat as it would require binding a bunch of different properties to the same prop.

    Using custom variant keys there doesn't seem to be a way to access breakpoints.

    Is there some combination of the two that would work? Ideally it would look something like:

    <Label visuallyHidden={[true, false, false]}>My form label</Label>
  • 5

    change to use objects instead of strings

    Hi there! I saw this and love it. Naturally I wanted to see whether it works with glamorous and found that it almost does except it returns strings rather than objects. Turns out that styled-components can accept objects as well as strings! This is what polished does and you can use polished with styled-components or any other CSS-in-JS library.

    Here's a start to making it work with objects. It's a work in progress. I've just updated the fontSize util. I've published these changes as @kentcdodds/styled-system and verified that it works with both glamorous and styled-components here.

    If you're ok with this kind of change, I will be happy to update the pull request to apply to the other utils 👍

  • 6

    Support for React Native?

    Encountering the following error when trying to import styled-system in a project utilizing styled-components/native:

    screen shot 2017-08-05 at 4 09 49 pm

    Is this a known issue? I didn't see any mention of RN support, and didn't know if you were planning on supporting it or not. Let me know if there's any other info you'd like to see.

  • 7

    Custom breakpoints not working

    I am trying to change the default value but it is not working :(

    "styled-system": "^5.1.0"

      render() {
    const { Component, router, radio, shiftNews } = this.props;
    const themes = {
      breakpoints: ["40em", "52em", "70em"]
    };

 return (
      <Container>
        <GlobalStyle />
        <Provider>
          <Consumer>
            {theme => (
              <ThemeProvider theme={themes}>
                <>
                  <Box width={[1, 1 / 2, 1 / 3]}>
                    <h1>sdasdas</h1>
                  </Box>
                </>
              </ThemeProvider>
            )}
          </Consumer>
        </Provider>
      </Container>
    );
  }
  • 8

    Overriding Default Values in Styled-System Variants

    NOTE: I am referencing the following functionality in styled-system: https://styled-system.com/api#variants

    I have the following buttons variant in my theme.js file:

    ...
  buttons: {
    flat: {
      color: '#343434',
      boxShadow: 'none',
      backgroundColor: 'transparent',
      transition: 'background-color .2s',
     },
  }

    This gives a nice, default styling for a flat button. However, there will be times that I want to override the default color. Say, something like this:

    <Button variant="flat" color="primary">Flat Button</Button>

    However, this does not work -- because (if I understand correctly), one cannot use props with variants (is that correct?). If so, I am wondering if there is a way override the styling for variant="flat" on a case-by-case basis?

  • 9

    fontSize prop renders to font-size attribute

    When using ${fontSize} function in my custom component, such as

    <H1 fontSize="2em">
	Something...
</H1>

    React apparently treats is as HTML attribute and renders it as font-size on the respective tag.

    <h1 font-size="2em">
	Something...
</h1>

    What can be done to override / circumvent this behavior

  • 10

    Most performant way to write styled-system components

    Just a heads up - Asking existential questions, no bug report following

    With v5 comes a few interesting changes to the styled-system API. As I make my way through the source code, I still can't quite figure out the best way to write a component using styled-system. I had the same issue with styled-system 4 when writing my most recent UI library based on styled-system. While I understand there are many different ways to write the same component (it appears you've left it intentionally open-ended, which I appreciate), I'm concerned primarily about performance and bundle size. I would love any pointers in the appropriate direction as possible.

    Assuming I have a base Box component (similar or identical to the one in Rebass) that I want to extend in some way, I could do any of the following:

    1. Extend a component via css

    render() {
  <div>
    <Box {...awesomeProps} p={2} css={css({ /* Some cool styles in here, totes responsive n' all */ })}>
      Aww yeah...
    </Box>
  </div>
}

    2. Create a new component via styled

    const SpecialBox = styled(Box)(props =>({
  // My awesome styles go here
  // Maybe even use "themeGet" if I'm feeling lucky
  [themeGet('media.medium')(props)]: {
    // Responsive styles are super awkward though and don't get to use the array
  }
}),
// Things I want to override go here
color,
space);

SpecialBox.defaultProps = {
  // Some cool defaults go here
};

    3. Create a new component via styled and css

    const SpecialBox = styled(Box)(
  css({
    // Basically the same as before, but without awkward themeGet and with arrays allowed
  })
),
// Things I want to override go here
color,
space);

SpecialBox.defaultProps = {
  // Some cool defaults go here
};

    4. Write in the style prop on the component

    render() {
  <div>
    <Box {...awesomeProps} p={2} style={{ /* Some cool styles in here, no pseudo-classes or responsiveness */ }}>
      Aww yeah...
    </Box>
  </div>
}

    Likewise, if I want to create a component with identical styles as Box, but with a different name (for readability sake) then I could do something like:

    const MyList = styled(Box)({});

export default props => (
  <MyList>
    <MyListItem>Hello 1</MyListItem>
    <MyListItem>Hello 2</MyListItem>
    <MyListItem>Hello 3</MyListItem>
  </MyList>
);
    • What are the performance implications of any of these methods of creating a component?
    • Are there any differences in the generated bundle size between the methods?
    • Why even offer themeGet() as a method of getting theme values if it's way longer and does the same functionality as css() but without responsive arrays? This method seems pretty unuseful, although I admit to using it a lot when I first started on styled-system because I didn't know better. Are fallback values the only thing I'm given from themeGet() that I don't get with css()?
    • It appears as though you're rewriting Rebass using styled-system v5 using method 2 from above. Of course, Rebass is far simpler of a library than most websites will use in practice (since it's entirely intended to be a "building block" library from which you can build more complex components). How do you write more complex components in the real-world with respects to performance and generated bundle size? Of course, no disrespect intended with Rebass - it's a terrific micro-library for creating components.
    • I noticed that you mention in the v5 migration guide that we should now be compose-ing all of our style functions together for better performance.

    When using multiple categories or style functions together, use the compose utility before passing the functions to the styled higher order component. This will help ensure the best performance possible.

    I don't have a question on the above point, but was hoping you could elaborate.

    Perhaps I'm a bit more partial to being instructed on the "best practices" of using a component library. However, I also know there's not a "one size fits all" answer for any of these questions. I was curious if you or anyone else have any real-world examples of where one method of creating components has been better (read "more maintainable", "cleaner", or "more performant") than another. Perhaps I'm asking in the wrong project as well, and should instead pose this to the styled-components or emotion community instead.

    Thanks for everything, I love what you're doing on this project - I'm looking to help contribute wherever I can!

  • 11

    Support for breakpoint maps (objects)?

    Hi,

    I like the terseness of current responsive array syntax but in some situations I think it would be nice to provide breakpoint maps as well as arrays. For example, where you have a lot of breakpoints to avoid so many null values, or where you may need to insert new breakpoints.

    Example:

    <Box p={[1, null, 2, null, null, 3]}>

    Becomes:

    <Box p={{ def: 1, sm: 2, xl: 3 }}>

    Where theme.breakpoints is no longer an array but something like { def: 0, xs: '32em', sm: '40em', md: '56em', lg: '64em', xl: '80em' }.

    That's what this PR introduces, in what is (at least according to the tests) a non-breaking way, as well as moving some duplicated code to shared function getStyles.

    I figure you may well have considered and dismissed it from an API design perspective. But I'm going to use it in the fork, so just thought I'd share back 😄 .

    I can remove the breakpoint map changes if you are interested in some of the lightweight refactoring / removal of duplication between the style and space functions.

  • 12

    Bump express from 4.17.1 to 4.18.2 in /examples/emotion

    Bumps express from 4.17.1 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 13

    Bump express from 4.17.1 to 4.18.2

    Bumps express from 4.17.1 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 14

    Bump express from 4.17.1 to 4.18.2 in /examples/css

    Bumps express from 4.17.1 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 15

    Bump qs from 6.5.2 to 6.5.3 in /examples/css

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 16

    Bump qs from 6.5.2 to 6.5.3 in /examples/emotion

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 17

    Bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

Popular Tag

Related