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

chore(frontend/deps-dev): bump tailwindcss from 3.4.17 to 4.0.0 in /autogpt_platform/frontend #9367

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

chore(frontend/deps-dev): bump tailwindcss from 3.4.17 to 4.0.0 in /autogpt_platform/frontend #9367

wants to merge 2 commits into from
+644 −762

Conversation

ntindle
Copy link
Member

@ntindle ntindle commented Jan 29, 2025 •
edited
Loading

Bumps tailwindcss from 3.4.17 to 4.0.0.

Release notes

Sourced from tailwindcss's releases.

v4.0.0

Holy shit it's actually done — we just tagged Tailwind CSS v4.0.

Tailwind CSS v4.0 is an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.

Start using Tailwind CSS v4.0 today by installing it in a new project, or playing with it directly in the browser on Tailwind Play.

For existing projects, we've published a comprehensive upgrade guide and built an automated upgrade tool to get you on the latest version as quickly and painlessly as possible.

For a deep-dive into everything that's new, check out the announcement post.

v4.0.0-beta.10

Added

  • Add support for using @variant to use variants in your CSS (#15663)
  • Include outline-color when transitioning colors (#15690)

Fixed

  • Add missing main and browser fields for @tailwindcss/browser (#15594)
  • Support escaping * in theme namespace syntax (e.g.: --color-\*: initial;) (#15603)
  • Respect @theme options when resolving values in custom functional utilities (#15623)
  • Discard invalid variants (e.g. data-checked-[selected=1]:*) (#15629)
  • Ensure -outline-offset-* utilities are suggested in IntelliSense (#15646)
  • Write to stdout when --output is set to - or omitted with @tailwindcss/cli (#15656)
  • Prevent not-* from being used with variants that have multiple sibling rules (#15689)
  • Upgrade (experimental): Pretty print --spacing(…) to prevent ambiguity (#15596)

Changed

  • Use more modern --alpha(color / 50%) syntax instead of --alpha(color, 50%) (#15665)

... (truncated)

Changelog

Sourced from tailwindcss's changelog.

[4.0.0] - 2025-01-21

Added

Start using Tailwind CSS v4.0 today by installing it in a new project, or playing with it directly in the browser on Tailwind Play.

For existing projects, we've published a comprehensive upgrade guide and built an automated upgrade tool to get you on the latest version as quickly and painlessly as possible.

For a deep-dive into everything that's new, check out the announcement post.

[4.0.0-beta.10] - 2025-01-21

Added

  • Add support for using @variant to use variants in your CSS (#15663)
  • Include outline-color when transitioning colors (#15690)

Fixed

  • Add missing main and browser fields for @tailwindcss/browser (#15594)
  • Support escaping * in theme namespace syntax (e.g.: --color-\*: initial;) (#15603)
  • Respect @theme options when resolving values in custom functional utilities (#15623)
  • Discard invalid variants (e.g. data-checked-[selected=1]:*) (#15629)
  • Ensure -outline-offset-* utilities are suggested in IntelliSense (#15646)
  • Write to stdout when --output is set to - or omitted with @tailwindcss/cli (#15656)
  • Prevent not-* from being used with variants that have multiple sibling rules (#15689)
  • Upgrade (experimental): Pretty print --spacing(…) to prevent ambiguity (#15596)

Changed

  • Use more modern --alpha(color / 50%) syntax instead of --alpha(color, 50%) (#15665)
  • Rename @variant to @custom-variant (#15663)
  • Change outline-hidden to set outline-style: none except in forced colors mode (#15690)

... (truncated)

Commits

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@ntindle ntindle requested a review from a team as a code owner January 29, 2025 17:10
@ntindle ntindle requested review from Swiftyos and Pwuts and removed request for a team January 29, 2025 17:10
@github-actions github-actions bot added platform/frontend AutoGPT Platform - Front end platform/backend AutoGPT Platform - Back end labels Jan 29, 2025
@netlify Netlify
Copy link

netlify bot commented Jan 29, 2025 •
edited
Loading

✅ Deploy Preview for auto-gpt-docs-dev ready!

Name Link
🔨 Latest commit b7b7df5
🔍 Latest deploy log https://app.netlify.com/sites/auto-gpt-docs-dev/deploys/67a4a9c44e4c9c0008b760d2
😎 Deploy Preview https://deploy-preview-9367--auto-gpt-docs-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@deepsource-io deepsource.io
Copy link

deepsource-io bot commented Jan 29, 2025 •
edited
Loading

Here's the code health analysis summary for commits ef118ef..b7b7df5. View details on DeepSource ↗.

Analysis Summary

AnalyzerStatusSummaryLink
DeepSource JavaScript LogoJavaScript✅ Success
❗ 108 occurences introduced
🎯 112 occurences resolved
View Check ↗
DeepSource Python LogoPython✅ SuccessView Check ↗
💡 If you’re a repository administrator, you can configure the quality gates from the settings.

@qodo-merge-pro Qodo Merge Pro
Copy link

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review

Breaking Changes

Major changes to Tailwind configuration and CSS architecture that could affect styling across the application. The switch from Tailwind v3 to v4 introduces new defaults and syntax that need thorough testing.

@import 'tailwindcss';

@custom-variant dark (&:is(.dark *));

@theme {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --font-neue: 'PP Neue Montreal TT', sans-serif;
  --font-poppin: var(--font-poppins);
  --font-inter: var(--font-inter);

  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --color-custom-gray-100: #d9d9d9;
  --color-custom-gray-200: #a8a8a8;
  --color-custom-gray-300: #878787;
  --color-custom-gray-400: #646464;
  --color-custom-gray-500: #474747;
  --color-custom-gray-600: #282828;
  --color-custom-gray-700: #272727;

  --spacing-39: 9.875rem;
  --spacing-63: 15.875rem;
  --spacing-68: 17.75rem;
  --spacing-69: 14.875rem;
  --spacing-77: 18.5625rem;
  --spacing-89: 22.5rem;
  --spacing-139: 37.1875rem;
  --spacing-167: 41.6875rem;

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-full: 9999px;

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
}

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
  @media (width >= --theme(--breakpoint-sm)) {
    max-width: none;
  }
  @media (width >= 1400px) {
    max-width: 1400px;
  }
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@utility w-110 {
  width: 27.5rem;
}

@utility h-7.5 {
  height: 1.1875rem;
}

@utility h-18 {
  height: 4.5rem;
}

@utility h-238 {
  height: 14.875rem;
}

@utility top-158 {
  top: 9.875rem;
}

@utility top-254 {
  top: 15.875rem;
}

@utility top-284 {
  top: 17.75rem;
}

@utility top-360 {
  top: 22.5rem;
}

@utility left-297 {
  left: 18.5625rem;
}

@utility left-34 {
  left: 2.125rem;
}

@utility text-balance {
  text-wrap: balance;
}

@layer base {
  .font-neue {
    font-family: "PP Neue Montreal TT", sans-serif;
  }
}

@layer base {
Configuration Change

The PostCSS configuration has been updated to use @tailwindcss/postcss instead of the standard tailwindcss plugin. This change needs validation to ensure proper CSS processing.

'@tailwindcss/postcss': {},

@ntindle ntindle changed the title feat(frontend): update tailwind to 4.0.0 chore(frontend/deps-dev): bump tailwindcss from 3.4.17 to 4.0.0 in /autogpt_platform/frontend Jan 29, 2025
@netlify Netlify
Copy link

netlify bot commented Jan 29, 2025 •
edited
Loading

✅ Deploy Preview for auto-gpt-docs ready!

Name Link
🔨 Latest commit b7b7df5
🔍 Latest deploy log https://app.netlify.com/sites/auto-gpt-docs/deploys/67a4a9c4f7df25000879470c
😎 Deploy Preview https://deploy-preview-9367--auto-gpt-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@Bentlybro
Copy link
Member

Seems Prettier needs to be run on loads of the files, if you need a hand let me know + if any other changes need doing ill help out any way i can

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Feb 5, 2025

This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request.

@github-actions github-actions bot added the conflicts Automatically applied to PRs with merge conflicts label Feb 5, 2025
@ntindle
Copy link
Member Author

ntindle commented Feb 5, 2025

Also needs bump to tailwind merge

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Swiftyos Swiftyos Awaiting requested review from Swiftyos Swiftyos is a code owner automatically assigned from Significant-Gravitas/maintainers

@Pwuts Pwuts Awaiting requested review from Pwuts Pwuts is a code owner automatically assigned from Significant-Gravitas/maintainers

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
conflicts Automatically applied to PRs with merge conflicts platform/backend AutoGPT Platform - Back end platform/frontend AutoGPT Platform - Front end Review effort [1-5]: 3 size/xl
Projects
Frontend
Status: No status
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@ntindle @Bentlybro