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

fix a typo in compoundVariants #416

Merged
merged 3 commits into from
Sep 13, 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
54 changes: 27 additions & 27 deletions example/storybook/src/advanced/BabelPlugins/index.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,32 @@ import { Box, AppProvider } from '@gluestack/design-system';

@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`.

## Installation Steps:

1. Installing babel-plugin-styled-resolver:

```bash
yarn add @gluestack-style/babel-plugin-styled-resolver
```

2. Add Babel plugin to your app babel.config.js

```bash
const path = require('path');
const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
gluestackStyleResolver,
],
};
};
```

3. Just make sure your `babel.config.js` and `gluestack-style.config.js/ts` are in the same directory. We suggest you keep both of them at the root of your app codebase.

### **Let us see how this Babel plugin works.**

- First, it traverses your files and tries to find `styled` imported from `@gluestack-style/react`.
Expand Down Expand Up @@ -54,33 +80,7 @@ Here’s a small diagram explaining how the flow works:
</Box>
</AppProvider>

Your code gets transpiled in the build files like this:

## Installation Steps:

1. Installing babel-plugin-styled-resolver:

```bash
yarn add @gluestack-style/babel-plugin-styled-resolver
```

2. Add Babel plugin to your app babel.config.js

```bash
const path = require('path');
const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
gluestackStyleResolver,
],
};
};
```

3. Just make sure your `babel.config.js` and `gluestack-style.config.js/ts` are in the same directory. We suggest you keep both of them at the root of your app codebase.
Your code gets transpiled in the build files like this.

## Advanced

Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ export type GlobalStyles<AliasTypes, TokenTypes, Variants> = GlobalVariantSx<
AliasTypes,
TokenTypes
>;
compundVariants?: readonly GlobalCompoundVariant<
compoundVariants?: readonly GlobalCompoundVariant<
'variants' extends keyof Variants ? Variants['variants'] : unknown,
AliasTypes,
TokenTypes
Expand Down
Loading