Migrate to css-in-js with linaria

[nstepien]

Docs: https://github.com/callstack/linaria

Rollup is set up so we inject the styles, that way users don't have to worry about manually importing a stylesheet.

• Investigate linaria configs
  • https://github.com/callstack/linaria/blob/master/docs/CONFIGURATION.md
  • Use classNameSlug to guarantee different generated class names after each rdg version update.
• Investigate linaria webpack loader configs
  • https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#webpack
• Investigate linaria rollup plugin configs
  • https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#rollup
• Investigate postcss rollup plugin configs
  • https://github.com/egoist/rollup-plugin-postcss
• Remove remaining references to dist/
• Remove less
  • Replace story styles
  • Update sideEffects in package.json

---

I tried using polished with its babel plugin, but that didn't transpile everything away, for example:

// transpiled away :^)
darken(0.2, '#fff');

// not transpiled away :^(
const bg = '#fff';
darken(0.2, bg);

I decided to use hsl() instead, close enough.

[nstepien]

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-dll-flags

[amanmahajan7]

Looks really good. A few discussion items

[amanmahajan7]

I think where possible, we can move the styles in the file that use them. This way we can encapsulate styles and I think that is what CSS-in-JS libraries promote. Wdyt?

[nstepien]

Done, in some cases the styles are intertwined and need other generated class names, so I left them alone for now.

[amanmahajan7]

I wonder if we should create a helper component that can render the default styles for example

export function DefaultCell({ column, className, props }) {
className = clsx(
    cellClassname,
    {
      [cellFrozenClassname]: column.frozen,
      [cellFrozenLastClassname]: column.isLastFrozenColumn
    },
    className
  );

  return (
    <div
      role="gridcell"
      aria-colindex={column.idx + 1}
      className={className}
      {...props}
    >
     {children}
    </div>
  );
}

Wdyt?

[nstepien]

It's more stuff for react to render, not sure 🤔

[amanmahajan7]

Looks great 👍