Babel plugins

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

Installation Steps:

1. Step

   1

   :

   Installing babel-plugin-styled-resolver:

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

2. Step

   2

   :

   Add Babel plugin to your app babel.config.js

   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. Step

   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.
• Once it finds a declaration of styled it then looks for its function call.
• From that function call, it fetches the component style config(2nd Parameter), component config (3rd parameter), and component extended config (4th Parameter).
• Then it resolves the styling and generates the CSS rules and corresponding style ids.
• Once resolved it removes the 2nd parameter component style and adds a 5th param which is an object with ordered resolved style and component style ids that are sorted according to precedence.
• Now when the components read this 5th param it straightway just passes the style id that should be applied according to the condition the component is in.

Advanced

• configPath: The configPath option allows you to define the path to the configuration file. This configuration file contains the aliases and tokens used by the plugin. By default, the plugin assumes that the configuration file is located in the same directory as the babel.config.js file.

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,
        {
          configPath: path.resolve(__dirname, './gluestack-style.config.js'), // Specify the path of the config file
        },
      ],
    ],
  };
};

• configThemePath: The configThemePath option provides a way to specify the path of the theme object within your configuration file.

const config = {
  componentPath: '/core/components',
  theme: {
    aliases: {},
    tokens: {},
  },
};

// babel.config.js
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,
        {
          configThemePath: ['config', 'theme'], // Specify the path of the theme object in your config file
        },
      ],
    ],
  };
};

• styledAlias: The styledAlias option provides the flexibility to define a custom name for the styled aliases function. This option is used to identify the function calls that need to be transformed by the plugin. By default, the plugin searches for the styled function. However, with the styledAlias option, you can specify a different name for the styled aliases function, allowing you to adapt the plugin to your specific codebase and styling conventions.

// babel.config.js
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,
        {
          styledAlias: 'myStyled', // Specify your styled aliases function name if different
        },
      ],
    ],
  };
};

• styled: The styled option allows you to specify the library name & file path of the styled function. This option is useful in scenarios where you are exporting the styled function from a different library. By default, the plugin assumes that the styled function is exported from @gluestack-style/react. However, with the styled option, you can customize it to match the actual library & file name where the styled function is defined.

// babel.config.js
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,
        {
          styled: [
            '@gluestack-style/react', // import path of the styled function
            path.resolve(__dirname, './gluestack-ui-components/core/styled'), // file path of the styled function
          ],
        },
      ],
    ],
  };
};

• components: The components option allows you to specify the library/import_path name & file path of components created using @gluestack-style/react. This option is useful in scenarios where you are creating a custom component with the styled function and using it with inline styles. If you want to resolve those inline styles on build time just define this option with the library name and file path of the components folder or library.

// babel.config.js
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,
        {
          components: [
            '@gluestack-ui/themed', // import path of the components folder or library name
            path.resolve(__dirname, './gluestack-ui-components/core/component'), // file path of the components folder
          ],
        },
      ],
    ],
  };
};