refactor: Upgrade to tailwind version 3 (#3700)

* tailwind 3 work * WIP * cleanup * WIP * cleanup * get things running * cleanup * test compressed to remove comments? * revert * cssnano test * lite preset * font size test * revert * fix test * bump * bump and revert changes * bump * revert class name changes. * use "n" instead of "-" for config fontSize values. * fix class * remove cssnano * cleanup fraction values. * cleanup typing config * cleanup config
Esri · Dec 21, 2021 · e1df5c4 · e1df5c4
1 parent 5d26e8a
commit e1df5c4
Show file tree

Hide file tree

Showing 65 changed files with 483 additions and 1,325 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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:*",
@@ -100,7 +100,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",
@@ -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.7",
     "ts-jest": "27.1.1",
     "ts-node": "10.4.0",
     "typescript": "4.2.4",

diff --git a/src/assets/styles/_header.scss b/src/assets/styles/_header.scss
@@ -4,9 +4,8 @@
     flex
     items-center
     content-between
-    text-color-2;
-
-  fill: theme("textColor.2");
+    text-color-2
+    fill-color-2;
 }
 
 .heading {
@@ -30,5 +29,5 @@ h3.heading {
 }
 h4.heading,
 h5.heading {
-  @apply text--1h;
+  @apply text-n1h;
 }
diff --git a/src/components/calcite-accordion-item/calcite-accordion-item.scss b/src/components/calcite-accordion-item/calcite-accordion-item.scss
@@ -1,6 +1,6 @@
 %icon-position {
   /* icon rotation variables */
-  --calcite-accordion-item-icon-rotation: theme("rotate.-90");
+  --calcite-accordion-item-icon-rotation: calc(theme("rotate.90") * -1);
   --calcite-accordion-item-active-icon-rotation: theme("rotate.0");
   --calcite-accordion-item-icon-rotation-rtl: theme("rotate.90");
   --calcite-accordion-item-active-icon-rotation-rtl: theme("rotate.0");
@@ -25,7 +25,7 @@
   --calcite-accordion-item-icon-rotation: theme("rotate.0");
   --calcite-accordion-item-active-icon-rotation: theme("rotate.180");
   --calcite-accordion-item-icon-rotation-rtl: theme("rotate.0");
-  --calcite-accordion-item-active-icon-rotation-rtl: theme("rotate.-180");
+  --calcite-accordion-item-active-icon-rotation-rtl: calc(theme("rotate.180") * -1);
 }
 
 :host {

diff --git a/src/components/calcite-accordion/calcite-accordion.scss b/src/components/calcite-accordion/calcite-accordion.scss
@@ -3,14 +3,14 @@
   --calcite-accordion-item-spacing-unit: theme("spacing.1");
   --calcite-accordion-icon-margin: theme("spacing.2");
   --calcite-accordion-item-padding: var(--calcite-accordion-item-spacing-unit) theme("spacing.2");
-  @apply text--2h;
+  @apply text-n2h;
 }
 
 :host([scale="m"]) {
   --calcite-accordion-item-spacing-unit: theme("spacing.2");
   --calcite-accordion-icon-margin: theme("spacing.3");
   --calcite-accordion-item-padding: var(--calcite-accordion-item-spacing-unit) theme("spacing.3");
-  @apply text--1h;
+  @apply text-n1h;
 }
 
 :host([scale="l"]) {

diff --git a/src/components/calcite-action-menu/calcite-action-menu.scss b/src/components/calcite-action-menu/calcite-action-menu.scss
@@ -33,5 +33,5 @@
 }
 
 .menu {
-  @apply flex-col flex-no-wrap outline-none;
+  @apply flex-col flex-nowrap outline-none;
 }
diff --git a/src/components/calcite-action-pad/calcite-action-pad.scss b/src/components/calcite-action-pad/calcite-action-pad.scss
@@ -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");
     }
   }
 }

diff --git a/src/components/calcite-action/calcite-action.scss b/src/components/calcite-action/calcite-action.scss
@@ -18,7 +18,7 @@
     justify-start
     m-0
     relative
-    text--2h
+    text-n2h
     font-medium
     text-color-3
     w-auto;
@@ -66,7 +66,7 @@
 
 :host([scale="s"]) {
   .button {
-    @apply font-normal p-2 text--2h;
+    @apply font-normal p-2 text-n2h;
   }
   .button--text-visible .icon-container {
     margin-inline-end: theme("spacing.2");
@@ -75,7 +75,7 @@
 
 :host([scale="m"]) {
   .button {
-    @apply font-normal p-4 text--1h;
+    @apply font-normal p-4 text-n1h;
   }
   .button--text-visible .icon-container {
     margin-inline-end: theme("spacing.3");

diff --git a/src/components/calcite-alert/calcite-alert.scss b/src/components/calcite-alert/calcite-alert.scss
@@ -12,13 +12,13 @@
   --calcite-alert-spacing-token-small: theme("spacing.2");
   --calcite-alert-spacing-token-large: theme("spacing.3");
   @include slotted("title", "*") {
-    @apply text--1-wrap;
+    @apply text-n1-wrap;
   }
   @include slotted("message", "*") {
-    @apply text--2-wrap;
+    @apply text-n2-wrap;
   }
   @include slotted("link", "*") {
-    @apply text--2-wrap;
+    @apply text-n2-wrap;
   }
   .alert-queue-count {
     @apply mx-2;
@@ -40,10 +40,10 @@
     @apply text-0-wrap;
   }
   @include slotted("message", "*") {
-    @apply text--1-wrap;
+    @apply text-n1-wrap;
   }
   @include slotted("link", "*") {
-    @apply text--1-wrap;
+    @apply text-n1-wrap;
   }
   .alert-queue-count {
     @apply mx-3;
@@ -140,7 +140,7 @@
   @apply inline
     m-0
     font-normal
-    text--1-wrap
+    text-n1-wrap
     text-color-2;
   margin-inline-end: theme("margin.2");
 }

diff --git a/src/components/calcite-avatar/calcite-avatar.scss b/src/components/calcite-avatar/calcite-avatar.scss
@@ -3,11 +3,11 @@
 }
 
 :host([scale="s"]) {
-  @apply w-6 h-6 text--3;
+  @apply w-6 h-6 text-n3;
 }
 
 :host([scale="m"]) {
-  @apply w-8 h-8 text--2;
+  @apply w-8 h-8 text-n2;
 }
 
 :host([scale="l"]) {

diff --git a/src/components/calcite-block-section/calcite-block-section.scss b/src/components/calcite-block-section/calcite-block-section.scss
@@ -2,7 +2,7 @@
   @apply box-border
     bg-foreground-1
     text-color-2
-    text--1
+    text-n1
     block;
 }
 
@@ -36,7 +36,7 @@
     px-0
     py-2
     select-none
-    text--1
+    text-n1
     focus-base;
 
   &:focus {

diff --git a/src/components/calcite-block/calcite-block.scss b/src/components/calcite-block/calcite-block.scss
@@ -38,7 +38,7 @@
 
 .toggle {
   @apply flex
-    flex-no-wrap
+    flex-nowrap
     justify-between
     font-inherit
     items-center
@@ -74,7 +74,7 @@ calcite-handle {
 
 .header .title .heading {
   @apply p-0
-    text--1
+    text-n1
     text-color-2
     font-medium
     word-break
@@ -86,7 +86,7 @@ calcite-handle {
 
 .summary {
   @apply p-0
-    text--2
+    text-n2
     text-color-3
     mt-0.5
     word-break;

diff --git a/src/components/calcite-button/calcite-button.scss b/src/components/calcite-button/calcite-button.scss
@@ -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
@@ -623,7 +623,7 @@
 // generate button scales (scenario: text exists)
 :host([scale="s"]) button.content--slotted,
 :host([scale="s"]) a.content--slotted {
-  @apply text--2h;
+  @apply text-n2h;
 }
 // accommodate for transparent buttons not having borders
 :host([scale="s"][appearance="transparent"]) button.content--slotted,
@@ -634,7 +634,7 @@
 :host([scale="m"]) button.content--slotted,
 :host([scale="m"]) a.content--slotted {
   --calcite-button-padding-x: 11px;
-  @apply text--1h;
+  @apply text-n1h;
 }
 :host([scale="m"]:not([appearance="transparent"])) button.content--slotted,
 :host([scale="m"]:not([appearance="transparent"])) a.content--slotted {

diff --git a/src/components/calcite-card/calcite-card.scss b/src/components/calcite-card/calcite-card.scss
@@ -60,7 +60,7 @@
 .card-content {
   @apply p-3
     text-color-3
-    text--2-wrap;
+    text-n2-wrap;
 }
 
 // selectable and selected styles
@@ -77,27 +77,27 @@
   @apply font-medium
     text-color-1
     m-0
-    text--1-wrap;
+    text-n1-wrap;
 }
 
 @include slotted("subtitle", "*") {
   @apply font-normal
     text-color-2
     m-0
     mt-2
-    text--2-wrap;
+    text-n2-wrap;
 }
 
 @include slotted("thumbnail", "img") {
   @apply max-w-full min-w-full;
 }
 
 @include slotted("footer-leading", "*") {
-  @apply self-center text--2-wrap;
+  @apply self-center text-n2-wrap;
   margin-inline-end: auto;
 }
 @include slotted("footer-trailing", "*") {
-  @apply self-center text--2-wrap;
+  @apply self-center text-n2-wrap;
 }
 
 .thumbnail-wrapper {

diff --git a/src/components/calcite-checkbox/calcite-checkbox.scss b/src/components/calcite-checkbox/calcite-checkbox.scss
@@ -10,7 +10,7 @@
   --calcite-checkbox-size: theme("spacing.3");
 }
 :host([scale="m"]) {
-  --calcite-checkbox-size: theme("fontSize.-1");
+  --calcite-checkbox-size: theme("fontSize.n1");
 }
 :host([scale="l"]) {
   --calcite-checkbox-size: theme("spacing.4");

diff --git a/src/components/calcite-chip/calcite-chip.scss b/src/components/calcite-chip/calcite-chip.scss
@@ -1,15 +1,15 @@
 // scale
 // todo update when new spacing modifiers are introduced to calcite-base
 :host([scale="s"]) {
-  @apply h-6 text--2;
+  @apply h-6 text-n2;
   --calcite-chip-spacing-unit-l: theme("spacing.2");
   --calcite-chip-spacing-unit-s: theme("spacing.1");
   .chip-image-container {
     @apply h-5 w-5;
   }
 }
 :host([scale="m"]) {
-  @apply h-8 text--1;
+  @apply h-8 text-n1;
   --calcite-chip-spacing-unit-l: theme("spacing.3");
   --calcite-chip-spacing-unit-s: 6px;
   .chip-image-container {

diff --git a/src/components/calcite-color-picker/calcite-color-picker.scss b/src/components/calcite-color-picker/calcite-color-picker.scss
@@ -5,7 +5,7 @@ $gap--small: 4px;
 $gap--large: 12px;
 
 :host {
-  @apply inline-block text--2h font-normal;
+  @apply inline-block text-n2h font-normal;
 }
 
 :host([scale="s"]) {
@@ -44,7 +44,7 @@ $gap--large: 12px;
 }
 
 :host([scale="l"]) {
-  @apply text--1h;
+  @apply text-n1h;
 
   .container {
     width: 464px;
@@ -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;
@@ -107,7 +107,7 @@ $gap--large: 12px;
 }
 
 .scope {
-  @apply text--1
+  @apply text-n1
     p-0
     mb-0
     mr-0

diff --git a/src/components/calcite-combobox-item-group/calcite-combobox-item-group.scss b/src/components/calcite-combobox-item-group/calcite-combobox-item-group.scss
@@ -1,13 +1,13 @@
 .scale--s {
-  @apply text--2h;
+  @apply text-n2h;
   --calcite-combobox-item-spacing-unit-l: theme("spacing.2");
   --calcite-combobox-item-spacing-unit-s: theme("spacing.1");
   --calcite-combobox-item-spacing-indent-1: theme("spacing.2");
   --calcite-combobox-item-spacing-indent-2: theme("spacing.4");
 }
 
 .scale--m {
-  @apply text--1h;
+  @apply text-n1h;
   --calcite-combobox-item-spacing-unit-l: theme("spacing.3");
   --calcite-combobox-item-spacing-unit-s: theme("spacing.2");
   --calcite-combobox-item-spacing-indent-1: theme("spacing.3");

diff --git a/src/components/calcite-combobox-item/calcite-combobox-item.scss b/src/components/calcite-combobox-item/calcite-combobox-item.scss
@@ -1,12 +1,12 @@
 .scale--s {
-  @apply text--2h;
+  @apply text-n2h;
   --calcite-combobox-item-spacing-unit-l: theme("spacing.2");
   --calcite-combobox-item-spacing-unit-s: theme("spacing.1");
   --calcite-combobox-item-spacing-indent: theme("spacing.2");
 }
 
 .scale--m {
-  @apply text--1h;
+  @apply text-n1h;
   --calcite-combobox-item-spacing-unit-l: theme("spacing.3");
   --calcite-combobox-item-spacing-unit-s: theme("spacing.2");
   --calcite-combobox-item-spacing-indent: theme("spacing.3");