-
-
Notifications
You must be signed in to change notification settings - Fork 437
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #62 from SaraVieira/babel-plugin
Babel plugin
- Loading branch information
Showing
6 changed files
with
283 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| import React from 'react'; | ||
| import SectionLayout from '../SectionLayout'; | ||
| import CodeBlock from '../CodeBlock'; | ||
| import Code from '../Code'; | ||
| import Note from '../Note'; | ||
| import Link from '../Link' | ||
|
|
||
| const installNPM = ` | ||
| npm install --save-dev babel-plugin-styled-components | ||
| `.trim(); | ||
|
|
||
| const usage = ` | ||
| { | ||
| "plugins": ["styled-components"] | ||
| } | ||
| `.trim(); | ||
|
|
||
| const ssr = ` | ||
| { | ||
| "plugins": [ | ||
| ["styled-components", { | ||
| "ssr": true | ||
| }] | ||
| ] | ||
| } | ||
| `.trim(); | ||
|
|
||
| const displayName = ` | ||
| { | ||
| "plugins": [ | ||
| ["styled-components", { | ||
| "displayName": false | ||
| }] | ||
| ] | ||
| } | ||
| `.trim(); | ||
|
|
||
| const preprocess = ` | ||
| { | ||
| "plugins": [ | ||
| ["styled-components", { | ||
| "preprocess": true | ||
| }] | ||
| ] | ||
| } | ||
| `.trim(); | ||
|
|
||
| const minify = ` | ||
| { | ||
| "plugins": [ | ||
| ["styled-components", { | ||
| "minify": false | ||
| }] | ||
| ] | ||
| } | ||
| `.trim(); | ||
|
|
||
| const transpilation = ` | ||
| { | ||
| "plugins": [ | ||
| ["styled-components", { | ||
| "transpileTemplateLiterals": false | ||
| }] | ||
| ] | ||
| } | ||
| `.trim(); | ||
|
|
||
| const BabelPlugin = () => | ||
| <SectionLayout title="Babel Plugin" labels={['v2']}> | ||
| <p> | ||
| This plugin adds support for server-side rendering, for minification of | ||
| styles and gives you a nicer debugging experience. | ||
| </p> | ||
| <SectionLayout sub title="Usage"> | ||
| <p>Install the babel-plugin first:</p> | ||
| <CodeBlock code={installNPM} language="node" /> | ||
| <p>Then add it to your babel configuration like so:</p> | ||
| <CodeBlock code={usage} language="node" /> | ||
| </SectionLayout> | ||
| <SectionLayout sub title="Server-side rendering"> | ||
| <Note>This option is turned off by default</Note> | ||
| <p> | ||
| 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 styled-components React will complain. | ||
| </p> | ||
| <p> | ||
| You can enable it with the <Code>ssr</Code> option: | ||
| </p> | ||
| <CodeBlock code={ssr} language="node" /> | ||
| </SectionLayout> | ||
| <SectionLayout sub title="Better debugging"> | ||
| <p> | ||
| This options adds the components' name and displayName to the class name | ||
| attached to the DOM node. In your browser's DevTools you'll see:{' '} | ||
| <Code> | ||
| <button class="sc-Button-asdf123 asdf123" /> | ||
| </Code>{' '} | ||
| instead of just <Code><button class="asdf123" /></Code>. | ||
| </p> | ||
| <p> | ||
| This also adds support for showing your components' real name in the | ||
| React DevTools. Consider writing a styled component that renders a{' '} | ||
| <Code>button</Code> element, called <Code>MyButton</Code>. It will | ||
| normally show up as <Code><styled.button></Code> for all of your | ||
| components, but with this plugin they show{' '} | ||
| <Code><MyButton /></Code>. | ||
| </p> | ||
| <p> | ||
| This makes it easier to find your components and to figure out where | ||
| they live in your app. | ||
| </p> | ||
| <p> | ||
| If you don't need this feature, you can disable it with the{' '} | ||
| <Code>displayName</Code> option: | ||
| </p> | ||
| <CodeBlock code={displayName} language="node" /> | ||
| </SectionLayout> | ||
| <SectionLayout sub title="Preprocessing"> | ||
| <Note> | ||
| This is experimental and we don't yet know of all limitations and bugs! | ||
| Consider this non-production ready for now. ⚠️ | ||
| </Note> | ||
| <p> | ||
| This plugin preprocesses your styles with stylis and uses the{' '} | ||
| <Code>no-parser.js</Code> entrypoint on styled-components. | ||
| </p> | ||
| <p> | ||
| This effectively removes stylis from your runtime bundle and should | ||
| slightly improve runtime performance and shrink your bundle size. | ||
| </p> | ||
| <p> | ||
| It automatically disables the <Code>minify</Code> option, since stylis | ||
| already does some minification on your CSS. | ||
| </p> | ||
| <p> | ||
| You can enable preprocessing with the <Code>preprocess</Code> option: | ||
| </p> | ||
| <CodeBlock code={preprocess} language="node" /> | ||
| </SectionLayout> | ||
| <SectionLayout sub title="Minification"> | ||
| <Note> | ||
| This option is turned on by default. If you experience mangled CSS | ||
| results, turn it off and open an issue please. | ||
| </Note> | ||
| <p> | ||
| This plugin minifies your styles in the tagged template literals, giving | ||
| you big bundle size savings. | ||
| </p> | ||
| <Note> | ||
| This operation may potentially break your styles in some rare cases, so | ||
| we recommend to keep this option enabled in development if it's enabled | ||
| in the production build. | ||
| </Note> | ||
| <p> | ||
| You can disable minification with the <Code>minify</Code> option: | ||
| </p> | ||
| <CodeBlock code={minify} language="node" /> | ||
| </SectionLayout> | ||
| <SectionLayout sub title="Template String Transpilation"> | ||
| <p> | ||
| We also transpile <Code>styled-components</Code> tagged template | ||
| 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{' '} | ||
| <Link inline href="#tagged-template-literals">Tagged Template Literals</Link> for | ||
| more information about that) You can use the {' '} | ||
| <Code>transpileTemplateLiterals</Code> option to turn this feature off. | ||
| </p> | ||
| <CodeBlock code={transpilation} language="node" /> | ||
| </SectionLayout> | ||
| </SectionLayout>; | ||
|
|
||
| export default BabelPlugin; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.