Skip to content

feat: clean up stylesheets - #1845

Merged
oliverlaz merged 5 commits into
mainfrom
stylesheet-cleanup
Jul 9, 2025
Merged

feat: clean up stylesheets#1845
oliverlaz merged 5 commits into
mainfrom
stylesheet-cleanup

Conversation

@oliverlaz

Copy link
Copy Markdown
Member

💡 Overview

The SDK stylesheet had a lot of icons used in our sample apps, unnecessarily increasing the size of the shipped CSS.
This PR moves those icons to the appropriate sample applications and trims around 50KB of SDK CSS.

As part of this refactor, a few more improvements are made:

  • vendored css properties are sorted correctly, so they don't take precedence
  • updates to the latest sass version

@oliverlaz
oliverlaz requested review from Copilot and myandrienko July 4, 2025 08:52

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

The PR refactors sample-app stylesheet imports to use Sass modules, scopes breakpoint mixins under a breakpoints namespace, extracts icon definitions into the sample app, and bumps the Sass dependency to v1.89.2.

  • Converted all @import statements to @use and updated mixin calls to breakpoints.respond-above(...)
  • Moved icon mask definitions from the SDK CSS into the React sample-app’s icons.scss
  • Upgraded Sass version and modernized utility mixin property order

Reviewed Changes

Copilot reviewed 62 out of 63 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
style/index.scss Swapped @import for @use for all partials
style/breakpoints.scss Added @use 'sass:map' and updated map API calls
style/icons.scss Added large set of icon mask definitions locally
packages/styling/src/_utils.scss Modernized apply-mask-image mixin declarations
sample-apps/react/messenger-clone/src/styles/index.scss Replaced CSS imports with meta.load-css and updated vendor CSS paths
Comments suppressed due to low confidence (2)

sample-apps/react/messenger-clone/src/styles/index.scss:9

  • [nitpick] The meta.load-css calls mix extension-less and .scss file names; unify usage (either always include .scss or omit it) to avoid import resolution confusion.
@include meta.load-css('layout');

sample-apps/react/messenger-clone/src/styles/index.scss:3

  • Double-check that the path 'stream-chat-react/css/v2/index.css' resolves correctly under Sass module resolution; if it fails, consider using the npm package import syntax (e.g. ~stream-chat-react/css/v2/index.css).
  @import 'stream-chat-react/css/v2/index.css';

Comment thread packages/styling/src/_utils.scss
Comment thread sample-apps/react/react-dogfood/style/icons.scss
Comment thread sample-apps/react/react-dogfood/style/icons.scss
@oliverlaz
oliverlaz merged commit e42a26b into main Jul 9, 2025
12 checks passed
@oliverlaz
oliverlaz deleted the stylesheet-cleanup branch July 9, 2025 13:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants