Skip to content
This repository has been archived by the owner on Dec 11, 2023. It is now read-only.

Fix/spelling #475

Merged
merged 4 commits into from
Oct 16, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
3 changes: 2 additions & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,6 @@
// Path to a .prettierignore or similar file
"prettier.ignorePath": ".prettierignore",
// If true, puts the `>` of a multi-line jsx element at the end of the last line instead of being alone on the next line
"editor.wordWrap": "on"
"editor.wordWrap": "on",
"cSpell.words": ["gluestack", "Pressable", "themeable"]
}
4 changes: 2 additions & 2 deletions example/storybook/src/advanced/BabelPlugins/index.stories.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Babel Plugins | gluestack-style
description: All the Babel plugins gluestack-style provides for its ecosystem. It transpiles your styled function calls and resolves the component styling in build time.
description: All the Babel plugins gluestack-style provides for its ecosystem. It transpile your styled function calls and resolves the component styling in build time.
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';
Expand All @@ -12,7 +12,7 @@ import { Box, AppProvider } from '@gluestack/design-system';

### @gluestack-style/babel-plugin-styled-resolver

@gluestack-style/babel-plugin-styled-resolver transpiles your `styled` function calls and resolves the `component styling` in build time. It also generates all the `CSS rules` and style ids based on which these CSS styles are applied on the component. Doing this saves tons of time on runtime because all your style calculation is already done and all your app has to do is to inject this style into a style tag and viola! All your styles appear instantaneously. This helps us to improve the performance of the apps 5-6 times. If you provide the `components` option then it also resolves the inline styles of the components created using `@gluestack-style/react`.
@gluestack-style/babel-plugin-styled-resolver transpile your `styled` function calls and resolves the `component styling` in build time. It also generates all the `CSS rules` and style ids based on which these CSS styles are applied on the component. Doing this saves tons of time on runtime because all your style calculation is already done and all your app has to do is to inject this style into a style tag and viola! All your styles appear instantaneously. This helps us to improve the performance of the apps 5-6 times. If you provide the `components` option then it also resolves the inline styles of the components created using `@gluestack-style/react`.

## Installation Steps:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -187,4 +187,4 @@ export const config = createConfig({
} as const);
```

> Warning: We strongly advise against using this feature" as this can impact your performance since this needs to be resolved on the fly and can not be optimised at build time.
> Warning: We strongly advise against using this feature" as this can impact your performance since this needs to be resolved on the fly and can not be optimized at build time.
2 changes: 1 addition & 1 deletion example/storybook/src/api/UtilityProps/index.stories.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Utility Props | gluestack-style
description: Writing inline styles with Utlity Props. We provide you the ability to pass down utility props on any Styled Component which internally converts to `sx` prop.
description: Writing inline styles with Utility Props. We provide you the ability to pass down utility props on any Styled Component which internally converts to `sx` prop.
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ We tested the performance of our landing page, built with `gluestack-style` and
<img
src="/assets/PerformanceScreenshot.png"
width="100%"
alt="Performance matrics from lighthouse report"
alt="Performance metrics from lighthouse report"
/>

We have run the benchmark, and we are getting great results compared to other libraries. We don't want the comparison with other libraries to be the ultimate scoring system. It doesn't give the full picture of any library. There are other important metrics too. Also, we may go wrong in how we run the benchmark, we may end up with selection bias too (unintentionally).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ The font plugin, a utility for the styled function, provides a unified way to pa
Include the `FontResolver` plugin in your config. To customize font resolution, pass a mapFonts callback function to the constructor.

```js
import { FontResolver } from '@gluetsack-style/react';
import { FontResolver } from '@gluestack-style/react';

export const config = {
aliases: {},
Expand Down
2 changes: 1 addition & 1 deletion packages/react/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@gluestack-style/react",
"description": "A universal & performant styling library for React Native, Next.js & React",
"version": "1.0.4",
"version": "1.0.5",
"keywords": [
"React Native",
"Next.js",
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/StyledProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export const StyledProvider: React.FC<{

onChange((currentColor: string) => {
// only for web
if (!_experimentalNestedProvider) {
if (Platform.OS === 'web' && !_experimentalNestedProvider) {
const documentElement = document.documentElement;

if (Platform.OS === 'web') {
Expand Down