Styled-components: v2 prerelease feedback

[mxstbr]

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

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

[svrcekmichal]

I've been using it little bit and wanted to do something like this:

const Button = styled.button`...`

const Block = styled.div`
&:hover > ${Button} {
   ...
}
`

but I was not able to make it work, so maybe there is issue between chair and computer :D . Component displayName works great to me and didn't found any bug now.

[axelson]

As I reported in #434 I'm successfully using v2 in a small internal project (that uses create-react-app). Didn't have to make any changes.

[three60five]

Do the changes in v2 around attr mean that using tachyons and styled-components together will be simplified?

[geelen]

@three60five yep! #365 is the PR that adds that.

[IljaDaderko]

Just tried 2.0.0-3 in a [email protected] project, seems to be working like before, without changing anything.

[j-rooks]

When I try using babel-plugin-styled-components, I get this error in the console:
__WEBPACK_IMPORTED_MODULE_3_styled_components__.default.a.withConfig is not a function at eval ...
The component giving the error being defined as so:

const MyComponent = styled.a`{
// styles here
}`;

I'm using styled-components v2.0.0-4 and babel-plugin-styled-components v1.0.0

[garmjs]

@adjnor styled-components is using tag functions, if you care read more Computing tag functions for ES6 template literals

remove bracket

const MyComponent = styled.a`
// styles here
`;

[j-rooks]

@garmjs Thanks, that fixed it! Nevertheless, I still think the error I got is a bug, the brackets inside the tagged literal is valid syntax as far as I know, otherwise how would styled-components work?
Note: The reason I was using the brackets was because of a quirk with atom which wasn't properly highlighting the css code without the brackets but now it's fine.

Edit: Actually, I am still using brackets in some parts of my code and it's working fine, the problem was only with one component, I probably used the component in a wrong way, my bad.

[mxstbr]

the tagged literal is valid syntax as far as I know, otherwise how would styled-components work?

Nope, you don't need brackets at all. See any example in the docs 😊

[kopax]

Just tested V2, I have a webapp and a module both made with styled-components.

This error now appear in the webapp :

(node:21387) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

my module package.json:

  "peerDependencies": {
    "react": "^15.4.2",
    "styled-components": "^2.0.0-4",
  ...

my webapp package.json::

  "dependencies": {
    "react": "15.4.2",
    "styled-components": "2.0.0-4",
  ...

both using babel plugin for styled-components :

        "plugins": [
          "transform-react-remove-prop-types",
          "transform-react-constant-elements",
          "transform-react-inline-elements",
          "styled-components"
        ]

__UX rendering in styled-components V1.4.3__

__UX rendering in styled-components V2__

After further investigation.

First, I have a component with a huge css, for some reason it breaks here :

  #markdown-toc>li:first-child {
      display: none
  }
  #markdown-toc ul {
      padding-left: 2rem;
      margin-top: .25rem;
      margin-bottom: .25rem
  }

generate :

.eRuktO #markdown-toc>li:first-child {
    display: none
}
 <=== missing the end of the file
html {
    box-sizing: border-box;
    font-family: sans-serif;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

This has been corrected by adding changing the css to this

  #markdown-toc>li:first-child {
      display: none;
  }
  #markdown-toc ul {
      padding-left: 2rem;
      margin-top: .25rem;
      margin-bottom: .25rem;
  }

Questions

1. I notice a very tiny compression from 422kb to 416kb total of __6kb__ while I was expecing massive compression due to all my comments in the css. <= Is this due to https://github.com/styled-components/babel-plugin-styled-components/pull/30 ?
2. If not, what is the 6kb compression I have ?
3. Did the css syntax changed when we swapped from postcss to stylis ? <= #286
4. Does anyone know why I have such a big difference in my UX ? I can see some vendor classes without any rules but no errors at all, eg:

    .Jumbotron__Jumbotron-1k1t48q {
    }

    .Nav__Nav-1spkzni {
    }

1. What are these extra classes for ? They only appear when using the babel plugin.
2. Why is the css crashing and not throwing any errors ?
3. The css did crash apparently for a semicolon, but many rules before I don't have it and everything is fine. What is the semicolon rules ? In css, the semicolon for the last rule is optional.

[thysultan]

@kopax .1 & .2 might be because stylis removes all comments(line, block) and .3 the css syntax shouldn't be different, can you post an example of some css that is processed incorrectly.

[kopax]

@thysultan #1 and #2, the appended css that appear in the <style> tag doesn't have any comment.

But my module using styled-components made with webpack is compressed in a .js file. In this file I can still see many comments and the filesize is 416kb instead of 422kb. So this appear not to work!

This is a component that doesn't work with styled 2.0 :

https://gist.github.com/kopax/597f0801ab3e87ba1adfe6b72ef77967

Style tag generated css : http://pastebin.com/87KzCi0Q

And this is the one corrected (added semicolon to every last css rules)

https://gist.github.com/kopax/d2672ceb7121d820de5f1e7cd7c49457

Style tag generated css : http://pastebin.com/nMmUCGVB

[thysultan]

@kopax Does the second one(with semicolons) also not work?

[kopax]

@thysultan I have updated mine, It was still missing semicolon at the beggining (3).

It work afterthat, but I am currently correcting all the components that are not using semicolon for last rules, they are all broken.

[thysultan]

@kopax It actually should work without semicolon(the last property) since that is valid css, i'll look into this.

[kopax]

Thank you @thysultan , do you have an idea for the deprecation warning and all the other points ?

I have also found that this is not working anymore :

/* Make them extra rounded with a modifier to replace v3's badges. */

correction

/* Make them extra rounded with a modifier to replace v3s badges. */

It appear there is a problem with comment using '. Debugging is super hard for these errors, same as for undefined props as there is no Error Handling. Is it scheduled somehow ?

[thysultan]

.6 & .7, it's a bug in stylis, i've patched it in v1.1.12, thanks for finding this. The other points i don't know.

[kopax]

How can I get the patched version ? I am correcting everything by hand.

[thysultan]

@kopax re-install, i think npm should pull the latest version patch of stylis.

[kopax]

Which version? I have fixed in my package.json :

"babel-plugin-styled-components": "1.0.0",
"styled-components": "2.0.0-4",

This may sound a little dumb but how did you patch your package.json without releasing anything ?

[k15a]

rm -rf node_modules && npm install but this might not work if you're using webpack@2

[k15a]

Because Webpack will use the bundled version of styled-components if configured correctly which is not updated currently.

[k15a]

Webpack checks for the fields browser, module, main in your package.json (in this case styled-components one) for the file it will take as the module entry. In the case of styled-components it will take the "module": "dist/styled-components.es.js" line which directs to a bundled version (with all dependencies except React). This is currently a problem because you will only get the version of the dependencies which were released as styled-components got last released, which might be some outdated one.

[thysultan]

@kopax

correcting every comment that were using apostrophe

Was this causing problems, can you share an example?

[santaclauze]

Hey, been testing v.2. It's up and running.

I have encountered similar issues to the discussion above. Semicolons are the worst I reckon.

I wanted to know if some css is not acceptable anymore. Prior to v.2, the following css worked:

${mediaBreakpointUp(
      'sm',
      props.theme['$grid-breakpoints'],
      `
        &.card-deck {
          display: flex;
          flex-flow: row wrap;

          .card {
            display: flex;
            flex: 1 0 0;
            flex-direction: column;  
            &:not(:first-child) { margin-left: ${props.theme['$card-deck-margin']}; }
            &:not(:last-child) { margin-right: ${props.theme['$card-deck-margin']}; }
          }
        }
      `
    )}

But since v.2 it crashes. After debugging, I realized that the following lines made the css crash:

&:not(:first-child) { margin-left: ${props.theme['$card-deck-margin']}; }
&:not(:last-child) { margin-right: ${props.theme['$card-deck-margin']}; }

If I delete one of them, it works fine, but for some reason, when both are applied, they make the css injection crash.

Also, this works:

${mediaBreakpointUp(
      'sm',
      props.theme['$grid-breakpoints'],
      `
        &.card-group {
          display: flex;
          flex-flow: row wrap;

          .card {
            flex: 1 0 0;

            + .card {
              margin-left: 0;
              border-left: 0;
            }

            ${ifThen(props.theme['$enable-rounded'],
              `                
                  background-color: red;

              `
            )}  
          }
        }
      `
    )}

But not:

${mediaBreakpointUp(
      'sm',
      props.theme['$grid-breakpoints'],
      `
        &.card-group {
          display: flex;
          flex-flow: row wrap;

          .card {
            flex: 1 0 0;

            + .card {
              margin-left: 0;
              border-left: 0;
            }

            ${ifThen(props.theme['$enable-rounded'],
              `     
                  .car-img-bottom {    
                      background-color: red;
                  }
              `
            )}  
          }
        }
      `
    )}

These behavios are quite bizarre. I am not sure if they come from a bug here, or due to another small issue like 'semicolons' who have been a bit of a hassle for me.

[mqklin]

Just finished migrating from react-css-modules + postcss (38 .sss files, 1658 lines of sss code) to this exciting project. The only problem I have - I can't use & ~ & syntax, because guess what... I use webpack 2 =/ Guys, please, make a release with the last stylis.

[thysultan]

@santaclauze are you also using webpack 2?

[santaclauze]

@thysultan yeap.

[santaclauze]

Got an example up of the bug so you can see more clearly how the css is breaking (I should have been clearer in my last post -_-):

Some media queries crash with styled-components v2.0.0-4.

->The following css will crash:

@media (min-width: 576px) {
 &.card-deck {
   .card {
     &:not(:first-child) { 
       margin-left: 15px; 
     }
     &:not(:last-child) { 
       margin-right: 15px; 
     }
   }
 }

}

->While this one will work:

&.card-deck {
   .card {
     &:not(:first-child) { 
       margin-left: 15px; 
     }
     &:not(:last-child) { 
       margin-right: 15px; 
     }
   }
 }

Here is a working example of the issue:
http://www.webpackbin.com/4J0u-y_Ff

As you see in the example above,CardDeckOk will display its css correctly, but in the second case, CardDeckNok it will crash.

It seems to be coming from the media queries.

[thysultan]

@santaclauze Thanks for finding this, will push a patch.

[kopax]

Thanks for the hard work. So far I have listed the following issues :

1. line comment in css /**/ are still present in distribution build
2. last semicolon brake css rendering.
3. media query can randomly brake css.

Our solution was to revert to v1.4.3, for when is the next release ?

[thysultan]

@kopax @santaclauze The media query bug was patched upstream stylis, should be resolved once a new v2 release is out.

[mxstbr]

Pushing a new release of styled-components with an updated stylis version now!

[mxstbr]

New release with stylis update is out as 2.0.0-5! npm install --save styled-components@next and you should get it :tada:

[kopax]

Thanks, I am testing it right now and it seems all good. I still have these pending questions:

1. Will the CSS rules be validated (existing rules must be applied) ?
2. Will you add the ability to generated parsing errors (missing }, missing ;} ?
3. Will the generated CSS generate warning and error if syntax is wrong ?
4. More generally what will be the adopted strategy for errors in styled-components /stylis ?

So far errors are completely ignored.

We use IntelliJ and the color syntax is just a string, we spend times finding our mistakes so this is kind of important things to know for the future.

[mqklin]

@kopax I use this code: margin-bottom: ${props => props.MB && '10px'}, so when MB is not passed, I get this:

And it's very nice, because I don't have to always append default styles. So I hope wrong-syntax-warnings will be pluggable.

[thysultan]

@kopax On the side of stylis there's one more small piece missing to allow creating a linter plugin that should be added in v1.2

[kopax]

@thysultan that's nice, for when is scheduled stylis v1.2 ?

Also, in v1.4.3, it was impossible to render the stylesheet using javascript, we have to check the import in <html> and see how it look like.

Is there now a way in styled-components 2.0.0-5 to render the css using javascript ?

[k15a]

@kopax if you mean injectGlobal it's not getting removed as far as I know.

[kopax]

@k15a , I don't mean injectGlobal.

I mean the rendered css injected in the page when a component render is not accessible through javascript.

@mxstbr confirmed to me it was not possible with v1 of styled-components for some technical reason. Maybe it will be possible now that we use stylis ?

Something like for example :

const StyledDiv = styled.div`
  border: 1px solid red;
  &:hover {
    border: 1px solid blue;
  }
`
console.log(StyledDiv.getStyleSheet());
// ==> valid css or invalid css, otherwise the only way to know is to look by your self the inject css, unminify, find your rules and inspect.

This would be of course a nice feature only if the error handling doesn't get improved.

I have listed some other v2 issues :

• #549

any info on this one cc @mxstbr ?

• #552 && #554

@kopax That was a bug. I published a patch in v1.2.0, including the patch for apostrophes in a comment block.

@mxstbr is it possible to release a 2.0.0-6 ? Whould love to try the linter commit

[mxstbr]

Published 2.0.0-6! I haven't had time to look into #549 yet, will do so after I get back home next week.

[jgoux]

@svrcekmichal Whaaat? Is it possible to compose styles that way in v2? If so, it's awesome!

[k15a]

@jgoux if you mean this:

const Button = styled.button`...`

const Block = styled.div`
&:hover > ${Button} {
   ...
}
`

Yes that's possible with v2 of styled-components.

[jgoux]

@k15a

[kopax]

Yes that's possible with v2 of styled-components.

@k15a, I have just tried: https://www.webpackbin.com/bins/-KerFc5VZgEWgtBd4RBG

const Button = styled.button`...`

const Block = styled.div`
&:hover > ${Button} {
   ...
}
`

Doesn't work in 2.0.0-7.
For when is scheduled v2 release? (was at first supposed to be february)

[santaclauze]

Seems that we have found a bug: Issue related to #574

Version

styled-components 2.0.0-7
reactstrap 4.2.0

Steps to reproduce

I have created 3 cases:

1. __A__: Component created with styled.button
2. __B__: Component created with class Button2 extends React.Component {} with external _[default] props_
3. __C__: Component created with class Button3 extends React.Component {} with internal _static [default] props_

Case B use the official recommended syntax for writing props

Case C use static keyword within the class from the proposition of babel, __Webpackbin does not support the static keyword so I couldn't reproduce it in the bin__.
Copy Paste example and uncomment lines 11 and 13.

• In case A: within styles
• In case B and C: within render and within styles

https://www.webpackbin.com/bins/-Kf5Tdg7bfj2oWZzIb1V

Problematic Case:

const defaultProps = {
  theme: themeBs,
};

class ButtonClass extends React.Component {
...
}

ButtonClass.defaultProps = defaultProps;
export default ButtonClass;

Fixed Case (Case C):

const defaultProps = {
  theme: themeBs,
};

class ButtonBetter extends React.Component {
  static defaultProps = defaultProps;
...
}

export default ButtonBetter;

Moving the defaultProps inside the component using static keyword solve the issue.

Expected Behavior

Custom theme to be applied

Actual Behavior

Default theme is applied

Questions

1. Is there any way to use static keyword in Webpackbin? Or is there any work around to produce an equivalent results? In other words, what does the static keyword exactly do and how to reproduce it without him?

2. It seems the class doesn't contain publicly Component.defaultProps or Component.staticProps anymore. Should we support the react way or the babel way ?

3. What will happen to stateless components and styled if we are obliged to define defaultProps within the component? (As it seems that you cannot define static in non class component (styled.button, stateless components, ...))

[GGAlanSmithee]

... is there any work around to produce an equivalent results? In other words, what does the static keyword exactly do and how to reproduce it without him?

class ButtonBetter extends React.Component {
  static defaultProps = defaultProps;
  ...
}

class ButtonBetter extends React.Component {
...
}

ButtonBetter.defaultProps = defaultProps

... it seems that you cannot define static in non class component ...

const ButtonBetter = () => (
...
)

ButtonBetter.defaultProps = defaultProps

The static keyword puts the property / method on the class itself rather than on an instance of the class.

[santaclauze]

Unfortunately It's not completely true:

Try to write this :

class ButtonBetter extends React.Component {
  static defaultProps = defaultProps;
  ...
}

console.log(ButtonBetter.defaultProps);

will behave differently than

class ButtonBetter extends React.Component {
...
}

ButtonBetter.defaultProps = defaultProps;
console.log(ButtonBetter.defaultProps);

As a result, using keyword static also repair the user theme that is toggling to default when state change.

[GGAlanSmithee]

@santaclauze oh, really, I must missunderstand something than, can you please elaborate?

Looks like it's generating the same code in this babel example

[santaclauze]

My mistake, It's not related to static keyword, thanks for pointing this out.

I have checked my dist file and I've notice these differences in my builds:

With static:

Button.defaultProps = {
  theme: _theme2.default,
  tag: 'button',
  color: 'secondary'
};
Button = (0, _styledComponents2.default)(Button).withConfig({
  displayName: 'Button__Button',
  componentId: 'Button__Button-hfs9jv'
})(['', ' '], function (props) {
  return ...
});

exports.default = Button;

Without static:

Button = (0, _styledComponents2.default)(Button).withConfig({
  displayName: 'Button__Button',
  componentId: 'Button__Button-hfs9jv'
})(['', ' '], function (props) {
  return ...
});

Button.defaultProps = defaultProps;

exports.default = Button;

I have followed the way recommended in the styled-components documentation
They recommend to add your defaultProps after we have applied the styles with styled.

This will result in the ThemeProvider bug.

Follow @mxstbr @geelen

• Is the styled-components documentation up to date ?
• Should we wait for a fix or a doc update ?
• Can't we just add the defaultProps in the class ?
• How do we do for the components that must have defaultProps after? eg: styled.button props can't be added before the component is created.

[dmitrizzle]

V2 works wonderfully for me, but then my app is still in its infancy. Thank you everyone who wrote this and submitted PRs.

Two questions:

1. I've heard that random style names will be prefixed by component name, is that still happening?
2. Is there a shorter/better way to reference themed values? It's really messy for me, especially when I do something like this:
   left: calc(50% - ${ props => props.theme.size.font.make.larger - (props.theme.size.block.spacing / 2) }em);

[reznord]

@dmitrizzle does composition work for you?

const Button = styled.button`...`

const Block = styled.div`
&:hover > ${Button} {
   ...
}
`

I tried playing with it. But this wasn't working for me in v2.

[dmitrizzle]

@reznord youp, composition it works for me.

[romellogoodman]

@mxstbr when do you think v2 will be released? I've read somewhere you were shooting for Jan or Feb of this year originally.

[drKnoxy]

Man the styled-components lib (raw from visualizer) dropped from 146k to 65k for me, which resulted in my vendor bundle (min,gz) dropping from 140k to 116k. Cheers!

[kopax]

Any update on this ?

[Thr44]

I updated to styled-components^2.0.0-17 in order to use jest snapshots with jsdom + enzyme mount, however, when I call :
toMatchStyledComponentsSnapshot() I get:

TypeError: styleSheet.rules is not a function

here's a complete test that is failing:

import React from 'react';
import renderer from 'react-test-renderer';
import styled from 'styled-components';

describe('styled Component Tests', () => {

  it('should render a styled h4', () => {
    const iconStyles = `
      margin-left: -2px;
      margin-right: 4px;
      margin-top: -3px;
    `;

    const H4 = styled.h4`${iconStyles}`;

    const container = renderer.create(
      <H4>"a label"</H4>
    ).toJSON();
    expect(container).toMatchStyledComponentsSnapshot();
  });

[kitten]

@Thr44 We have a new StyleSheet and SSR API in the RC releases, so you'll have to update your SSR code :/

[Thr44]

@philpl thanks for the quick reply, do you have a link with an example I can follow up?

[kitten]

@Thr44 Actually I just realised that it's a problem with jest-styled-components itself. We'll need to file an issue there :/

[Thr44]

Thanks @philpl,

you're right. if I remove jest-styled-components it works fine, although its useless due to the generated classNames.

There's an open issue for using jest-styled-components withstyled-components v2, so I left a comment to follow-up there:
https://github.com/styled-components/jest-styled-components/issues/5

[wmertens]

@philpl When I try to use the StyleSheetManager approach, it breaks:

Warning: Failed prop type: Invalid prop `sheet` of type `ServerStyleSheet` supplied to `StyleSheetManager`, expected instance of `StyleSheet`.
    in StyleSheetManager (at middleware.js:49)
!!! Could not prerender, please fix this !!! { TypeError: styleSheet.getName is not a function
    at ComponentStyle.generateAndInjectStyles (/myproj/node_modules/styled-components/lib/models/ComponentStyle.js:53:37)
    at StyledComponent.generateAndInjectStyles (/myproj/node_modules/styled-components/lib/models/StyledComponent.js:117:38)
    at /myproj/node_modules/styled-components/lib/models/StyledComponent.js:141:43
    at subscribe (/myproj/node_modules/styled-components/lib/utils/create-broadcast.js:31:7)
    at StyledComponent.componentWillMount (/myproj/node_modules/styled-components/lib/models/StyledComponent.js:132:28)
    at walkTree (/myproj/node_modules/react-apollo/src/server.ts:59:18)

sheet.collectStyles(<YourApp />) works fine though.

[kitten]

@wmertens I made a mistake in the docs it seems. You'll need to pass sheet.instance into that prop ;)

[wmertens]

Indeed, things work nicely now! (apart from the preprocess issue I created for the babel plugin)

[kopax]

Can we have some news about v2 ?
I want to know what are the blocking issues for deploying in production.
What are the compatible browsers ? I see an issue saying IE10 is not working. Anyone has information about this ? I am using v2.0.0-17

[sergop321]

@philpl Could you please update the new docs https://www.styled-components.com/docs/advanced#server-side-rendering with sheet.instance instead of sheet
Submitted PR for doc change, https://github.com/styled-components/styled-components-website/pull/38

[mxstbr]

Since v2 is now out (:tada:), I'll close this issue. Thanks for the feedback everybody, I hope you enjoy this release! (read more about the changes: https://medium.com/styled-components/announcing-v2-f01ef3766ac2)