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

Jump to bottom

refactor: Upgrade to tailwind version 3 #3700

Merged
merged 31 commits into from Dec 21, 2021
Merged

refactor: Upgrade to tailwind version 3 #3700

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
00d6ba6
tailwind 3 work
driskull Dec 10, 2021
634fde6
WIP
driskull Dec 10, 2021
9a2a139
cleanup
driskull Dec 13, 2021
cb98925
WIP
driskull Dec 14, 2021
7aca12c
Merge branch 'master' into dris0000/tailwind-3
driskull Dec 14, 2021
b06e2b1
cleanup
driskull Dec 14, 2021
2c33f4f
get things running
driskull Dec 15, 2021
b00d9c6
cleanup
driskull Dec 15, 2021
5852bd6
test compressed to remove comments?
driskull Dec 15, 2021
b480f70
revert
driskull Dec 15, 2021
0d9a369
Merge branch 'master' into dris0000/tailwind-3
driskull Dec 15, 2021
1221063
cssnano test
driskull Dec 15, 2021
c41087b
lite preset
driskull Dec 15, 2021
4078bd8
font size test
driskull Dec 15, 2021
2775f11
revert
driskull Dec 15, 2021
73ce082
fix test
driskull Dec 15, 2021
d25d5b2
bump
driskull Dec 15, 2021
6f93297
Merge branch 'master' into dris0000/tailwind-3
driskull Dec 16, 2021
a078a17
bump and revert changes
driskull Dec 16, 2021
5b2ce32
bump
driskull Dec 17, 2021
eb6737c
revert class name changes.
driskull Dec 20, 2021
d3a7a2c
use "n" instead of "-" for config fontSize values.
driskull Dec 20, 2021
f46cd35
Merge branch 'master' into dris0000/tailwind-3
driskull Dec 20, 2021
f9723d5
fix class
driskull Dec 20, 2021
2d0ed78
remove cssnano
driskull Dec 20, 2021
dc4bdc8
cleanup fraction values.
driskull Dec 20, 2021
b0ab948
cleanup typing config
driskull Dec 21, 2021
5cd165b
Merge branch 'master' into dris0000/tailwind-3
driskull Dec 21, 2021
f955a93
cleanup config
driskull Dec 21, 2021
9ae5641
Merge branch 'master' into dris0000/tailwind-3
driskull Dec 21, 2021
4dab5c2
Merge branch 'master' into dris0000/tailwind-3
driskull Dec 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1,471 changes: 309 additions & 1,162 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Expand Up @@ -19,7 +19,7 @@
"build": "npm run util:copy-icons && stencil build",
"build:watch": "npm run util:copy-icons && stencil build --watch",
"build:watch-dev": "npm run util:copy-icons && stencil build --dev --watch",
"deps:update": "updtr --exclude chalk typescript tailwindcss @types/jest jest jest-cli puppeteer && git add package*.json && git commit -q -m \"build(deps): bump versions\"",
"deps:update": "updtr --exclude chalk typescript @types/jest jest jest-cli puppeteer && git add package*.json && git commit -q -m \"build(deps): bump versions\"",
"docs": "concurrently --kill-others --raw \"npm:util:build-docs && build-storybook --static-dir ./__docs-temp__ --output-dir ./docs\" \"ts-node ./support/cleanOnProcessExit.ts --path ./__docs-temp__\"",
"docs:preview": "concurrently --raw \"npm:util:build-docs && start-storybook --static-dir ./__docs-temp__\" \"ts-node ./support/cleanOnProcessExit.ts --path ./__docs-temp__\"",
"lint": "concurrently npm:lint:*",
Expand Down Expand Up @@ -99,7 +99,7 @@
"@typescript-eslint/eslint-plugin": "5.7.0",
"@typescript-eslint/parser": "5.7.0",
"@whitespace/storybook-addon-html": "5.0.0",
"autoprefixer": "10.3.7",
"autoprefixer": "10.4.0",
"axe-core": "4.3.5",
"babel-loader": "8.2.3",
"chalk": "4.1.2",
Expand Down Expand Up @@ -139,7 +139,7 @@
"storybook-rtl-addon": "0.3.3",
"stylelint": "14.1.0",
"stylelint-config-recommended-scss": "5.0.2",
"tailwindcss": "1.9.6",
"tailwindcss": "3.0.2",
"ts-jest": "27.1.1",
"ts-node": "10.4.0",
"typescript": "4.2.4",
Expand Down
2 changes: 1 addition & 1 deletion src/assets/styles/_spacing.scss
View file
Open in desktop
Expand Up @@ -3,7 +3,7 @@

--calcite-icon-size: 1rem;

--calcite-spacing-eighth: theme("spacing[0.5]");
--calcite-spacing-eighth: config("theme.spacing[0.5]");
driskull marked this conversation as resolved.
Show resolved Hide resolved

--calcite-spacing-quarter: theme("spacing.1");

Expand Down
2 changes: 1 addition & 1 deletion src/components/calcite-action-menu/calcite-action-menu.scss
View file
Open in desktop
Expand Up @@ -33,5 +33,5 @@
}

.menu {
@apply flex-col flex-no-wrap outline-none;
@apply flex-col flex-nowrap outline-none;
Copy link
Member Author

Choose a reason for hiding this comment

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

https://v2.tailwindcss.com/docs/upgrading-to-v2#update-renamed-utility-classes

}
2 changes: 1 addition & 1 deletion src/components/calcite-action-pad/calcite-action-pad.scss
View file
Open in desktop
Expand Up @@ -39,7 +39,7 @@
::slotted(calcite-action-group) {
@apply border-0
p-0;
border-inline-end-width: theme("borderWidth.default");
border-inline-end-width: theme("borderWidth.DEFAULT");
Copy link
Member Author

Choose a reason for hiding this comment

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

https://v2.tailwindcss.com/docs/upgrading-to-v2#update-default-theme-keys-to-default

}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/calcite-block/calcite-block.scss
View file
Open in desktop
Expand Up @@ -42,7 +42,7 @@

.toggle {
@apply flex
flex-no-wrap
flex-nowrap
justify-between
font-inherit
items-center
Expand Down
12 changes: 6 additions & 6 deletions src/components/calcite-button/calcite-button.scss
View file
Open in desktop
Expand Up @@ -507,13 +507,13 @@
:host([appearance="outline"][split-child="primary"]) button,
:host([appearance="clear"][split-child="primary"]) button {
border-inline-end-width: 0;
border-inline-start-width: theme("borderWidth.default");
border-inline-start-width: theme("borderWidth.DEFAULT");
}

:host([appearance="outline"][split-child="secondary"]) button,
:host([appearance="clear"][split-child="secondary"]) button {
border-inline-start-width: 0;
border-inline-end-width: theme("borderWidth.default");
border-inline-end-width: theme("borderWidth.DEFAULT");
}

// transparent
Expand Down Expand Up @@ -665,7 +665,7 @@
// generate fab scales (scenario: 1 icon, ie., should be square)
:host([scale="s"]) button:not(.content--slotted),
:host([scale="s"]) a:not(.content--slotted) {
--calcite-button-padding-x: theme("padding[0.5]");
--calcite-button-padding-x: config("theme.padding[0.5]");
--calcite-button-padding-y: 3px;
@apply text-0h w-6;
min-height: theme("height.6");
Expand All @@ -677,7 +677,7 @@
}
:host([scale="m"]) button:not(.content--slotted),
:host([scale="m"]) a:not(.content--slotted) {
--calcite-button-padding-x: theme("padding[0.5]");
--calcite-button-padding-x: config("theme.padding[0.5]");
--calcite-button-padding-y: 7px;
@apply text-0h w-8;
min-height: theme("height.8");
Expand All @@ -689,15 +689,15 @@
}
:host([scale="l"]) button:not(.content--slotted),
:host([scale="l"]) a:not(.content--slotted) {
--calcite-button-padding-x: theme("padding[0.5]");
--calcite-button-padding-x: config("theme.padding[0.5]");
--calcite-button-padding-y: 9px;
@apply text-0h w-11;
min-height: theme("height.11");
}
// accommodate for transparent buttons not having borders
:host([scale="l"][appearance="transparent"]) button:not(.content--slotted),
:host([scale="l"][appearance="transparent"]) a:not(.content--slotted) {
--calcite-button-padding-y: theme("padding[2.5]");
--calcite-button-padding-y: config("theme.padding[2.5]");
}

// generate fab scales (scenario: 2 icons, ie., should not be square)
Expand Down
2 changes: 1 addition & 1 deletion src/components/calcite-color-picker/calcite-color-picker.scss
View file
Open in desktop
Expand Up @@ -69,7 +69,7 @@ $gap--large: 12px;
}

.control-section {
@apply flex-no-wrap items-baseline;
@apply flex-nowrap items-baseline;

> :nth-child(2) {
margin-inline-start: $gap--large;
Expand Down
2 changes: 1 addition & 1 deletion src/components/calcite-combobox/calcite-combobox.scss
View file
Open in desktop
Expand Up @@ -51,7 +51,7 @@

.wrapper--single {
padding: 0 var(--calcite-combobox-item-spacing-unit-l);
@apply cursor-pointer flex-no-wrap;
@apply cursor-pointer flex-nowrap;
}

.grid-input {
Expand Down
2 changes: 1 addition & 1 deletion src/components/calcite-date-picker-month-header/calcite-date-picker-month-header.scss
View file
Open in desktop
Expand Up @@ -130,7 +130,7 @@
.suffix {
@apply absolute
w-16
whitespace-no-wrap
whitespace-nowrap
text-left
top-0
left-0;
Expand Down
2 changes: 1 addition & 1 deletion src/components/calcite-input-date-picker/calcite-input-date-picker.tsx
View file
Open in desktop
Expand Up @@ -393,7 +393,7 @@ export class CalciteInputDatePicker implements LabelableComponent, FormComponent
<calcite-input
class={{
input: true,
"border-t-color-1": this.layout === "vertical" && this.range
"border-top-color-one": this.layout === "vertical" && this.range
Copy link
Member Author

Choose a reason for hiding this comment

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

In tailwind 3, if a class has the same name as a @appy name, it would get into circular logic. So I needed to rename these classes so they don't clash.

}}
disabled={disabled}
icon="calendar"
Expand Down
2 changes: 1 addition & 1 deletion src/components/calcite-input/calcite-input.scss
View file
Open in desktop
Expand Up @@ -553,7 +553,7 @@ input[type="time"]::-webkit-clear-button {
@apply border-b-0;
}

:host(.border-t-color-1) input {
:host(.border-top-color-one) input {
@apply border-t-color-1;
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/calcite-modal/calcite-modal.scss
View file
Open in desktop
Expand Up @@ -109,7 +109,7 @@
cursor-pointer
bg-transparent
focus-base;
border-start-end-radius: theme("borderRadius.default");
border-start-end-radius: theme("borderRadius.DEFAULT");
padding: var(--calcite-modal-padding);
flex: 0 0 auto;
transition: all 0.15s ease-in-out;
Expand Down
6 changes: 3 additions & 3 deletions src/components/calcite-notice/calcite-notice.scss
View file
Open in desktop
Expand Up @@ -54,15 +54,15 @@
}

:host([width="auto"]) {
--calcite-notice-width: theme("width[auto]");
--calcite-notice-width: theme("width.auto");
}

:host([width="half"]) {
--calcite-notice-width: theme("width[1/2]");
--calcite-notice-width: theme("width.1/2");
}

:host([width="full"]) {
--calcite-notice-width: theme("width[full]");
--calcite-notice-width: theme("width.full");
}

:host {
Expand Down
8 changes: 4 additions & 4 deletions src/components/calcite-panel/calcite-panel.scss
View file
Open in desktop
Expand Up @@ -97,7 +97,7 @@
@apply p-0
block
overflow-hidden
whitespace-no-wrap
whitespace-nowrap
w-full;
text-overflow: ellipsis;
}
Expand All @@ -116,14 +116,14 @@
@apply border-color-3
border-solid
border-0;
border-inline-end-width: theme("borderWidth.default");
border-inline-end-width: theme("borderWidth.DEFAULT");
}

.header-actions {
@apply flex
items-stretch
flex-row
flex-no-wrap;
flex-nowrap;
}

.header-actions--end,
Expand Down Expand Up @@ -155,7 +155,7 @@
bg-background
flex
flex-auto
flex-no-wrap
flex-nowrap
flex-col;
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/calcite-pick-list-item/calcite-pick-list-item.scss
View file
Open in desktop
Expand Up @@ -79,7 +79,7 @@
text--2-wrap
word-break
flex-col
flex-no-wrap;
flex-nowrap;
}

.title {
Expand Down
2 changes: 1 addition & 1 deletion src/components/calcite-pick-list/calcite-pick-list.scss
View file
Open in desktop
Expand Up @@ -21,7 +21,7 @@
justify-end
items-stretch
mb-1;
&.sticky {
&.sticky-pos {
Copy link
Member Author

Choose a reason for hiding this comment

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

tailwindlabs/tailwindcss#6386 (comment)

Copy link
Member

Choose a reason for hiding this comment

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

Looks like we need to make sure our classes never match tailwind utils. We could look into creating a stylelint rule or similar to prevent circular dependencies.

@apply sticky top-0;
z-index: 1;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/calcite-pick-list/resources.ts
View file
Open in desktop
@@ -1,5 +1,5 @@
export const CSS = {
sticky: "sticky"
sticky: "sticky-pos"
Copy link
Member Author

@driskull driskull Dec 15, 2021 •
edited

Choose a reason for hiding this comment

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

In tailwind 3, if a class has the same name as a @apply name, it would get into circular logic. So I needed to rename these classes so they don't clash.

};

export enum ICON_TYPES {
Expand Down
4 changes: 2 additions & 2 deletions src/components/calcite-popover/calcite-popover.scss
View file
Open in desktop
Expand Up @@ -52,7 +52,7 @@
relative
flex
overflow-hidden
flex-no-wrap
flex-nowrap
flex-row
h-full
text-color-1
Expand All @@ -65,7 +65,7 @@
.content {
@apply flex
flex-col
flex-no-wrap
flex-nowrap
self-center
overflow-hidden
h-full
Expand Down
2 changes: 1 addition & 1 deletion src/components/calcite-select/calcite-select.scss
View file
Open in desktop
Expand Up @@ -104,7 +104,7 @@ select:disabled {
absolute
inset-y-0;
inset-inline-end: theme("inset.0");
border-inline-width: theme("borderWidth.0") theme("borderWidth.default");
border-inline-width: theme("borderWidth.0") theme("borderWidth.DEFAULT");
}

.select:focus ~ .icon-container {
Expand Down
6 changes: 3 additions & 3 deletions src/components/calcite-shell-center-row/calcite-shell-center-row.scss
View file
Open in desktop
Expand Up @@ -36,7 +36,7 @@
}

:host([height-scale="s"]) {
height: theme("width[1/3]");
height: theme("width.1/3");
}

:host([height-scale="m"]) {
Expand All @@ -57,9 +57,9 @@

::slotted(calcite-action-bar) {
@apply border-solid border-color-3;
border-inline-end-width: theme("borderWidth.default");
border-inline-end-width: theme("borderWidth.DEFAULT");
}
::slotted(calcite-action-bar[position="end"]) {
@apply border-solid border-color-3;
border-inline-width: theme("borderWidth.0") theme("borderWidth.default");
border-inline-width: theme("borderWidth.0") theme("borderWidth.DEFAULT");
}
4 changes: 2 additions & 2 deletions src/components/calcite-shell-panel/calcite-shell-panel.scss
View file
Open in desktop
Expand Up @@ -79,7 +79,7 @@
p-0
pointer-events-auto
flex-col
flex-no-wrap;
flex-nowrap;

width: var(--calcite-shell-panel-width);
max-width: var(--calcite-shell-panel-max-width);
Expand All @@ -91,7 +91,7 @@
@apply flex
flex-col
flex-initial
flex-no-wrap
flex-nowrap
items-stretch;
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/calcite-shell/calcite-shell.scss
View file
Open in desktop
Expand Up @@ -36,7 +36,7 @@
.content {
@apply flex
flex-col
flex-no-wrap
flex-nowrap
h-full
overflow-auto
w-full;
Expand Down
4 changes: 2 additions & 2 deletions src/components/calcite-slider/calcite-slider.scss
View file
Open in desktop
Expand Up @@ -253,7 +253,7 @@
border-color: var(--calcite-ui-foreground-1);
top: -2px;
pointer-events: none;
margin-inline-start: calc(-1 * theme("margin[0.5]"));
margin-inline-start: calc(-1 * config("theme.margin[0.5]"));
}

.tick--active {
Expand Down Expand Up @@ -291,7 +291,7 @@
:host([label-ticks][ticks]) {
.container {
// match tick__label top margin + font-size
padding-bottom: calc(theme("margin[3.5]") + var(--calcite-slider-container-font-size));
padding-bottom: calc(config("theme.margin[3.5]") + var(--calcite-slider-container-font-size));
}
}
:host([has-histogram]) {
Expand Down
1 change: 0 additions & 1 deletion src/components/calcite-tab-nav/calcite-tab-nav.scss
View file
Open in desktop
Expand Up @@ -19,7 +19,6 @@
w-full
overflow-auto
justify-start
scrolling-touch
Copy link
Member Author

Choose a reason for hiding this comment

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

https://v2.tailwindcss.com/docs/upgrading-to-v2#the-scrolling-touch-and-scrolling-auto-utilities-have-been-removed

p-1
-m-1;
}
Expand Down
3 changes: 1 addition & 2 deletions src/components/calcite-tip-manager/calcite-tip-manager.scss
View file
Open in desktop
Expand Up @@ -56,8 +56,7 @@
}

.tip-container {
@apply mt-0
Copy link
Member Author

Choose a reason for hiding this comment

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

removed mt-0 because mt-px; was already setting the margin.

overflow-auto
@apply overflow-auto
flex
justify-center
items-start
Expand Down
2 changes: 1 addition & 1 deletion src/components/calcite-tip/calcite-tip.scss
View file
Open in desktop
Expand Up @@ -68,7 +68,7 @@
}

.image-frame {
width: theme("width.[1/4");
Copy link
Member Author

Choose a reason for hiding this comment

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

This one was missing a closing bracket. I'm not sure it was failing but maybe we can use some linting here.

width: theme("width.1/4");
img {
@apply max-w-full;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/calcite-value-list-item/calcite-value-list-item.scss
View file
Open in desktop
Expand Up @@ -21,7 +21,7 @@ calcite-pick-list-item {

:host([active]),
:host([selected]) {
@apply shadow-outline-active;
@apply ring;
Copy link
Member Author

Choose a reason for hiding this comment

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

https://v2.tailwindcss.com/docs/upgrading-to-v2#replace-shadow-outline-and-shadow-xs-with-ring-utilities

}

.handle {
Expand Down
2 changes: 1 addition & 1 deletion src/components/calcite-value-list/calcite-value-list.scss
View file
Open in desktop
Expand Up @@ -24,7 +24,7 @@ calcite-value-list-item:last-of-type {
justify-end
items-center
mb-1;
&.sticky {
&.sticky-pos {
@apply sticky top-0 z-10;
}
@apply shadow-border-bottom;
Expand Down