WindiCSS Environment

[fabianmarz]

Hi,

first of all thanks for your great work on this tool and providing a tailwind config example. I was trying to adapt this tailwind config to use WindiCSS (https://github.com/windicss/windicss) without any luck. I ran $ bit install windicss-webpack-plugin windicss and changed the lines in the transformers.ts to

import { WebpackConfigTransformer, WebpackConfigMutator } from "@teambit/webpack";
import * as stylesRegexps from "@teambit/webpack.modules.style-regexps";
import WindiCSS from "windicss-webpack-plugin";
import { tailwindConfigPath } from "@fabianmarz/test.styles.tailwind-styles";

function addTailwindConfig(config: WebpackConfigMutator): WebpackConfigMutator {
  // @ts-ignore
  const oneOfRule = findOneOfRuleInPreviewConfig(config.raw.module.rules);
  const cssRule = findCssRuleByCssNoModuleRegexp(oneOfRule);
  if (!cssRule) {
    throw new Error(
      "css rule not found. this probably means the webpack config of bit itself has changed"
    );
  }
  config.addPlugin(new WindiCSS());
  return config;
}
// […]

but when running $ bit compile && bit start I get a lot of missing SCSS/SASS variables from within the bit packages. I just started to tinker with bit so I'm not sure what I need to do to get WindiCSS working with bit.

Maybe you could give me some guidance please?

Thanks in advance 😄