Small grammar and typo fixes in README (#291)

README.md

@@ -17,11 +17,11 @@
 
 # 🪒 The Great Shave Off Challenge
 
-Can you shave off bytes from goober? Do it and your gonna get paid! [More info here](https://goober.rocks/the-great-shave-off)
+Can you shave off bytes from goober? Do it and you're gonna get paid! [More info here](https://goober.rocks/the-great-shave-off)
 
 # Motivation
 
-I always wondered, if you can get a working solution for css-in-js with a smaller footprint. So, while I was working on a side-project I wanted a to use styled-components or more accurate the `styled` pattern. Looking at the JavaScript bundled sizes, I quickly realized that I would have to include ~12kB([styled-components](https://github.com/styled-components/styled-components)) or ~11kB([emotion](https://github.com/emotion-js/emotion)) just so I can use the `styled` paradigm. So, I embarked in a mission to create a smaller alternative for these well established apis.
+I've always wondered if you could get a working solution for css-in-js with a smaller footprint. While I was working on a side project I wanted to use styled-components, or more accurately the `styled` pattern. Looking at the JavaScript bundle sizes, I quickly realized that I would have to include ~12kB([styled-components](https://github.com/styled-components/styled-components)) or ~11kB([emotion](https://github.com/emotion-js/emotion)) just so I can use the `styled` paradigm. So, I embarked on a mission to create a smaller alternative for these well established APIs.
 
 # Why the peanuts emoji?
 
@@ -67,7 +67,7 @@ It's a pun on the tagline.
 
 # Usage
 
-The API is inspired by emotion, `styled` function. Meaning, you call it with your `tagName` and returns a vDOM component for that tag. Note, `setup` is needed to be run before the `styled` function is used.
+The API is inspired by emotion `styled` function. Meaning, you call it with your `tagName`, and it returns a vDOM component for that tag. Note, `setup` needs to be ran before the `styled` function is used.
 
 ```jsx
 import { h } from 'preact';
@@ -112,9 +112,9 @@ const Button = styled('button')`
 
 # Comparison and tradeoffs
 
-In this section I would like to describe as objectively as I can the comparision between the two most known css-in-js packages: styled-component and emotion. The latest versions to date.
+In this section I would like to compare goober, as objectively as I can, with the latest versions of two most well known css-in-js packages: styled-components and emotion.
 
-I would use the follwing markers to reflect the state of each point:
+I've used the following markers to reflect the state of each feature:
 
 -   ✅ Supported
 -   🟡 Partially supported
@@ -147,20 +147,20 @@ Here we go:
 
 Footnotes
 
--   [1] `goober` can render in _any_ dom target. Meaning you can use `goober` to define scoped styles in any context. Really usefull for web-components.
+-   [1] `goober` can render in _any_ dom target. Meaning you can use `goober` to define scoped styles in any context. Really useful for web-components.
 -   [2] Supported only via `babel-plugin-transform-goober`
 
 # SSR
 
-You can get the critical CSS for SSR, via `extractCss`. Take a look at this example: [CodeSandbox: SSR with Preact and goober](https://codesandbox.io/s/7m9zzl6746) and read the full explanation for `extractCSS` and `targets` below.
+You can get the critical CSS for SSR via `extractCss`. Take a look at this example: [CodeSandbox: SSR with Preact and goober](https://codesandbox.io/s/7m9zzl6746) and read the full explanation for `extractCSS` and `targets` below.
 
 # Benchmarks
 
 The results are included inside the build output as well.
 
 ## Browser
 
-Comming soon!
+Coming soon!
 
 ## SSR
 
@@ -197,11 +197,11 @@ Fastest is: goober
 
 # API
 
-As you can see it supports most of the syntaxes of CSS. If you find any issues, please submit a ticket or even a PR with a fix.
+As you can see, goober supports most of the CSS syntax. If you find any issues, please submit a ticket, or open a PR with a fix.
 
 ### `styled(tagName: String | Function, forwardRef?: Function)`
 
--   `@param {String|Function} tagName` The name of the dom element you'd like the styled to be applied to
+-   `@param {String|Function} tagName` The name of the DOM element you'd like the styles to be applied to
 -   `@param {Function} forwardRef` Forward ref function. Usually `React.forwardRef`
 -   `@returns {Function}` Returns the tag template function.
 
@@ -280,9 +280,9 @@ const Title = styled('h1', React.forwardRef)`
 
 ### `setup(pragma: Function, prefixer?: Function, theme?: Function, forwardProps?: Function)`
 
-The call to `setup()` should occur once only. It should be called in the entry file of you project.
+The call to `setup()` should occur only once. It should be called in the entry file of your project.
 
-Given the fact that `react` uses `createElement` for the transformed elements and `preact` uses `h`, `setup` should be called with the proper _pragma_ function. This was added to reduce the bundled size and being able to bundle esmodule version. At the moment I think it's the best tradeoff we can have.
+Given the fact that `react` uses `createElement` for the transformed elements and `preact` uses `h`, `setup` should be called with the proper _pragma_ function. This was added to reduce the bundled size and being able to bundle an esmodule version. At the moment, it's the best tradeoff I can think of.
 
 ```js
 import React from 'react';
@@ -321,9 +321,9 @@ const ContainerWithTheme = styled('div')`
 
 #### With forwardProps
 
-The `forwardProps` function, offers a way to achieve the same `shouldForwardProps` functionality as emotion and styled-components(with transient props) offer. The difference in here is that the function receives the whole props and you are in charge of removing the props that are should not end-up in the dom.
+The `forwardProps` function offers a way to achieve the same `shouldForwardProps` functionality as emotion and styled-components (with transient props) offer. The difference here is that the function receives the whole props and you are in charge of removing the props that should not end up in the DOM.
 
-This is a super useful functionality when paired with theme object, variants or any other customisation one might need.
+This is a super useful functionality when paired with theme object, variants, or any other customisation one might need.
 
 ```js
 import React from 'react';
@@ -355,7 +355,7 @@ setup(React.createElement, undefined, undefined, (props) => {
 });
 ```
 
-Alternatively you can use `goober/should-forward-prop` addon, to pass only the filter function and not have to deal with the full `props` object.
+Alternatively you can use `goober/should-forward-prop` addon to pass only the filter function and not have to deal with the full `props` object.
 
 ```js
 import React from 'react';
@@ -429,7 +429,7 @@ const BtnClassName = (props) =>
 
 **Notice:** using `css` with object can reduce your bundle size.
 
-We also can declare the styles at the top of the file by wrapping `css` into a function that we call to get the className.
+We can also declare styles at the top of the file by wrapping `css` into a function that we call to get the className.
 
 ```js
 import { css } from 'goober';
@@ -450,7 +450,7 @@ const App = () => <button className={BtnClassName({ size: 20 })}>click</button>;
 
 The difference between calling `css` directly and wrapping into a function is the timing of its execution. The former is when the component(file) is imported, the latter is when it is actually rendered.
 
-If you use `extractCSS` for SSR, you may prefer to use the latter or `styled` api to avoid inconsistent results.
+If you use `extractCSS` for SSR, you may prefer to use the latter, or the `styled` API to avoid inconsistent results.
 
 ### `targets`
 
@@ -511,7 +511,7 @@ export default function App() {
 
 #### How about using `glob` function directly?
 
-Before the global addon, `goober/global`, there was a method named `glob` that was part of the main package that would do the same thing, more or less. Having only that method to define global styles usually led to missing global styles from the extracted css, since the pattern did not enforced the evaluation of the styles at render time. The `glob` method it is still exported from `goober/global` if you have a hard dependency on it. It still has the same API:
+Before the global addon, `goober/global`, there was a method named `glob` that was part of the main package that would do the same thing, more or less. Having only that method to define global styles usually led to missing global styles from the extracted css, since the pattern did not enforce the evaluation of the styles at render time. The `glob` method is still exported from `goober/global`, in case you have a hard dependency on it. It still has the same API:
 
 ```js
 import { glob } from 'goober';
@@ -554,7 +554,7 @@ const Wicked = styled('div')`
 
 ### `shouldForwardProp`
 
-To seamingly implement the `shouldForwardProp` without the need to provide the full loop over `props` you can use the `goober/should-forward-prop` addon.
+To implement the `shouldForwardProp` without the need to provide the full loop over `props` you can use the `goober/should-forward-prop` addon.
 
 ```js
 import { h } from 'preact';
@@ -644,7 +644,7 @@ export default (config, env) => {
 }
 ```
 
-When you build your Preact application this will run `extractCss` on your prerendered pages and add critical styles for each page.
+When you build your Preact application, this will run `extractCss` on your pre-rendered pages and add critical styles for each page.
 
 ## CSS Prop
 
@@ -689,21 +689,21 @@ Usage:
 -   [x] [Extending Styles](#sharing-style)
 -   [x] Media queries (@media)
 -   [x] Keyframes (@keyframes)
--   [x] Smart(lazy) client-side hydration
+-   [x] Smart (lazy) client-side hydration
 -   [x] Styling any component
     -   via `` const Btn = ({className}) => {...}; const TomatoBtn = styled(Btn)`color: tomato;` ``
--   [x] Vanilla(via `css` function)
--   [x] `globalStyle`(via `glob`) so one would be able to create global styles
+-   [x] Vanilla (via `css` function)
+-   [x] `globalStyle` (via `glob`) so one would be able to create global styles
 -   [x] target/extract from elements other than `<head>`
 -   [x] [vendor prefixing](#autoprefixer)
 
 # Sharing style
 
-There are a couple of ways to effectly share/extend styles across components.
+There are a couple of ways to effectively share/extend styles across components.
 
 ## Extending
 
-One can simply extend the desired component that needs to be enrich or overwriten with another set of css rules.
+You can extend the desired component that needs to be enriched or overwritten with another set of css rules.
 
 ```js
 import { styled } from 'goober';
@@ -764,15 +764,15 @@ import { prefix } from 'goober/prefixer';
 setup(React.createElement, prefix);
 ```
 
-And voila! It is done!
+And voilà! It is done!
 
 # TypeScript
 
 `goober` comes with type definitions build in, making it easy to get started in TypeScript straight away.
 
 ## Prop Types
 
-If you're utilising custom props and wish to style based on them, you can do so when initialising as follows:
+If you're using custom props and wish to style based on them, you can do so as follows:
 
 ```ts
 interface Props {
@@ -792,7 +792,7 @@ styled<Props>('div')`
 
 ## Extending Theme
 
-If you're using a [custom theme](../api/setup.md#with-theme) with goober, to add types to it you should create a declaration file at the base of your project.
+If you're using a [custom theme](../api/setup.md#with-theme) and want to add types to it, you can create a declaration file at the base of your project.
 
 ```ts
 // goober.d.t.s