Babel plugin #62

SaraVieira · 2017-07-23T18:30:48Z

Closes #13 and creates a section in advanced with the babel plugin docs

SaraVieira · 2017-07-23T18:32:07Z

pages/docs.json

          "title": "Extending styles"
-        }, {
+        },


Prettier auto did this , should I revert ?

SaraVieira · 2017-07-23T18:32:23Z

pages/docs/advanced.js

-    />
-  </DocsLayout>
-)
+    <NextPage href="/docs/api" title="API Reference" />


Prettier again

No worries! I might add prettier soon anyway

Awesome ! I can do that if you want 👍

kitten · 2017-07-23T18:37:38Z

This is looking good! 🎉

I'm thinking, maybe we should move the section to API. What do you think, @mxstbr?

SaraVieira · 2017-07-23T18:38:27Z

@philpl I was on the fence between advanced and API so input would be great

mxstbr · 2017-07-23T19:14:01Z

Awesomeee!!

Hmm, I quite like it under Advanced but maybe we should just have another section "Tooling" or something that also includes some docs for jest-styled-components et al.? /cc @MicheleBertoli

kitten · 2017-07-23T19:29:36Z

@mxstbr Then let's put it into the "Advanced" section until we have enough content to create one for "Tooling"?

mxstbr · 2017-07-23T19:49:51Z

SGTM

MicheleBertoli · 2017-07-23T19:51:09Z

Thanks @SaraVieira for your contribution. 👏

@mxstbr @philpl A "tooling" section sounds great, and I'll be happy to add more information about testing. Should I open an issue?

Also, I'm glad to see the snapshots are working on this PR :)

kitten · 2017-07-23T20:58:27Z

@MicheleBertoli I still have to add a .travis.yml but it seems like it worked out great.

An issue would be greatly appreciated :)

SaraVieira · 2017-07-23T22:17:35Z

@philpl @mxstbr @MicheleBertoli Should we leave it like this or create the tooling section already ?

kitten

Some minor changes that we'll need to do. Most of the mistakes come from the original readme, but need to be fixed before they just go into the website as well 😉

kitten · 2017-07-23T22:25:27Z

components/advanced/babel-plugin.js

+      styles and gives you a nicer debugging experience when using{' '}
+      <Code>styled-components</Code>.
+    </p>
+    <p>Usage</p>


This subsection can use the SectionLayout component with the sub prop, like the ones below.

Also, this is missing a small explanation, like:

Install the babel-plugin first:

kitten · 2017-07-23T22:25:56Z

components/advanced/babel-plugin.js

+    <p>
+      This plugin adds support for server-side rendering, for minification of
+      styles and gives you a nicer debugging experience when using{' '}
+      <Code>styled-components</Code>.


You can leave out "when using styled-components" as that's quite obvious on the site. But we should add a paragraph that it's only for the web, not for React Native

kitten · 2017-07-23T22:28:35Z

components/advanced/babel-plugin.js

+    <p>Usage</p>
+    <CodeBlock code={installNPM} language="node" />
+    <p>
+      Then in your babel configuration (probably <Code>.babelrc</Code>):


This sounds a bit odd. Maybe something like:

Then add it to your babel configuration ([...]) like so:

would make it nicer

Changed 👍

kitten · 2017-07-23T22:32:54Z

components/advanced/babel-plugin.js

+        By adding a unique identifier to every styled component this plugin
+        avoids checksum mismatches due to different class generation on the
+        client and on the server. If you do not use this plugin and try to
+        server-side render <Code>styled-components</Code> React will complain.


<Code>styled-components</Code> needs to be changed to just styled components. We're not talking about the lib 😄

If you do not use this plugin and try to server-side render styled-components React will complain.

This is a bit outdated and also sounds weird, so let's update it:

If you do not use this plugin and try to server-side render, you will likely encounter React warnings, if the import order is different on the client. For this reason we generally recommend you to turn on this option in any SSR setup.

We also need to add a reference to this babel-plugin option to our SSR section.

We also need to add a reference to this babel-plugin option to our SSR section. -> What can I do here ?

I can do this, if it's unclear. In the SSR section on the website, it'd just be useful to say "You will probably need to use our babel plugin's ssr option to not run into checksum mismatches with server-side rendering."

kitten · 2017-07-23T22:33:30Z

components/advanced/babel-plugin.js

+        server-side render <Code>styled-components</Code> React will complain.
+      </p>
+      <p>
+        If you want server-side rendering support you can enable it with the{' '}


We can cut this short due to the prior intro:

~~If you want server-side rendering support~~ You can enable it with the ssr option:

kitten · 2017-07-23T22:38:36Z

components/advanced/babel-plugin.js

+      </p>
+      <CodeBlock code={preprocess} language="node" />
+    </SectionLayout>
+    <SectionLayout sub title="Preprocessing">


Incorrect title 😉

Damn , fixed :p

kitten · 2017-07-23T22:38:51Z

components/advanced/babel-plugin.js

+    </SectionLayout>
+    <SectionLayout sub title="Preprocessing">
+      <Note>
+        This option is turned on by default! If you experience mangled CSS


We can lose the exclamation mark here

kitten · 2017-07-23T22:39:33Z

components/advanced/babel-plugin.js

+      </Note>
+      <p>
+        This plugin minifies your styles in the tagged template literals, giving
+        you big bundle size savings. (note that you will not see the effect of


We can lose the parantheses here

Removed 💃

kitten · 2017-07-23T22:41:33Z

components/advanced/babel-plugin.js

+      </p>
+      <CodeBlock code={minify} language="node" />
+      <p>
+        We also transpile <Code>styled-components</Code> tagged template


This should go into a new section, since it's a separate option actually.

What should go in this section ? Just this paragraph ?

Yea, this entire part about the template string transpilation

kitten · 2017-07-23T22:42:00Z

components/advanced/babel-plugin.js

+        literals down to a smaller representation than what Babel normally does,
+        because <Code>styled-components</Code> template literals don't need to
+        be 100% spec compliant. see{' '}
+        <a href="https://github.com/styled-components/babel-plugin-styled-components/blob/master/minification.md">


The link here can be swapped out for a link to our "Tagged Template Literals" section.

Also there's a trailing closed parenthesis below.

Link swapped :)

SaraVieira · 2017-07-23T23:28:31Z

@philpl Made some of the changes

kitten · 2017-07-24T01:05:38Z

@SaraVieira Thanks a lot again already! This is already so close to be shippable in such a short time 😄 🎉

SaraVieira · 2017-07-24T11:45:41Z

@philpl All done I think 🎆

Sent from my Bq Aquaris M5 using FastHub

kitten

Last problem :)

kitten · 2017-07-25T18:44:15Z

components/advanced/babel-plugin.js

+        literals down to a smaller representation than what Babel normally does,
+        because <Code>styled-components</Code> template literals don't need to
+        be 100% spec compliant. see{' '}
+        <a href="#tagged-template-literals">Tagged Template Literals</a> for


This link will need to be swapped out with our Link component 😉 You can see some examples for this on other pages

Fixed @philpl 🎉

kitten · 2017-07-25T21:10:12Z

components/advanced/babel-plugin.js

@@ -163,7 +164,7 @@ const BabelPlugin = () =>
        literals down to a smaller representation than what Babel normally does,
        because <Code>styled-components</Code> template literals don't need to
        be 100% spec compliant. see{' '}
-        <a href="#tagged-template-literals">Tagged Template Literals</a> for
+        <Link href="#tagged-template-literals">Tagged Template Literals</Link> for


Sorry for not being clear enough on this :( You'll have to pass the inline prop for it to show up with the correct styling: https://github.com/styled-components/styled-components-website/blob/master/components/api/helpers/with-theme.js#L52

Got it ! It does look better now :p

kitten · 2017-07-25T21:19:22Z

@SaraVieira Thanks a lot for putting in such an effort to finally bring this section to our site 🎉 😄 I'll try to find a workaround for the SSR problem and then deploy a new version

SaraVieira · 2017-07-25T21:19:57Z

@philpl No problem man , I'm now working on adding eslint 😄

mxstbr · 2017-07-25T21:55:55Z

Yay this is awesome, thanks so much for the help @SaraVieira!

kitten · 2017-07-25T23:14:54Z

@SaraVieira @mxstbr Should be deployed and the SSR bug should also be fixed (vendored a modified next.js version f9a9320)

@mxstbr can you clear the cache so we get the website to be quick again asap please? :)

SaraVieira added 2 commits July 23, 2017 19:27

add babel plugin docs

33fea5f

update tests

b6acb46

SaraVieira commented Jul 23, 2017

View reviewed changes

kitten requested changes Jul 23, 2017

View reviewed changes

SaraVieira added 3 commits July 24, 2017 00:19

fix typos

8edd7b0

fix typos

028cef8

fix typos

cf566a7

SaraVieira added 2 commits July 24, 2017 12:38

fix typos

ad8c1c1

fix typos

6b4bf98

MicheleBertoli mentioned this pull request Jul 24, 2017

Add Tooling Section #64

Closed

kitten requested changes Jul 25, 2017

View reviewed changes

update link

13c7ee3

kitten requested changes Jul 25, 2017

View reviewed changes

make link pretty

8652658

kitten approved these changes Jul 25, 2017

View reviewed changes

kitten merged commit 573efef into styled-components:master Jul 25, 2017

MicheleBertoli mentioned this pull request Aug 27, 2017

Add Tooling Section #76

Closed

kitten mentioned this pull request Aug 28, 2017

Move Babel plugin documentation to the tooling section #79

Closed

Babel plugin #62

Babel plugin #62

Conversation

SaraVieira commented Jul 23, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kitten commented Jul 23, 2017

SaraVieira commented Jul 23, 2017

mxstbr commented Jul 23, 2017 • edited

kitten commented Jul 23, 2017

mxstbr commented Jul 23, 2017

MicheleBertoli commented Jul 23, 2017

kitten commented Jul 23, 2017

SaraVieira commented Jul 23, 2017

kitten left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kitten Jul 23, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SaraVieira commented Jul 23, 2017

kitten commented Jul 24, 2017

SaraVieira commented Jul 24, 2017 • edited

kitten left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kitten commented Jul 25, 2017

SaraVieira commented Jul 25, 2017

mxstbr commented Jul 25, 2017

kitten commented Jul 25, 2017

mxstbr commented Jul 23, 2017 •

edited

kitten Jul 23, 2017 •

edited

SaraVieira commented Jul 24, 2017 •

edited