chore(deps): update to [email protected] and switch to @use (#1734)

* chore(deps): update to [email protected] and switch to @use * fix(*): base -> globals
Kong · Oct 23, 2024 · 7fa3784 · 7fa3784
1 parent 104925d
commit 7fa3784
Show file tree

Hide file tree

Showing 53 changed files with 217 additions and 194 deletions.
diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     "postcss-html": "^1.7.0",
     "rimraf": "^6.0.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.79.5",
+    "sass": "^1.80.3",
     "stylelint": "^16.9.0",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-recommended-scss": "^14.1.0",

diff --git a/packages/analytics/analytics-chart/sandbox/pages/BarChartDemo.vue b/packages/analytics/analytics-chart/sandbox/pages/BarChartDemo.vue
@@ -392,7 +392,7 @@ watch(multiDimensionToggle, () => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/charts-sandbox';
+@use "../styles/charts-sandbox";
 
 .chart-container {
   height: 500px;

diff --git a/packages/analytics/analytics-chart/sandbox/pages/ChartDemoSimple.vue b/packages/analytics/analytics-chart/sandbox/pages/ChartDemoSimple.vue
@@ -503,5 +503,5 @@ watch(isGaugeChart, () => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/charts-sandbox';
+@use "../styles/charts-sandbox";
 </style>
diff --git a/packages/analytics/analytics-chart/sandbox/pages/DonutChartDemo.vue b/packages/analytics/analytics-chart/sandbox/pages/DonutChartDemo.vue
@@ -276,5 +276,5 @@ const onMetricSelected = (item: any) => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/charts-sandbox';
+@use "../styles/charts-sandbox";
 </style>
diff --git a/packages/analytics/analytics-chart/sandbox/pages/TimeSeriesChartDemo.vue b/packages/analytics/analytics-chart/sandbox/pages/TimeSeriesChartDemo.vue
@@ -418,5 +418,5 @@ watch(multiDimensionToggle, () => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/charts-sandbox';
+@use "../styles/charts-sandbox";
 </style>
diff --git a/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue b/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
@@ -367,8 +367,8 @@ provide('legendPosition', toRef(props, 'legendPosition'))
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/base';
-@import '../styles/chart-shell';
+@use "../styles/globals" as *;
+@use "../styles/chart-shell";
 
 .analytics-chart-shell {
   height: 100%;

diff --git a/packages/analytics/analytics-chart/src/components/SimpleChart.vue b/packages/analytics/analytics-chart/src/components/SimpleChart.vue
@@ -109,8 +109,8 @@ const hasValidChartData = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/base';
-@import '../styles/chart-shell';
+@use "../styles/globals" as *;
+@use "../styles/chart-shell";
 
 .simple-chart-shell {
   margin: var(--kui-space-0, $kui-space-0);

diff --git a/packages/analytics/analytics-chart/src/components/TopNTable.vue b/packages/analytics/analytics-chart/src/components/TopNTable.vue
@@ -230,7 +230,8 @@ const getValue = (record: AnalyticsExploreRecord): string => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/base';
+@use "../styles/globals" as *;
+
 .kong-ui-public-top-n-table {
   border: none !important;
   height: 100%;

diff --git a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
@@ -232,7 +232,8 @@ const positionToClass = (position: `${ChartLegendPosition}`) => {
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/base';
+@use "../../styles/globals" as *;
+
 .legend-container {
   display: flex;
   margin: $kui-space-30 0 0 0;

diff --git a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartTooltip.vue b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartTooltip.vue
@@ -201,7 +201,7 @@ function handleMouseUp() {
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/base';
+@use "../../styles/globals" as *;
 
 .locked {
   cursor: move;

diff --git a/packages/analytics/analytics-chart/src/components/chart-types/DoughnutChart.vue b/packages/analytics/analytics-chart/src/components/chart-types/DoughnutChart.vue
@@ -171,6 +171,6 @@ const tooltipDimensions = ({ width, height }: { width: number, height: number })
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/base';
-@import '../../styles/chart';
+@use "../../styles/globals" as *;
+@use "../../styles/chart";
 </style>
diff --git a/packages/analytics/analytics-chart/src/components/chart-types/GaugeChart.vue b/packages/analytics/analytics-chart/src/components/chart-types/GaugeChart.vue
@@ -156,8 +156,8 @@ const showMetricSmall = computed(() => props.metricDisplay === ChartMetricDispla
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/base';
-@import '../../styles/chart';
+@use "../../styles/globals" as *;
+@use "../../styles/chart";
 
 .chart-parent {
   height: auto;

diff --git a/packages/analytics/analytics-chart/src/components/chart-types/StackedBarChart.vue b/packages/analytics/analytics-chart/src/components/chart-types/StackedBarChart.vue
@@ -562,8 +562,8 @@ const handleChartClick = () => {
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/base';
-@import '../../styles/chart';
+@use "../../styles/globals" as *;
+@use "../../styles/chart";
 
 .chart-container {
   overflow: auto;

diff --git a/packages/analytics/analytics-chart/src/components/chart-types/TimeSeriesChart.vue b/packages/analytics/analytics-chart/src/components/chart-types/TimeSeriesChart.vue
@@ -284,6 +284,6 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/base';
-@import '../../styles/chart';
+@use "../../styles/globals" as *;
+@use "../../styles/chart";
 </style>
diff --git a/packages/analytics/analytics-chart/src/styles/base.scss b/packages/analytics/analytics-chart/src/styles/base.scss
diff --git a/packages/analytics/analytics-chart/src/styles/chart-shell.scss b/packages/analytics/analytics-chart/src/styles/chart-shell.scss
@@ -1,3 +1,5 @@
+@use "./globals" as *;
+
 // Styles common to both AnalticsChart and SimpleChart
 .analytics-chart-shell,
 .simple-chart-shell {

diff --git a/packages/analytics/analytics-chart/src/styles/chart.scss b/packages/analytics/analytics-chart/src/styles/chart.scss
@@ -1,3 +1,5 @@
+@use "./globals" as *;
+
 $legend-height: $kui-space-110;
 
 .chart-parent {

diff --git a/packages/analytics/analytics-chart/src/styles/globals.scss b/packages/analytics/analytics-chart/src/styles/globals.scss
@@ -0,0 +1,2 @@
+@forward "@kong/design-tokens/tokens/scss/variables";
+@forward "./mixins";
diff --git a/packages/analytics/analytics-chart/src/styles/mixins.scss b/packages/analytics/analytics-chart/src/styles/mixins.scss
@@ -1,3 +1,5 @@
+@use "@kong/design-tokens/tokens/scss/variables" as *;
+
 @mixin scrollbarBase($size: var(--kui-space, 40, $kui-space-40)) {
   -ms-overflow-style: thin;
   scrollbar-color: var(--kui-color-background-disabled, $kui-color-background-disabled) var(--kui-color-background-transparent, $kui-color-background-transparent);

diff --git a/packages/analytics/analytics-metric-provider/src/components/MetricCardContainer.vue b/packages/analytics/analytics-metric-provider/src/components/MetricCardContainer.vue
@@ -130,7 +130,7 @@ const formatCardValues = (card: MetricCardDef): MetricCardDisplayValue => {
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/base";
+@use "../styles/globals" as *;
 
 .kong-ui-public-metric-card-container {
   background-color: var(--kui-color-background-transparent, $kui-color-background-transparent);

diff --git a/.../analytics/analytics-metric-provider/src/components/display/MetricCardLoadingSkeleton.vue b/.../analytics/analytics-metric-provider/src/components/display/MetricCardLoadingSkeleton.vue
@@ -10,7 +10,8 @@
 </template>
 
 <style lang="scss" scoped>
-@import "../../styles/base";
+@use "../../styles/globals" as *;
+
 .loading-tabs {
   display: flex;
   flex-direction: column;

diff --git a/packages/analytics/analytics-metric-provider/src/components/display/MetricsCard.vue b/packages/analytics/analytics-metric-provider/src/components/display/MetricsCard.vue
@@ -216,7 +216,7 @@ const hideTitleIcon = [MetricCardSize.Small].includes(props.cardSize)
 </script>
 
 <style lang="scss">
-@import "../../styles/base";
+@use "../../styles/globals" as *;
 
 .metricscard-tooltip {
   @include pointer-events-all;
@@ -233,7 +233,7 @@ const hideTitleIcon = [MetricCardSize.Small].includes(props.cardSize)
 </style>
 
 <style lang="scss" scoped>
-@import "../../styles/base";
+@use "../../styles/globals" as *;
 
 .metricscard {
   display: flex;

diff --git a/packages/analytics/analytics-metric-provider/src/styles/_mixins.scss b/packages/analytics/analytics-metric-provider/src/styles/_mixins.scss
@@ -1,3 +1,5 @@
+@use "@kong/design-tokens/tokens/scss/variables" as *;
+
 @mixin pointer-events-none {
   pointer-events: none;
 }

diff --git a/packages/analytics/analytics-metric-provider/src/styles/base.scss b/packages/analytics/analytics-metric-provider/src/styles/base.scss
diff --git a/packages/analytics/analytics-metric-provider/src/styles/globals.scss b/packages/analytics/analytics-metric-provider/src/styles/globals.scss
@@ -0,0 +1,2 @@
+@forward "@kong/design-tokens/tokens/scss/variables";
+@forward "./mixins";
diff --git a/packages/analytics/metric-cards/src/components/MetricCardContainer.vue b/packages/analytics/metric-cards/src/components/MetricCardContainer.vue
@@ -130,7 +130,7 @@ const formatCardValues = (card: MetricCardDef): MetricCardDisplayValue => {
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/base";
+@use "../styles/globals" as *;
 
 .kong-ui-public-metric-card-container {
   background-color: var(--kong-ui-metric-card-background, transparent);

diff --git a/packages/analytics/metric-cards/src/components/display/MetricCardLoadingSkeleton.vue b/packages/analytics/metric-cards/src/components/display/MetricCardLoadingSkeleton.vue
@@ -10,7 +10,8 @@
 </template>
 
 <style lang="scss" scoped>
-@import "../../styles/base";
+@use "../../styles/globals" as *;
+
 .loading-tabs {
   display: flex;
   flex-direction: column;

diff --git a/packages/analytics/metric-cards/src/components/display/MetricsCard.vue b/packages/analytics/metric-cards/src/components/display/MetricsCard.vue
@@ -224,7 +224,7 @@ const hideTitleIcon = [MetricCardSize.Small, MetricCardSize.LargeCompact].includ
 </script>
 
 <style lang="scss">
-@import "../../styles/base";
+@use "../../styles/globals" as *;
 
 .metricscard-tooltip {
   @include pointer-events-all;
@@ -241,7 +241,8 @@ const hideTitleIcon = [MetricCardSize.Small, MetricCardSize.LargeCompact].includ
 </style>
 
 <style lang="scss" scoped>
-@import "../../styles/base";
+@use "../../styles/globals" as *;
+
 $row-gap-size: 12px;
 
 .metricscard {

diff --git a/packages/analytics/metric-cards/src/styles/base.scss b/packages/analytics/metric-cards/src/styles/base.scss
diff --git a/packages/analytics/metric-cards/src/styles/globals.scss b/packages/analytics/metric-cards/src/styles/globals.scss
@@ -0,0 +1,2 @@
+@forward "@kong/design-tokens/tokens/scss/variables";
+@forward "./mixins";
diff --git a/packages/core/app-layout/src/components/AppLayout.vue b/packages/core/app-layout/src/components/AppLayout.vue
@@ -292,11 +292,11 @@ onBeforeUnmount(() => {
 // Leave unscoped
 // Importing all styles just for this entry component.
 // Any other component in this package should only import the `_variables.scss` file.
-@import "../styles/app-layout";
+@use "../styles/app-layout";
 </style>
 
 <style lang="scss" scoped>
-@import "../styles/variables";
+@use "../styles/variables" as *;
 
 .kong-ui-app-layout {
   background: $kui-color-background-inverse;

diff --git a/packages/core/app-layout/src/components/errors/AppError.vue b/packages/core/app-layout/src/components/errors/AppError.vue
@@ -18,7 +18,7 @@ import BananaSplit from '../icons/BananaSplit.vue'
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/variables";
+@use "../../styles/variables" as *;
 
 .kong-ui-app-error {
   align-items: center;

diff --git a/packages/core/app-layout/src/components/navbar/AppNavbar.vue b/packages/core/app-layout/src/components/navbar/AppNavbar.vue
@@ -70,7 +70,7 @@ const headerStyles = computed(() => ({
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/variables";
+@use "../../styles/variables" as *;
 
 .kong-ui-app-navbar {
   background: var(--kong-ui-app-navbar-background, $kui-color-background-inverse);

diff --git a/packages/core/app-layout/src/components/sidebar/AppSidebar.vue b/packages/core/app-layout/src/components/sidebar/AppSidebar.vue
@@ -364,7 +364,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/variables";
+@use "../../styles/variables" as *;
 
 .kong-ui-app-sidebar {
   background: $kui-color-background-inverse;
@@ -574,7 +574,7 @@ onBeforeUnmount(() => {
 </style>
 
 <style lang="scss">
-@import "../../styles/variables";
+@use "../../styles/variables" as *;
 
 // Scope with wrapper class intead of using `scoped` so these styles will apply to child components
 .kong-ui-app-sidebar {

diff --git a/packages/core/app-layout/src/components/sidebar/SidebarItem.vue b/packages/core/app-layout/src/components/sidebar/SidebarItem.vue
@@ -139,7 +139,7 @@ const navigate = (event: Event, item: SidebarPrimaryItem | SidebarSecondaryItem,
 </script>
 
 <style lang="scss">
-@import "../../styles/variables";
+@use "../../styles/variables" as *;
 
 // Scope with wrapper class intead of using `scoped` so these styles will apply to child components
 .kong-ui-app-sidebar {
@@ -241,7 +241,7 @@ const navigate = (event: Event, item: SidebarPrimaryItem | SidebarSecondaryItem,
 </style>
 
 <style lang="scss" scoped>
-@import "../../styles/variables";
+@use "../../styles/variables" as *;
 
 // Primary-level nav item
 .sidebar-item-primary {

diff --git a/packages/core/app-layout/src/components/sidebar/SidebarToggle.vue b/packages/core/app-layout/src/components/sidebar/SidebarToggle.vue
@@ -38,7 +38,7 @@ watch(() => props.active, (active) => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/variables";
+@use "../../styles/variables" as *;
 
 .sidebar-menu-toggle {
   border-radius: $kui-border-radius-20;

diff --git a/packages/core/app-layout/src/styles/_base.scss b/packages/core/app-layout/src/styles/_base.scss
@@ -1,3 +1,5 @@
+@use "./variables" as *;
+
 .kong-ui-app-layout-html,
 .kong-ui-app-layout-body,
 .kong-ui-app-sidebar,

diff --git a/packages/core/app-layout/src/styles/_variables.scss b/packages/core/app-layout/src/styles/_variables.scss
@@ -1,2 +1,3 @@
-@import "./variables/app-navbar";
-@import "./variables/app-sidebar";
+@forward "@kong/design-tokens/tokens/scss/variables";
+@forward "./variables/app-navbar";
+@forward "./variables/app-sidebar";
diff --git a/packages/core/app-layout/src/styles/app-layout.scss b/packages/core/app-layout/src/styles/app-layout.scss
@@ -1,2 +1 @@
-@import "./variables";
-@import "./base";
+@use "./base";
diff --git a/packages/core/app-layout/src/styles/variables/_app-navbar.scss b/packages/core/app-layout/src/styles/variables/_app-navbar.scss
@@ -1,3 +1,5 @@
+@use "@kong/design-tokens/tokens/scss/variables" as *;
+
 // AppNavbar
 $navbar-height: 60px;
 $header-item-gap: $kui-space-60;
diff --git a/packages/core/app-layout/src/styles/variables/_app-sidebar.scss b/packages/core/app-layout/src/styles/variables/_app-sidebar.scss
@@ -1,3 +1,5 @@
+@use "@kong/design-tokens/tokens/scss/variables" as *;
+
 $sidebar-width: 240px; // token set here to standardize
 $sidebar-header-spacing: $kui-space-40; // token set here to standardize
 $sidebar-item-font-size: $kui-font-size-30; // token set here to standardize

diff --git a/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue b/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue
@@ -408,7 +408,6 @@ const deleteModalError = ref<string>('')
 const buildDeleteUrl = useDeleteUrlBuilder(props.config, fetcherBaseUrl.value)
 
 const deleteModelEntityType = computed<EntityTypes>(() => {
-  // @ts-ignore
   return EntityTypes[props.config.plugin]
 })
 

diff --git a/packages/entities/entities-routes/src/components/RouteForm.vue b/packages/entities/entities-routes/src/components/RouteForm.vue
@@ -1344,7 +1344,7 @@ defineExpose({ saveFormData, getPayload })
 </style>
 
 <style lang="scss" scoped>
-@import '../styles/mixins';
+@use "../styles/mixins" as *;
 
 .kong-ui-entities-route-form {
   width: 100%;

diff --git a/packages/entities/entities-routes/src/components/RouteFormDestinationsFields.vue b/packages/entities/entities-routes/src/components/RouteFormDestinationsFields.vue
@@ -74,7 +74,7 @@ watch(fieldsValue, (value) => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/mixins';
+@use "../styles/mixins" as *;
 
 .routing-rule {
   @include routing-rule;

diff --git a/packages/entities/entities-routes/src/components/RouteFormHeadersFields.vue b/packages/entities/entities-routes/src/components/RouteFormHeadersFields.vue
@@ -71,7 +71,7 @@ watch(fieldsValue, (value) => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/mixins';
+@use "../styles/mixins" as *;
 
 .routing-rule {
   @include routing-rule;

diff --git a/packages/entities/entities-routes/src/components/RouteFormHostsFields.vue b/packages/entities/entities-routes/src/components/RouteFormHostsFields.vue
@@ -65,7 +65,7 @@ watch(fieldsValue, (value) => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/mixins';
+@use "../styles/mixins" as *;
 
 .routing-rule {
   @include routing-rule;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@forward "@kong/design-tokens/tokens/scss/variables";
		@forward "./mixins";