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

Migrate to dart-sass #5216

Merged
merged 6 commits into from
Apr 4, 2022
Merged

Migrate to dart-sass #5216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
98b6b51
migrate to dart-sass
pgoldberg Apr 1, 2022
2974da5
run sass-migrator division
pgoldberg Apr 1, 2022
582db25
Merge remote-tracking branch 'origin/develop' into pgoldberg/runSassD…
adidahiya Apr 1, 2022
9a0692e
fix lint introduced by semantic merge conflicts
adidahiya Apr 1, 2022
e989607
fix @use syntax
adidahiya Apr 1, 2022
9561284
fix compound extensions
pgoldberg Apr 3, 2022
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
3 changes: 3 additions & 0 deletions .stylelintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@
100,
{ "ignore": ["comments"] }
],
"no-invalid-position-at-import-rule": [true, {
"ignoreAtRules": ["use"]
}],
"selector-max-universal": 1
}
}
4 changes: 2 additions & 2 deletions packages/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
"compile:esm": "tsc -p ./src",
"compile:cjs": "tsc -p ./src -m commonjs --outDir lib/cjs",
"compile:esnext": "tsc -p ./src -t esnext --outDir lib/esnext",
"compile:css": "sass-compile ./src --functions ./scripts/sass-custom-functions.js",
"compile:css": "sass-compile --functions ./scripts/sass-custom-functions.js ./src",
"dev": "run-p \"compile:esm -- --watch\" \"compile:css -- --watch\"",
"dist": "run-s \"dist:*\"",
"dist:bundle": "cross-env NODE_ENV=production webpack",
Expand Down Expand Up @@ -67,14 +67,14 @@
"@blueprintjs/node-build-scripts": "^2.0.1",
"@blueprintjs/test-commons": "^1.0.1",
"@testing-library/react": "^11.2.5",
"@vgrid/sass-inline-svg": "^1.0.1",
"enzyme": "^3.11.0",
"karma": "^6.3.17",
"mocha": "^9.2.2",
"npm-run-all": "^4.1.5",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-test-renderer": "^16.14.0",
"sass-inline-svg": "^1.2.3",
"typescript": "~4.6.2",
"webpack-cli": "^3.3.12"
},
Expand Down
6 changes: 3 additions & 3 deletions packages/core/scripts/sass-custom-functions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
* limitations under the License.
*/

const inliner = require("sass-inline-svg");
const inliner = require("@vgrid/sass-inline-svg");

module.exports = {
/**
Expand All @@ -23,10 +23,10 @@ module.exports = {
* Usage:
* svg-icon("16px/icon-name.svg", (path: (fill: $color)) )
*/
"svg-icon": inliner("../../resources/icons", {
"svg-icon($path, $selectors: null)": inliner("../../resources/icons", {
// run through SVGO first
optimize: true,
// minimal "uri" encoding is smaller than base64
encodingFormat: "uri"
encodingFormat: "uri",
}),
};
6 changes: 3 additions & 3 deletions packages/core/src/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -339,7 +339,7 @@ Styleguide preformatted
vertical-align: middle;

#{$icon-classes} {
margin-right: $pt-grid-size / 2;
margin-right: $pt-grid-size * 0.5;
}

.#{$ns}-dark & {
Expand Down Expand Up @@ -408,13 +408,13 @@ Styleguide lists
padding-left: $pt-grid-size * 3;

li:not(:last-child) {
margin-bottom: $pt-grid-size / 2;
margin-bottom: $pt-grid-size * 0.5;
}

// nested lists
ol,
ul {
margin-top: $pt-grid-size / 2;
margin-top: $pt-grid-size * 0.5;
}
}

Expand Down
5 changes: 3 additions & 2 deletions packages/core/src/common/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@use "sass:math";
@import "~@blueprintjs/colors/lib/scss/colors";
@import "flex";

Expand Down Expand Up @@ -91,15 +92,15 @@ $pt-dark-intent-text-colors: (
// default line-height is that of base typography, 18px assuming 14px font-size.

@function centered-text($height, $line-height: floor($pt-font-size * $pt-line-height)) {
@return floor(($height - $line-height) / 2);
@return floor(($height - $line-height) * 0.5);
}

// Removes the unit from a Sass numeric value (if present): `strip-unit(12px) => 12`
// @see https://css-tricks.com/snippets/sass/strip-unit-function/

@function strip-unit($number) {
@if type-of($number) == "number" and not unitless($number) {
@return $number / ($number * 0 + 1);
@return math.div($number, $number * 0 + 1);
}

@return $number;
Expand Down
5 changes: 3 additions & 2 deletions packages/core/src/common/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@use "sass:math";
@import "color-aliases";
@import "mixins";

Expand Down Expand Up @@ -44,11 +45,11 @@ $pt-font-size-large: $pt-grid-size * 1.6 !default;
$pt-font-size-small: $pt-grid-size * 1.2 !default;

// a little bit extra to ensure the height comes out to just over 18px (and browser rounds to 18px)
$pt-line-height: ($pt-grid-size * 1.8) / $pt-font-size + 0.0001 !default;
$pt-line-height: math.div($pt-grid-size * 1.8, $pt-font-size) + 0.0001 !default;

// Grids & dimensions

$pt-border-radius: floor($pt-grid-size / 3) !default;
$pt-border-radius: floor(math.div($pt-grid-size, 3)) !default;

// Buttons
$pt-button-height: $pt-grid-size * 3 !default;
Expand Down
6 changes: 3 additions & 3 deletions packages/core/src/components/breadcrumbs/_breadcrumbs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ Styleguide breadcrumbs
content: "";
display: block;
height: $pt-icon-size-standard;
margin: 0 ($pt-grid-size / 2);
margin: 0 ($pt-grid-size * 0.5);
width: $pt-icon-size-standard;
}

Expand Down Expand Up @@ -74,7 +74,7 @@ Styleguide breadcrumbs
}

.#{$ns}-icon {
margin-right: $pt-grid-size / 2;
margin-right: $pt-grid-size * 0.5;
}
}

Expand All @@ -95,7 +95,7 @@ Styleguide breadcrumbs
border-radius: $pt-border-radius;
cursor: pointer;
margin-right: 2px;
padding: 1px ($pt-grid-size / 2);
padding: 1px ($pt-grid-size * 0.5);
vertical-align: text-bottom;

&::before {
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/button/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ Styleguide button
// if loading, then it contains exactly [spinner, icon]
.#{$ns}-spinner + .#{$ns}-icon:last-child {
// center icon horizontally. this works for large buttons too.
margin: 0 (-($pt-button-height - $pt-icon-size-standard) / 2);
margin: 0 (-($pt-button-height - $pt-icon-size-standard) * 0.5);
}

// dark theme
Expand Down
10 changes: 5 additions & 5 deletions packages/core/src/components/button/_common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@
@import "../progress-bar/common";

$button-border-width: 1px !default;
$button-padding: ($pt-grid-size / 2) $pt-grid-size !default;
$button-padding: ($pt-grid-size * 0.5) $pt-grid-size !default;
$button-padding-small: 0 ($pt-grid-size * 0.7) !default;
$button-padding-large: ($pt-grid-size / 2) ($pt-grid-size * 1.5) !default;
$button-icon-spacing: ($pt-button-height - $pt-icon-size-standard) / 2 !default;
$button-icon-spacing-large: ($pt-button-height-large - $pt-icon-size-large) / 2 !default;
$button-padding-large: ($pt-grid-size * 0.5) ($pt-grid-size * 1.5) !default;
$button-icon-spacing: ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
$button-icon-spacing-large: ($pt-button-height-large - $pt-icon-size-large) * 0.5 !default;

/*
CSS `border` property issues:
Expand Down Expand Up @@ -442,7 +442,7 @@ $button-intents: (
$divider-height: $pt-grid-size * 2;
background: $pt-divider-black;

margin: ($pt-button-height - $divider-height) / 2;
margin: ($pt-button-height - $divider-height) * 0.5;
width: $minimal-button-divider-width;

.#{$ns}-dark & {
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/callout/_callout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ Styleguide callout

.#{$ns}-heading {
line-height: $pt-icon-size-large;
margin-bottom: $pt-grid-size / 2;
margin-bottom: $pt-grid-size * 0.5;
margin-top: 0;

&:last-child {
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/dialog/_dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,14 +94,14 @@ $dialog-padding: $pt-grid-size * 2 !default;
flex: 0 0 auto;
min-height: $pt-icon-size-large + $dialog-padding;
padding-left: $dialog-padding;
padding-right: $dialog-padding / 4;
padding-right: $dialog-padding * 0.25;
z-index: 0;

.#{$ns}-icon-large,
.#{$ns}-icon {
color: $pt-icon-color;
flex: 0 0 auto;
margin-right: $dialog-padding / 2;
margin-right: $dialog-padding * 0.5;
}

.#{$ns}-heading {
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/divider/_divider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

@import "../../common/variables";

$divider-margin: $pt-grid-size / 2 !default;
$divider-margin: $pt-grid-size * 0.5 !default;

.#{$ns}-divider {
border-bottom: 1px solid $pt-divider-black;
Expand Down
6 changes: 3 additions & 3 deletions packages/core/src/components/drawer/_drawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,15 +133,15 @@ $dark-drawer-background-color: $dark-gray4 !default;
display: flex;
flex: 0 0 auto;
min-height: $pt-icon-size-large + $drawer-padding;
padding: $drawer-padding / 4;
padding: $drawer-padding * 0.25;
padding-left: $drawer-padding;
position: relative;

.#{$ns}-icon-large,
.#{$ns}-icon {
color: $pt-icon-color;
flex: 0 0 auto;
margin-right: $drawer-padding / 2;
margin-right: $drawer-padding * 0.5;
}

.#{$ns}-heading {
Expand Down Expand Up @@ -174,7 +174,7 @@ $dark-drawer-background-color: $dark-gray4 !default;
.#{$ns}-drawer-footer {
box-shadow: inset 0 1px 0 $pt-divider-black;
flex: 0 0 auto;
padding: $drawer-padding/2 $drawer-padding;
padding: $drawer-padding*0.5 $drawer-padding;
position: relative;

.#{$ns}-dark & {
Expand Down
5 changes: 3 additions & 2 deletions packages/core/src/components/forms/_controls.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@use "sass:math";
@import "../../common/mixins";
@import "../../common/variables";
@import "../button/common";
Expand Down Expand Up @@ -391,7 +392,7 @@ $control-indicator-spacing: $pt-grid-size !default;
$switch-checked-indicator-background-color-disabled
);
// convert em variable to px value
@include indicator-position($switch-width / 1em * $control-indicator-size);
@include indicator-position(math.div($switch-width, 1em) * $control-indicator-size);

.#{$ns}-control-indicator {
border: none;
Expand Down Expand Up @@ -422,7 +423,7 @@ $control-indicator-spacing: $pt-grid-size !default;
}

&.#{$ns}-large {
@include indicator-position($switch-width / 1em * $control-indicator-size-large);
@include indicator-position(math.div($switch-width, 1em) * $control-indicator-size-large);
}

.#{$ns}-dark & {
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/forms/_file-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ Styleguide file-input

$file-input-button-width: $pt-grid-size * 7 !default;
$file-input-button-width-large: $pt-grid-size * 8.5 !default;
$file-input-button-padding: ($pt-input-height - $pt-button-height-small) / 2 !default;
$file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) / 2 !default;
$file-input-button-padding: ($pt-input-height - $pt-button-height-small) * 0.5 !default;
$file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) * 0.5 !default;

.#{$ns}-file-input {
cursor: pointer;
Expand Down
8 changes: 4 additions & 4 deletions packages/core/src/components/forms/_form-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,11 @@ Styleguide form-group
margin: 0 0 ($pt-grid-size * 1.5);

label.#{$ns}-label {
margin-bottom: $pt-grid-size / 2;
margin-bottom: $pt-grid-size * 0.5;
}

.#{$ns}-control {
margin-top: ($pt-input-height - $control-indicator-size) / 2;
margin-top: ($pt-input-height - $control-indicator-size) * 0.5;
}

.#{$ns}-form-group-sub-label,
Expand All @@ -52,11 +52,11 @@ Styleguide form-group
}

.#{$ns}-form-group-sub-label {
margin-bottom: $pt-grid-size / 2;
margin-bottom: $pt-grid-size * 0.5;
}

.#{$ns}-form-helper-text {
margin-top: $pt-grid-size / 2;
margin-top: $pt-grid-size * 0.5;
}

/* stylelint-disable-next-line order/declaration-block-order */
Expand Down
16 changes: 8 additions & 8 deletions packages/core/src/components/forms/_input-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ $input-button-height-small: $pt-button-height-smaller !default;

.#{$ns}-button {
@include pt-button-height($input-button-height);
margin: ($pt-input-height - $input-button-height) / 2;
margin: ($pt-input-height - $input-button-height) * 0.5;
padding: $button-padding-small;

// icons CSS API support
Expand Down Expand Up @@ -105,11 +105,11 @@ $input-button-height-small: $pt-button-height-smaller !default;
> .#{$ns}-input-left-container > .#{$ns}-icon,
> .#{$ns}-icon,
.#{$ns}-input-action > .#{$ns}-spinner {
margin: ($pt-input-height - $pt-icon-size-standard) / 2;
margin: ($pt-input-height - $pt-icon-size-standard) * 0.5;
}

.#{$ns}-tag {
margin: $pt-grid-size / 2;
margin: $pt-grid-size * 0.5;
}

// all buttons go gray in default state and assume their native colors only when hovered
Expand Down Expand Up @@ -154,13 +154,13 @@ $input-button-height-small: $pt-button-height-smaller !default;
&.#{$ns}-large {
.#{$ns}-button {
@include pt-button-height($input-button-height-large);
margin: ($pt-input-height-large - $input-button-height-large) / 2;
margin: ($pt-input-height-large - $input-button-height-large) * 0.5;
}

> .#{$ns}-input-left-container > .#{$ns}-icon,
> .#{$ns}-icon,
.#{$ns}-input-action > .#{$ns}-spinner {
margin: ($pt-input-height-large - $pt-icon-size-standard) / 2;
margin: ($pt-input-height-large - $pt-icon-size-standard) * 0.5;
}

.#{$ns}-input {
Expand All @@ -179,18 +179,18 @@ $input-button-height-small: $pt-button-height-smaller !default;
&.#{$ns}-small {
.#{$ns}-button {
@include pt-button-height($pt-button-height-smaller);
margin: ($pt-input-height-small - $pt-button-height-smaller) / 2;
margin: ($pt-input-height-small - $pt-button-height-smaller) * 0.5;
}

.#{$ns}-tag {
@include pt-button-height($pt-button-height-smaller);
margin: ($pt-input-height-small - $pt-button-height-smaller) / 2;
margin: ($pt-input-height-small - $pt-button-height-smaller) * 0.5;
}

> .#{$ns}-input-left-container > .#{$ns}-icon,
> .#{$ns}-icon,
.#{$ns}-input-action > .#{$ns}-spinner {
margin: ($pt-input-height-small - $pt-icon-size-standard) / 2;
margin: ($pt-input-height-small - $pt-icon-size-standard) * 0.5;
}

.#{$ns}-input {
Expand Down
Loading