From cadbd9608f4caf6bd2ae1246a8ea349002558f0d Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 14 Feb 2025 14:15:47 +0100 Subject: [PATCH 1/2] refactor: migrate to Sass modules and migrate to CSS logical properties and values --- package.json | 14 ++++---- src/scss/_custom.scss | 1 - src/scss/_theme.scss | 63 ---------------------------------- src/scss/_variables.scss | 5 --- src/scss/examples.scss | 19 +++++++---- src/scss/style.scss | 74 ++++++++++++++++++++++++++++++++++------ vite.config.mjs | 6 ---- 7 files changed, 82 insertions(+), 100 deletions(-) delete mode 100644 src/scss/_custom.scss delete mode 100644 src/scss/_theme.scss delete mode 100644 src/scss/_variables.scss diff --git a/package.json b/package.json index b410b95e6..bfe9b97c4 100644 --- a/package.json +++ b/package.json @@ -19,8 +19,8 @@ "start": "vite" }, "dependencies": { - "@coreui/chartjs": "^4.0.0", - "@coreui/coreui": "^5.2.0", + "@coreui/chartjs": "^4.1.0", + "@coreui/coreui": "^5.3.1", "@coreui/icons": "^3.0.1", "@coreui/icons-react": "^2.3.0", "@coreui/react": "^5.5.0", @@ -41,15 +41,15 @@ "devDependencies": { "@vitejs/plugin-react": "^4.3.4", "autoprefixer": "^10.4.20", - "eslint": "^9.19.0", + "eslint": "^9.20.1", "eslint-config-prettier": "^10.0.1", "eslint-plugin-prettier": "^5.2.3", "eslint-plugin-react": "^7.37.4", "eslint-plugin-react-hooks": "^5.1.0", - "globals": "^15.14.0", - "postcss": "^8.5.1", - "prettier": "3.4.2", - "sass": "^1.84.0", + "globals": "^15.15.0", + "postcss": "^8.5.2", + "prettier": "3.5.1", + "sass": "^1.85.0", "vite": "^6.1.0" } } diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss deleted file mode 100644 index 15d367af4..000000000 --- a/src/scss/_custom.scss +++ /dev/null @@ -1 +0,0 @@ -// Here you can add other styles diff --git a/src/scss/_theme.scss b/src/scss/_theme.scss deleted file mode 100644 index b014421f2..000000000 --- a/src/scss/_theme.scss +++ /dev/null @@ -1,63 +0,0 @@ -body { - background-color: var(--cui-tertiary-bg); -} - -.wrapper { - width: 100%; - padding-inline: var(--cui-sidebar-occupy-start, 0) var(--cui-sidebar-occupy-end, 0); - will-change: auto; - @include transition(padding .15s); -} - -.header > .container-fluid, -.sidebar-header { - min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list -} - -.sidebar-brand-full { - margin-left: 3px; -} - -.sidebar-header { - .nav-underline-border { - --cui-nav-underline-border-link-padding-x: 1rem; - --cui-nav-underline-border-gap: 0; - } - - .nav-link { - display: flex; - align-items: center; - min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list - } -} - -.sidebar-toggler { - margin-inline-start: auto; -} - -.sidebar-narrow, -.sidebar-narrow-unfoldable:not(:hover) { - .sidebar-toggler { - margin-inline-end: auto - } -} - -.header > .container-fluid + .container-fluid { - min-height: 3rem; -} - -.footer { - min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list -} - -@if $enable-dark-mode { - @include color-mode(dark) { - body { - background-color: var(--cui-dark-bg-subtle); - } - - .footer { - --cui-footer-bg: var(--cui-body-bg); - } - } -} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss deleted file mode 100644 index b0f8a52a3..000000000 --- a/src/scss/_variables.scss +++ /dev/null @@ -1,5 +0,0 @@ -// Variable overrides -// -// If you want to customize your project please add your variables below. - -$enable-deprecation-messages: false !default; diff --git a/src/scss/examples.scss b/src/scss/examples.scss index c77925f67..83e43f34e 100644 --- a/src/scss/examples.scss +++ b/src/scss/examples.scss @@ -1,10 +1,9 @@ /* stylelint-disable scss/selector-no-redundant-nesting-selector */ - -$enable-deprecation-messages: false !default; - -@import "@coreui/coreui/scss/functions"; -@import "@coreui/coreui/scss/variables"; -@import "@coreui/coreui/scss/mixins"; +@use "@coreui/coreui/scss/variables" as * with ( + $enable-deprecation-messages: false +); +@use "@coreui/coreui/scss/mixins/breakpoints" as *; +@use "@coreui/coreui/scss/mixins/color-mode" as *; .example { &:not(:first-child) { @@ -108,4 +107,10 @@ $enable-deprecation-messages: false !default; } } } -} \ No newline at end of file +} + +@include color-mode(dark) { + .example .tab-content { + background-color: var(--#{$prefix}secondary-bg); + } +} diff --git a/src/scss/style.scss b/src/scss/style.scss index 4fbc82356..6b8f2b2e5 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -1,15 +1,67 @@ -// If you want to override variables do it here -@import "variables"; +@use "@coreui/coreui/scss/coreui" as * with ( + $enable-deprecation-messages: false, +); +@use "@coreui/chartjs/scss/coreui-chartjs"; +@use "vendors/simplebar"; -// Import styles -@import "@coreui/coreui/scss/coreui"; -@import "@coreui/chartjs/scss/coreui-chartjs"; +body { + background-color: var(--cui-tertiary-bg); +} -// Vendors -@import "vendors/simplebar"; +.wrapper { + width: 100%; + padding-inline: var(--cui-sidebar-occupy-start, 0) var(--cui-sidebar-occupy-end, 0); + will-change: auto; + @include transition(padding .15s); +} -// Custom styles for this theme -@import "theme"; +.header > .container-fluid, +.sidebar-header { + min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list +} -// If you want to add custom CSS you can put it here -@import "custom"; +.sidebar-brand-full { + margin-left: 3px; +} + +.sidebar-header { + .nav-underline-border { + --cui-nav-underline-border-link-padding-x: 1rem; + --cui-nav-underline-border-gap: 0; + } + + .nav-link { + display: flex; + align-items: center; + min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list + } +} + +.sidebar-toggler { + margin-inline-start: auto; +} + +.sidebar-narrow, +.sidebar-narrow-unfoldable:not(:hover) { + .sidebar-toggler { + margin-inline-end: auto; + } +} + +.header > .container-fluid + .container-fluid { + min-height: 3rem; +} + +.footer { + min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list +} + +@include color-mode(dark) { + body { + background-color: var(--cui-dark-bg-subtle); + } + + .footer { + --cui-footer-bg: var(--cui-body-bg); + } +} diff --git a/vite.config.mjs b/vite.config.mjs index ada856d4d..f0b45c375 100644 --- a/vite.config.mjs +++ b/vite.config.mjs @@ -15,12 +15,6 @@ export default defineConfig(() => { autoprefixer({}), // add options if needed ], }, - preprocessorOptions: { - scss: { - quietDeps: true, - silenceDeprecations: ['import', 'legacy-js-api'], - }, - }, }, esbuild: { loader: 'jsx', From 1064cbb56dd3777e2e911e82a81c1644a6cb9539 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 14 Feb 2025 14:16:50 +0100 Subject: [PATCH 2/2] release: v5.4.0 --- index.html | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 84b9a228b..9613ef3ee 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@