greenkeeper[bot]
commented
6 years ago After pinning to 3.1.6 your tests are still failing. The reported issue might not affect your project. These imprecisions are caused by inconsistent test results.
Closed greenkeeper[bot] closed 6 years ago
greenkeeper[bot]
commented
6 years ago After pinning to 3.1.6 your tests are still failing. The reported issue might not affect your project. These imprecisions are caused by inconsistent test results.
greenkeeper[bot]
commented
6 years ago Your tests are still failing with this version. Compare the changes đ¨
We accidentally removed dangerouslySetInnerHtml in our SSR output with just some children string. This would cause some characters to be encoded.
We have corrected this mistake and more unit tests are now in place to prevent this from happening again. Thanks to @misund for reporting this mistake!
@import at-rules@import rules must appear at the top of style sheets (i.e tags).
In older versions we used to shard our style tags into local and global ones. Because any CSS that is being passed to us is also reordered, so that @import rules appear at the top, often this would mean that a lone injectGlobal would get away with @import rules.
This wasn't sufficient as using @import in a component (obviously unsupported and not recommended) or in another consecutive injectGlobal would cause this logic to break, since @import wouldn't appear at the top of the stylesheet anymore.
This oversight was made worse by the fact that we stopped sharding local and global style tags. This would mean that @import could now show up fairly late in a stylesheet, instead of at its top.
In this version we introduce a patch that creates an additional style tag at the top of all other ones that we create, when necessary, which is going to accept all @import rules separately. So when you use injectGlobal and pass it an @import rule, it will now be stripped out of the rest of your CSS, and put into a completely isolated style tag.
greenkeeper[bot]
commented
6 years ago Your tests are still failing with this version. Compare the changes đ¨
If you've noticed that v3.2 would cause your server-side rendered app to output all styles it knows of, you weren't alone!
The ServerTag was accidentally cloning itself incorrectly. This meant that the ServerStyleSheet would inherit the same server styles from the âmasterâ StyleSheet.
We now clone the tag correctly and a test is in place to ensure this doesn't happen again, since this bug came up a couple of times in past v2 releases. Thanks to @DeividasK for reporting this bug!
Have some styles gone missing? In the newer >=3.1 versions that introduced speedy mode (i.e. insertRule support) some rules might not have been injected properly. This came down to insertRule being more strict with what we add. In development an incorrectly formatted CSS rule might not cause much trouble, but in production insertRule complains about it.
Stylis, more specifically stylis-rule-sheet, was generating invalid CSS when at-rules were nested inside style rules. For instance the following CSS would cause trouble:
/* input */
&:hover {
@media (min-width: 768px) { color: papayahwip; }
}
/* incorrect output */
@media (min-width: 768px) {
&:hover { color: papayahwip; }
}}
/* ^ note the extra closing curly brace */
/* v3.2.2 fixed output */
@media (min-width: 768px) {
&:hover { color: papayahwip; }
}IS_BROWSER detectionBefore v3.2.2 we would check whether styled-components is running inside the browser using: typeof window !== 'undefined'. This proofed insufficient in a couple of special cases for some people, so we have now added 'HTMLElement' in window to this check.
Thanks to @danieldunderfelt for contributing this fix!
greenkeeper[bot]
commented
6 years ago Your tests are still failing with this version. Compare the changes đ¨
This release simply frees up some memory by removing cloned StyleSheets when they're not needed anymore.
greenkeeper[bot]
commented
6 years ago Your tests are still failing with this version. Compare the changes đ¨
The preprocess option was never here to stay and its experiment has essentially proven to be insufficient for our future goals. Check out Sweetsour/ISTF for our current effort of making styled-components more performant and adding a CSS pipeline to it: https://github.com/kitten/sweetsour
Thanks to @Samatar26 for his PR!
process.env.SC_ATTR to override our style tag's marker attributeWhile we're figuring out how to improve our context-drive StyleSheetManager in a stable way that works with SSR and sharded stylesheets, we would still like to provide a way for you to use styled-components that enables widgets and other use-cases where it might be necessary to prevent us from destroying your stylesheet on pages.
Specifically this affects people who are building non-SSR code that runs on pages where styled-components is already in place. In these cases our SSR rehydration would go along and happily remove another module's style tags. We haven't considered this closely as it is not a good practice in our eyes to run duplicated styled-components modules in a single app. But when you're not dealing with a single app only it might make sense.
You can now change the the style tag's styled-components attribute by bundling with the SC_ATTR environment variable. Given a setup where you can set this variable, we will now inject style tags with a different attribute, so that they're not affected by the standard SSR rehydration.
Documentation will follow soon; Thanks to @Fer0x for this change!
greenkeeper[bot]
commented
6 years ago Your tests are still failing with this version. Compare the changes đ¨
greenkeeper[bot]
commented
6 years ago Your tests are still failing with this version. Compare the changes đ¨
The primary fix in this patch release was related to a misconfiguration in the stylis rule splitter which could cause some rules to be discarded when there was no whitespace around selector operands.
âď¸ Greenkeeperâs updated Terms of Service will come into effect on April 6th, 2018.
Version 3.2.0 of styled-components was just published.
This version is covered by your current version range and after updating it in your project the build failed.
styled-components is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
Status Details
- â **ci/circleci: build** Your tests failed on CircleCI [Details](https://circleci.com/gh/darrenbritton/darrenbritton.github.io/261?utm_campaign=vcs-integration-link&utm_medium=referral&utm_source=github-build-link)Release Notes
v3.2.0This is a small minor release that introduces a couple of minor changes, but also a complete rewrite of our StyleSheet implementation. Not only is it smaller, but it also lowers the barrier to entry for new contributors (like yourself, dear reader, hopefully!) to read and understand it, and eventually contribute great new features!
Deprecations
Stream reconciliation function
consolidateStreamedStylesIf youâve recently migrated to streamed server-side-rendered styles, then you will be familiar with our
consolidateStreamedStylesfunction, which was an âextended rehydrationâ that moved all streamed styled-components style tags when called.Due to our refactor of our StyleSheet behaviour (see below), our new rehydration implementation now takes care of this for you automatically.
This function will now output a deprecation warning when itâs being used and effectively does nothing at all. (Take a look at its source for more information)
Refactors
Rewrite and refactor
StyleSheetandServerStyleSheetWe now handle the style rules around a âstyle tagâ based approach, which also means that our
BrowserStyleSheetis a thing of the past. Depending on the environment, we will now switch between server, browser, and insertRule style tags, which all abstract their internal behaviour.The concept of âlocalâ vs âglobalâ styles has been removed, in anticipation of some upcoming, future APIs, and our rehydration has been rewritten as well. You will see only a single style tag after rehydration, and now splits between style tags when injecting global styles as well. This is not a breaking change, but produces the same behaviour and specificity as it did before. (Change)
You will also notice a couple of improved and more detailed error messagesâif you ever run into them that isâwhich will help you to understand some things that might go wrong more easily. (Change)
Style tags will now also be injected consecutively in the DOM. This means that styled-components wonât append them to the target, but will append them to its last style tag, if a first one was already injected. This should help you to predict the order of injection, when dealing with external CSS. (Change)
Misc.
Added
StyleSheetManager target prop
You can now pass an element to a
StyleSheetManagerand all the components in its context below in the tree will add their styles to new tags in the specified target.While this is not guaranteed to work with SSR yet, it can help you to easily add runtime-styles to a different part of the DOM. For example the shadow DOM.
Multiple instance of styled-components warning
Starting from this version, style-components will log a warning when multiple instances of it are being bundled and run on the same page. Due to our rehydration this can lead to errors, where one instance of styled-components will interfere with the other. This is why we have decided to add a small warning notifying you of this, since we donât see the practice of adding multiple styled-components instances to a single page as a best practice.
Please note that this warning wonât show up, when older version of styled-components are present, as they donât contain the code necessary to be detected.
StyleSheet.removeAPI (Internal)This is an internal API that allows us to remove rules and components from our StyleSheets, which will come in handy for some new APIs for global styles quite soon.
Misc.
controlsListto validAttr list (see #1537)foreignObjectsvg element (see #1544)Fixes
Enable semicolon autocompletion in styles
We accidentally disabled semicolon autocompletion in stylis, which accidentally introduced an unnoticed breaking change in a past version a while back.
Semicolon autocompletion is now enabled and back again. Thanks to @Blasz for reporting this mistake!
Nested media queries in
insertRuleaka production modeOur version of stylis-rule-sheet was updated which fixes nested media queries which can now be used as is expected in production. (see #1529 and #1528)
Misc.
type="text/css"-attribute from style tag to remove warnings from w3c validator (see #1551)Thanks
Thanks to the numerous contributors and maintainers who have worked towards this release. We're sorry if some names are missing, so thanks additionally goes out to everyone whoâs worked hard to get v3 out!
(In no particular order)
FAQ and help
There is a collection of [frequently asked questions](https://greenkeeper.io/faq.html). If those donât help, you can always [ask the humans behind Greenkeeper](https://github.com/greenkeeperio/greenkeeper/issues/new).Your Greenkeeper Bot :palm_tree: