refactor!: remove scss files #1153
Conversation
JammingBen
force-pushed
the
refactor/remove-scss
branch
3 times, most recently
from
5f0402f to
d6b892e
Compare
| } | ||
| } | ||
| } | ||
| }, |
There was a problem hiding this comment.
I'm not sad to see this go... 😍 🎉
JammingBen
force-pushed
the
refactor/remove-scss
branch
from
d6b892e to
e1e27a0
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the design system by removing all SCSS files and their tedious strip-handling mechanism. The styling is now consolidated into component-level CSS or the global layers.css file, and Tailwind CSS is used for most styling needs.
Key changes include:
- Removed all design system SCSS files and the complex build-time stripping mechanism
- Migrated styles to Tailwind classes or component-specific CSS
- Updated all input/form components to use inline block labels and simplified input styles
Reviewed Changes
Copilot reviewed 49 out of 49 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Removed SCSS strip marker and custom Vite plugin for style processing |
| packages/design-system/src/styles/ | Deleted multiple SCSS theme files (oc-width, oc-form, oc-text, etc.) |
| packages/design-system/src/components/ | Updated components to use Tailwind classes and component-specific CSS |
| Test snapshots | Updated to reflect new CSS class names from SCSS to Tailwind |
| index.html | Removed SCSS import and updated button classes |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| &:disabled:checked { | ||
| @include svg-fill($internal-form-checkbox-image, '#000', $form-radio-disabled-icon-color); | ||
| @include svg-fill($internal-form-checkbox-image, '#000', var(--oc-role-on-surface-variant)); |
There was a problem hiding this comment.
The code is using variables like $form-radio-disabled-icon-color in comments but then using hardcoded CSS custom property values. This creates inconsistency and makes it harder to maintain. Consider defining these values consistently either as SCSS variables or CSS custom properties throughout the component.
| $internal-form-checkbox-indeterminate-image, | ||
| '#000', | ||
| $form-radio-disabled-icon-color | ||
| var(--oc-role-on-surface-variant) |
There was a problem hiding this comment.
The code is using variables like $form-radio-disabled-icon-color in comments but then using hardcoded CSS custom property values. This creates inconsistency and makes it harder to maintain. Consider defining these values consistently either as SCSS variables or CSS custom properties throughout the component.
packages/design-system/src/components/OcTableCell/OcTableCell.vue
Outdated
Show resolved
Hide resolved
JammingBen
force-pushed
the
refactor/remove-scss
branch
from
c400099 to
bc4e00d
Compare
Those are being fixed in #1172 |
refactor!: remove scss files
See here for the full Tailwind migration guide: https://docs.opencloud.eu/design-system/gettingStarted/tailwindMigration.html
We can now safely remove all scss files from the design-system because all styling is either in components or in the global
layers.cssfile. This allows us to remove the tedious strip-handling.Also moves some css instructions from the
layers.cssfile to the components they belong.Note that the login screen cards are still broken.refs #937