Linaria usage with CRA 4.x configurations

craco.config.js

const CracoAlias = require('craco-alias');
const WebpackBar = require('webpackbar');
const { getLoader, loaderByName } = require('@craco/craco');
const transformBabelLoader = require('./internals/transformBabelLoader');

module.exports = {
    style: {
        postcss: {
            plugins: [require('tailwindcss'), require('autoprefixer')],
        },
    },
    plugins: [
        {
            plugin: CracoAlias,
            options: {
                source: 'tsconfig',
                // baseUrl SHOULD be specified
                // plugin does not take it from tsconfig
                baseUrl: 'src',
                /* tsConfigPath should point to the file where "baseUrl" and "paths"  are specified*/
                tsConfigPath: './tsconfig.paths.json',
            },
        },
    ],
    webpack: {
        alias: {},
        plugins: {
            add: [
                new WebpackBar({ color: '#772194' }),
            ] /* An array of plugins */,
            remove: [] /* An array of plugin constructor's names (i.e. "StyleLintPlugin", "ESLintWebpackPlugin" ) */,
        },
        configure: (webpackConfig, { env, paths }) => {
            const { isFound, match } = getLoader(
                webpackConfig,
                loaderByName('babel-loader'),
            );

            if (isFound) {
                match.parent[match.index] = transformBabelLoader(
                    match.parent[match.index],
                );
            }

            return webpackConfig;
        },
    },
    eslint: {
        enable: false /* (default value) */,
        mode: 'file' /* (default value) */,
        configure: eslintConfig => {
            return eslintConfig;
        },
        pluginOptions: eslintOptions => {
            return eslintOptions;
        },
    },

    babel: {
        presets: ['@linaria'],
        plugins: ['lodash'],
        loaderOptions: babelLoaderOptions => {
            return babelLoaderOptions;
        },
    },
};

transformBabelLoader.js

module.exports = loader => {
    return {
        test: loader.test,
        include: loader.include,
        rules: [
            {
                loader: loader.loader,
                options: {
                    presets: [
                        loader.options.presets[0],
                        '@linaria/babel-preset',
                    ],
                },
            },
            {
                loader: '@linaria/webpack-loader',
                options: {
                    cacheDirectory: 'src/.linaria_cache',
                    sourceMap: process.env.NODE_ENV !== 'production',
                    babelOptions: {
                        presets: loader.options.presets,
                    },
                },
            },
        ],
    };
};