Skip to content

Commit

Permalink
Migrate to dart-sass (#5216)
Browse files Browse the repository at this point in the history 
Co-authored-by: Adi Dahiya <adahiya@palantir.com>
  • Loading branch information
@pgoldberg @adidahiya
pgoldberg and adidahiya authored Apr 4, 2022
1 parent 49ee177 commit 8f25ff1
Show file tree
Hide file tree
Showing 60 changed files with 465 additions and 574 deletions.
3 changes: 3 additions & 0 deletions .stylelintrc
View file
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
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": "^3.0.0",
"@blueprintjs/test-commons": "^1.0.2",
"@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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

1 comment on commit 8f25ff1

@blueprint-bot
Copy link

Choose a reason for hiding this comment

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

Migrate to dart-sass (#5216)

Previews: documentation | landing | table | demo

Please sign in to comment.