Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch from @import to @use #7157

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
+1,025 −748
Open

Switch from @import to @use #7157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
07bd330
Switch from @import to @use
justinbhopper Jan 13, 2025
0783b61
Remove border-shadow fn usage in _variables.scss
justinbhopper Jan 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .stylelintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"color-function-notation": "legacy",
"declaration-empty-line-before": null,
"no-invalid-position-at-import-rule": [true, {
"ignoreAtRules": ["use"]
"ignoreAtRules": ["use", "forward"]
}],
"scss/media-feature-value-dollar-variable": null,
"selector-max-universal": 1
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/_dark-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// Copyright 2021 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.
@use "common/variables" as *;

.#{$ns}-dark {
// this tells the browser to use a dark theme UI, which is most useful for enabling
Expand Down
5 changes: 3 additions & 2 deletions packages/core/src/_reset.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "common/variables";
@import "common/mixins";
@use "common/variables" as *;
@use "common/color-aliases" as *;
@use "common/mixins" as *;

// Apply a natural box layout model to all elements, but allow components to change as necessary
html {
Expand Down
13 changes: 8 additions & 5 deletions packages/core/src/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "common/variables";
@import "common/variables-extended";
@import "common/mixins";
@import "common/typography-colors";
@import "components/icon/icon";
@use "@blueprintjs/colors/lib/scss/colors" as *;
@use "common/variables" as *;
@use "common/variables-extended" as *;
@use "common/color-aliases" as *;
@use "common/mixins" as *;
@use "common/typography-colors" as *;
@use "components/icon/icon" as *;
@use "components/html-table/html-table" as *;
@include pt-typography-colors();

/*
Expand Down
2 changes: 2 additions & 0 deletions packages/core/src/accessibility/_focus-states.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.
@use "../common/variables" as *;
@use "../common/mixins" as *;

:focus {
@include focus-outline();
Expand Down
15 changes: 5 additions & 10 deletions packages/core/src/blueprint.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,8 @@ Licensed under the Apache License, Version 2.0.
*/

// Import files in the same order that they are documented in the docs
@import "@blueprintjs/colors/lib/scss/colors";
@import "common/variables";
@import "common/variables-extended";
@import "common/mixins";

@import "reset";
@import "typography";
@import "accessibility/focus-states";
@import "dark-theme";
@import "components/index";
@forward "reset";
@forward "typography";
@forward "accessibility/focus-states";
@forward "dark-theme";
@forward "components/index";
1 change: 1 addition & 0 deletions packages/core/src/common/_color-aliases.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
// - A limited subset of Sass syntax is supported. All syntax inluded here must be able to get parsed by the
// `generate-css-variables` script in @blueprintjs/node-build-scripts. For example, "sass:math" is unsupported.
// ----------------------------------------------------------------------------
@use "@blueprintjs/colors/lib/scss/colors" as *;

$pt-intent-primary: $blue3 !default;
$pt-intent-success: $green3 !default;
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/common/_flex.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// Copyright 2018 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.
@use "variables" as *;

// this element becomes a flex container in the given direction.
// supply `$margin` to put space between each child.
Expand Down
6 changes: 4 additions & 2 deletions packages/core/src/common/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@
// Licensed under the Apache License, Version 2.0.

@use "sass:math";
@import "@blueprintjs/colors/lib/scss/colors";
@import "flex";
@use "@blueprintjs/colors/lib/scss/colors" as *;
@use "color-aliases" as *;
@use "variables" as *;
@use "flex" as *;

$pt-intent-colors: (
"primary": $pt-intent-primary,
Expand Down
2 changes: 2 additions & 0 deletions packages/core/src/common/_react-transition.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@use "variables" as *;

/*
A mixin to generate the classes for a React CSSTransition which animates any number of CSS
properties at once.
Expand Down
8 changes: 5 additions & 3 deletions packages/core/src/common/_typography-colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
// Copyright 2022 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "variables";
@import "variables-extended";
@import "mixins";
@use "@blueprintjs/colors/lib/scss/colors" as *;
@use "variables" as *;
@use "variables-extended" as *;
@use "color-aliases" as *;
@use "mixins" as *;

@mixin pt-typography-colors() {
// N.B. we can't declare any global colors here because this mixin is @included at
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/common/_variables-extended.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Copyright 2022 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "variables";
@use "variables" as *;

// ----------------------------------------------------------------------------
// This file contains additional common variables which we do not want to export in public API via variables.scss,
Expand Down
14 changes: 7 additions & 7 deletions packages/core/src/common/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "color-aliases";
@import "mixins";
Copy link
Contributor

Choose a reason for hiding this comment

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

It looks like updating @import "mixins" here causes the border-shadow mixin to not be available in certain component style files. Particularly, it causes the elevation shadows on Cards and wherever else we use the elevation classes specifically to become malformed.

Before After
before after
Before After
before after

Screenshot 2025-01-27 at 11 42 33

/* `border-shadow` mixin appears in compiled CSS */
.bp5-elevation-4 {
    box-shadow: border-shadow(.1), 0 4px 8px rgba(17, 20, 24, .2), 0 18px 46px 6px rgba(17, 20, 24, .2);
}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@ggdouglas Great catch! Somehow, I missed this function usage.

In order to solve this, I had to remove the usage of border-shadow in _variables.css. This is because we can't import a reference to _mixins.scss in this file without creating a circular dependency loop. Since border-shadow is pretty straight forward, I figured it would be fine.

I triple-checked all the other functions and I feel pretty confident this was the only thing I missed. Famous last words? 🤣

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah, I had also noticed the circular dependency between _variables.css and _mixins.scss. Substituting the mixin seems like a reasonable change to me. 👍

@use "@blueprintjs/colors/lib/scss/colors" as *;
@use "color-aliases" as *;

// ----------------------------------------------------------------------------
// This file is part of the public Sass API of @blueprintjs/core.
Expand Down Expand Up @@ -93,18 +93,18 @@ $pt-dark-drop-shadow-opacity: $pt-drop-shadow-opacity * 2 !default;
// Elevations
$pt-elevation-shadow-0: 0 0 0 1px $pt-divider-black !default;
$pt-elevation-shadow-1:
border-shadow($pt-border-shadow-opacity),
0 0 0 1px rgba($black, $pt-border-shadow-opacity),
0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;
$pt-elevation-shadow-2:
border-shadow($pt-border-shadow-opacity),
0 0 0 1px rgba($black, $pt-border-shadow-opacity),
0 1px 1px rgba($black, $pt-drop-shadow-opacity),
0 2px 6px rgba($black, $pt-drop-shadow-opacity) !default;
$pt-elevation-shadow-3:
border-shadow($pt-border-shadow-opacity),
0 0 0 1px rgba($black, $pt-border-shadow-opacity),
0 2px 4px rgba($black, $pt-drop-shadow-opacity),
0 8px 24px rgba($black, $pt-drop-shadow-opacity) !default;
$pt-elevation-shadow-4:
border-shadow($pt-border-shadow-opacity),
0 0 0 1px rgba($black, $pt-border-shadow-opacity),
0 4px 8px rgba($black, $pt-drop-shadow-opacity),
0 18px 46px 6px rgba($black, $pt-drop-shadow-opacity) !default;

Expand Down Expand Up @@ -141,7 +141,7 @@ $pt-popover-box-shadow: $pt-elevation-shadow-3 !default;
$pt-tooltip-box-shadow: $pt-popover-box-shadow !default;
// Equivalent to $pt-dark-elevation-shadow-3, but swaps the outset border for an inset one
$pt-toast-box-shadow:
inset border-shadow(0.2),
inset 0 0 0 1px rgba($black, 0.2),
0 2px 4px rgba($black, $pt-drop-shadow-opacity),
0 8px 24px rgba($black, $pt-drop-shadow-opacity) !default;

Expand Down
92 changes: 46 additions & 46 deletions packages/core/src/components/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,49 @@
// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "alert/alert";
@import "breadcrumbs/breadcrumbs";
@import "button/button";
@import "button/button-group";
@import "callout/callout";
@import "card/card";
@import "card-list/card-list";
@import "collapse/collapse";
@import "context-menu/context-menu";
@import "control-card/control-card";
@import "divider/divider";
@import "dialog/dialog";
@import "dialog/dialog-body";
@import "dialog/dialog-footer";
@import "dialog/multistep-dialog";
@import "drawer/drawer";
@import "editable-text/editable-text";
@import "entity-title/entity-title";
@import "forms/index";
@import "html-select/html-select";
@import "html-table/html-table";
@import "hotkeys/hotkeys";
@import "icon/icon";
@import "menu/menu";
@import "navbar/navbar";
@import "non-ideal-state/non-ideal-state";
@import "overflow-list/overflow-list";
@import "overlay/overlay";
@import "panel-stack/panel-stack";
@import "panel-stack2/panel-stack2";
@import "popover/popover";
@import "portal/portal";
@import "progress-bar/progress-bar";
@import "section/section";
@import "segmented-control/segmented-control";
@import "skeleton/skeleton";
@import "slider/slider";
@import "spinner/spinner";
@import "tabs/tabs";
@import "tag/tag";
@import "tag/compound-tag";
@import "tag-input/tag-input";
@import "tag-input/resizable-input";
@import "toast/toast";
@import "tooltip/tooltip";
@import "tree/tree";
@forward "alert/alert";
@forward "breadcrumbs/breadcrumbs";
@forward "button/button";
@forward "button/button-group";
@forward "callout/callout";
@forward "card/card";
@forward "card-list/card-list";
@forward "collapse/collapse";
@forward "context-menu/context-menu";
@forward "control-card/control-card";
@forward "divider/divider";
@forward "dialog/dialog";
@forward "dialog/dialog-body";
@forward "dialog/dialog-footer";
@forward "dialog/multistep-dialog";
@forward "drawer/drawer";
@forward "editable-text/editable-text";
@forward "entity-title/entity-title";
@forward "forms/index";
@forward "html-select/html-select";
@forward "html-table/html-table";
@forward "hotkeys/hotkeys";
@forward "icon/icon";
@forward "menu/menu";
@forward "navbar/navbar";
@forward "non-ideal-state/non-ideal-state";
@forward "overflow-list/overflow-list";
@forward "overlay/overlay";
@forward "panel-stack/panel-stack";
@forward "panel-stack2/panel-stack2";
@forward "popover/popover";
@forward "portal/portal";
@forward "progress-bar/progress-bar";
@forward "section/section";
@forward "segmented-control/segmented-control";
@forward "skeleton/skeleton";
@forward "slider/slider";
@forward "spinner/spinner";
@forward "tabs/tabs";
@forward "tag/tag";
@forward "tag/compound-tag";
@forward "tag-input/tag-input";
@forward "tag-input/resizable-input";
@forward "toast/toast";
@forward "tooltip/tooltip";
@forward "tree/tree";
2 changes: 1 addition & 1 deletion packages/core/src/components/alert/_alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "../../common/variables";
@use "../../common/variables" as *;

.#{$ns}-alert {
max-width: $pt-grid-size * 40;
Expand Down
6 changes: 4 additions & 2 deletions packages/core/src/components/breadcrumbs/_breadcrumbs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "@blueprintjs/icons/lib/scss/variables";
@import "../../common/variables";
@use "@blueprintjs/colors/lib/scss/colors" as *;
@use "@blueprintjs/icons/lib/scss/variables" as *;
@use "../../common/variables" as *;
@use "../../common/color-aliases" as *;

/*
Breadcrumbs
Expand Down
6 changes: 3 additions & 3 deletions packages/core/src/components/button/_button-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "../../common/variables";
@import "../forms/common";
@import "./common";
@use "../../common/variables" as *;
@use "../forms/common" as *;
@use "./common" as *;

/*
Button groups
Expand Down
10 changes: 7 additions & 3 deletions packages/core/src/components/button/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "../../common/variables";
@import "../../common/variables-extended";
@import "./common";
@use "@blueprintjs/colors/lib/scss/colors" as *;
@use "../../common/color-aliases" as *;
@use "../../common/variables" as *;
@use "../../common/variables-extended" as *;
@use "./common" as *;
@use "../icon/icon-mixins" as *;
@use "../progress-bar/common" as *;

/*
Button
Expand Down
11 changes: 7 additions & 4 deletions packages/core/src/components/button/_common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "../../common/mixins";
@import "../../common/variables";
@import "../../common/variables-extended";
@import "../progress-bar/common";
@use "@blueprintjs/colors/lib/scss/colors" as *;
@use "../../common/color-aliases" as *;
@use "../../common/flex" as *;
@use "../../common/mixins" as *;
@use "../../common/variables" as *;
@use "../../common/variables-extended" as *;
@use "../progress-bar/common" as *;

$button-border-width: 1px !default;
$button-padding: ($pt-grid-size * 0.5) $pt-grid-size !default;
Expand Down
7 changes: 6 additions & 1 deletion packages/core/src/components/callout/_callout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "../../common/variables-extended";
@use "@blueprintjs/colors/lib/scss/colors" as *;
@use "../../common/color-aliases" as *;
@use "../../common/variables" as *;
@use "../../common/variables-extended" as *;
@use "../../common/mixins" as *;
@use "../icon/icon-mixins" as *;

/*
Callout
Expand Down
5 changes: 4 additions & 1 deletion packages/core/src/components/card-list/card-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
// Copyright 2023 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "../card/card-variables";
@use "@blueprintjs/colors/lib/scss/colors" as *;
@use "../../common/color-aliases" as *;
@use "../../common/variables" as *;
@use "../card/card-variables" as *;

.#{$ns}-card-list {
overflow: auto;
Expand Down
5 changes: 4 additions & 1 deletion packages/core/src/components/card/_card-variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
// Copyright 2023 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "../../common/variables-extended";
@use "@blueprintjs/colors/lib/scss/colors" as *;
@use "../../common/color-aliases" as *;
@use "../../common/variables" as *;
@use "../../common/variables-extended" as *;

$card-padding: $pt-grid-size * 2 !default;
$card-padding-compact: $pt-grid-size * 1.5 !default;
Expand Down
5 changes: 4 additions & 1 deletion packages/core/src/components/card/_card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "./card-variables";
@use "@blueprintjs/colors/lib/scss/colors" as *;
@use "../../common/variables" as *;
@use "../../common/variables-extended" as *;
@use "./card-variables" as *;

/*
Cards
Expand Down
Loading