Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Clarify Vanilla Emotion auto-prefixing capabilities in documentation #1662

Merged
merged 5 commits into from
Dec 4, 2019
Merged

Clarify Vanilla Emotion auto-prefixing capabilities in documentation #1662

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7602250
Update docs/introduction.mdx to be more clear with auto-prefixing sup…
clemmy Nov 30, 2019
0548d60
Mention style prop again
clemmy Dec 3, 2019
a7c3d7b
Merge branch 'master' into clarify-prefixing-docs
clemmy Dec 3, 2019
16743f3
Re-order bullet points in CSS prop usage
clemmy Dec 3, 2019
10ba3fe
Merge branch 'clarify-prefixing-docs' of github.com:clemmy/emotion in…
clemmy Dec 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions docs/introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@ The [emotion](https://www.npmjs.com/package/emotion) package is framework agnost

- Requires no additional setup, babel plugin, or other config changes.

- Works in situations where configuration is restricted or not possible such as with [Create React App](https://facebook.github.io/create-react-app)
- Has support for auto vendor-prefixing, nested selectors, and media queries.

- The `css` prop is not used or needed.
- Works in situations where configuration is restricted or not possible such as with [Create React App](https://facebook.github.io/create-react-app)

- You simply prefer to use the `css` function to generate class names and `cx` to compose them.

Expand Down Expand Up @@ -61,12 +61,12 @@ The ["@emotion/core"](https://www.npmjs.com/package/@emotion/core) package requi

- Best when using React with a build environment that can be configured.

- CSS prop support

- Similar to the `style` prop but adds support for nested selectors, media queries, and auto-prefixing.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand how lack of this information in the previous section could be confusing - but was this one here confusing as well? I would keep this section as is - mention of style prop is kinda nice, it indicates how it looks like in the code.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Upon re-reading this part of the code, I realize that I was associating the style prop with the framework agnostic section for some reason. Let me re-add this part.

- `css` prop support

- Allows developers to skip the `styled` API abstraction and style components and elements directly.

- Similar to the `style` prop, but also has support for auto vendor-prefixing, nested selectors, and media queries.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would prefer moving this to its former position (first in the list) - seems more important than the point about styled API.


- The `css` prop also accepts a function that is called with your theme as an argument allowing developers easy access to common and customizable values.

- Reduces boilerplate when composing components and styled with emotion.
Expand Down