Move css to component scope

[farhanlatheef]

• Ref: Improve bundle size with tree shaking and component-scoped CSS #2148

Description

• Changed: Moved button css to component level.

Checklist

• I have made corresponding changes to the documentation.
  - [ ] I have updated the types definition of modified exports.
• I have verified the functionality in some of the neeto web-apps.
  - [ ] I have added tests that prove my fix is effective or that my feature works.
  - [ ] I have added proper data-cy and data-testid attributes.
• I have added the necessary label (patch/minor/major - If package publish
  is required).

Reviewers

[farhanlatheef]

@josephmathew900 _a
Code explanation: https://farhan-ck.neetorecord.com/watch/b1f86e9e-8240-46b1-84a2-aa005aefbd8d

cc: @praveen-murali-ind

[josephmathew900]

@farhanlatheef _a LGTM.

1. As we discussed in the call, once this PR https://github.com/bigbinary/neeto-commons-frontend/pull/1139 is merged, either we should move the CSS of all the components to its respective files or we need to find a workaround for other components CSS to work.
2. Add an empty stylesheet so that the @import "@bigbinary/neetoui" won't break.
3. I checked the bundle and everything LGTM. I don't see any code duplication. But check the HTML head also to ensure that multiple imports don't cause multiple styles to get inserted.
4. Once this is done, please have a call with @praveen-murali-ind and explain the logic so that he can do further optimization.

[neetogit-bot]

@farhanlatheef CI is red.

[farhanlatheef]

@praveen-murali-ind _a

[praveen-murali-ind]

Found some edge cases of this approach.

1. neetoUI provides helper classes for managing the text color, background color, border color, flex, text alignment etc. Since the styles are clubbed with the component in this approach, if a page is not using any neetoUI components, these utility classes won’t work. We are using these classes everywhere in neeto products.

2. Some of the neetoUI component classes are being used in host applications to reuse the neetoUI styles. In the new approach, reusing the component classes won’t work if the neetoUI component is not being used on that page.

I had a discussion with @josephmathew900 and @AbhayVAshokan regarding these issues. We will check the feasibility of purging the unused CSS instead of the component-scoped CSS approach. Closing this PR and related PRs in host applications. Will do a separate POC for purging CSS for more optimisations.

cc @farhanlatheef