[TT-12353, TUI-46] sass out, css in

[ifrim]

Jira Issue: https://tyktech.atlassian.net/browse/TUI-46

Release Candidate Version: https://www.npmjs.com/package/@tyk-technologies/tyk-ui/v/4.0.0-rc1

There are 2 things in this PR:

1. only the components that you use in your project will get bundled
2. removed sass in favor of css

1. the bundle

For now this is only for the js files of the components. Initially I did this for the css files too by having the components load their own css file instead of importing them in a central components.css file but there were problems because this would mean that the css would load in a different order. And there are selectors with the same specificity from the projects that use tyk-ui that depend on this order. So for now the css of the components is still loaded in components.css to preserve that order.

After thinking about it and trying different things I came to the conclusion that there's no good way of splitting the code and create little bundles for each component that then get consumed by client projects. There will always be the problem of having duplicate code bundled in the final build depending on how the library is used.
The best idea would be to not bundle at all in tyk-ui and ship and consume the actual code. And the responsibility of code splitting and bundling is left to the client projects. We already do this for css(sass). We don't consume the bundle from the lib directory, we consume the sass files directly. We should do the same for js.

2. sass -> css

With this PR tyk-ui will strictly use css. But since the client projects still use sass tyk-ui ships 3 sass files to be used in the client projects until they will transition from sass to css too. If that's something that is needed.
These 3 files are:

• src/common/sass/mixins.scss
• src/common/sass/variables.scss
• src/index.scss
  They are in the same path as before to minimize the changes needed in the client projects.

For example the changes needed in ara would be just in two files:
src/index.js

webpack.config.js

transitioning

The name of the sass variables were kept the same in css custom properties.
For example if you declared a variable in sass called $foo-bar then it will become --foo-bar in css.

The colors in css have the prefix --color followed by the theme and the color name.
This in sass:

$theme-colors: (
  'default': (
    'base': #36364C,
    'base-light': #7A79A1,
    'light': #C3C3E5,
    'dark': #505071
  ),
  'primary': (
    'base': #A2A2CC,
    'light': #EDEDF9,
    'dark': #505071
  )
);

is this in css:

--color-default-base: #36364C;
--color-default-base-light: #7A79A1;
--color-default-light: #C3C3E5;
--color-default-dark: #505071;
--color-primary-base: #A2A2CC;
--color-primary-light: #EDEDF9;
--color-primary-dark: #505071;

And when you use a color theme-color('danger', 'dark') becomes var(--color-danger-dark).

When using spacing variables map.get($spacing, 'md') becomes var(--spacing-md).

Overwriting tyk-ui variables looks like this:

:root {
  --general-border-radius: 18px;
  --general-border-width: 2px;

  --color-primary-base: #A2A2CC;
  --color-primary-light: #EDEDF9;
  --color-primary-dark: #505071;

  --text-color: #505071;
  --label-color: var(--color-primary-base);
  ...
}

[netlify]

✅ Deploy Preview for nifty-johnson-6002dd ready!

Name	Link
🔨 Latest commit	4ea38e4
🔍 Latest deploy log	https://app.netlify.com/sites/nifty-johnson-6002dd/deploys/667093cc75479b0008f3dd28
😎 Deploy Preview	https://deploy-preview-363--nifty-johnson-6002dd.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[sonarcloud]

Quality Gate failed

Failed conditions
75.0% Coverage on New Code (required ≥ 80%)
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarCloud

Catch issues before they fail your Quality Gate with our IDE extension SonarLint