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.

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

feat(tailwind): migrate to v4 #7507

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
11 changes: 1 addition & 10 deletions COLLABORATOR_GUIDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,11 +75,6 @@ The Node.js Website is built upon [React][] and [Next.js][] respectively, the UI
The Website also uses several other Open Source libraries (not limited to) listed below:

- Styling is done with [PostCSS][] and CSS Modules
- We use a combination of PostCSS plugins to create a [Sass](https://sass-lang.com/) alike environment
- We recommend reading the documentation of our plugins in case of doubt
- [PostCSS Mixins](https://github.com/postcss/postcss-mixins)
- [PostCSS Import](https://github.com/postcss/postcss-import)
- [PostCSS Simple Vars](https://github.com/postcss/postcss-simple-vars)
- [Tailwind][] is used as our CSS Framework and the Foundation of our Design System
- [Hero Icons](https://heroicons.com/) is an SVG Icon Library used within our Codebase
- [Radix UI][] is a collection of customizable UI components
Expand Down Expand Up @@ -577,15 +572,11 @@ We currently use a set of PostCSS plugins that create a SCSS-a-like environment.

#### What PostCSS Plugins we use?

- `postcss-mixins`: Allows us to use Sass-like Mixins
- `postcss-import`: Allows us to use Sass-like Imports
- `postcss-simple-vars`: Allows us to use Sass-like Variables
- `postcss-nested`: Allows us to use Sass-like Nesting
- `postcss-calc`: Strips `calc` expressions and replaces them with the result
- `@tailwindcss/postcss`: Allows us to use Tailwind within PostCSS

It is important to mention that even though we use SCSS-like syntax, we do not use SCSS, and some of these plugins
are not 100% compatible with the SCSS syntax.
For example, `postcss-mixins` does not support `@include` and `@extend` directives (and it uses `@define-mixin` for defining Mixins and `@mixin` for including Mixins).

#### Do we use a CSS Framework?

Expand Down
7 changes: 1 addition & 6 deletions apps/site/.postcssrc.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
{
"plugins": {
"postcss-mixins": {},
"postcss-simple-vars": {},
"postcss-calc": {},
"postcss-import": {},
"tailwindcss/nesting": {},
"tailwindcss": {},
"autoprefixer": {}
"@tailwindcss/postcss": {}
}
}
10 changes: 6 additions & 4 deletions apps/site/.stylelintrc.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,14 @@ const CUSTOM_AT_RULES = [
'apply',
'layer',
'responsive',
'reference',
'utility',
'theme',
'custom-variant',
'screen',
'source',
'tailwind',
'variants',
// PostCSS-specific at-rules
'define-mixin',
'mixin',
];

// Enforces certain selectors to be only in camelCase notation
Expand Down Expand Up @@ -42,6 +44,6 @@ export default {
// Adopts the import notation from `postcss-import`
'import-notation': 'string',
// Allow the `@apply` at rule as its part of Tailwind
'at-rule-no-deprecated': [true, { ignoreAtRules: ['apply'] }],
'at-rule-no-deprecated': [true, { ignoreAtRules: CUSTOM_AT_RULES }],
},
};
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,12 @@ import { ImageResponse } from 'next/og';

import { DEFAULT_CATEGORY_OG_TYPE } from '@/next.constants.mjs';
import { defaultLocale } from '@/next.locales.mjs';
import tailwindConfig from '@/tailwind.config';
import { hexToRGBA } from '@/util/hexToRGBA';

const CATEGORY_TO_THEME_COLOUR_MAP = {
announcement: tailwindConfig.theme.colors.green['700'],
release: tailwindConfig.theme.colors.info['600'],
vulnerability: tailwindConfig.theme.colors.warning['600'],
Comment on lines -11 to -13
Copy link
Member Author

Choose a reason for hiding this comment

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

I think I know how to make this work, I'll do it another day.

Copy link
Member Author

Choose a reason for hiding this comment

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

Not even entering the values manually works.

Copy link
Member Author

Choose a reason for hiding this comment

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

Okay, it works manually. I wonder if it will work with variables.

Copy link
Member

Choose a reason for hiding this comment

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

announcement: '#1a3f1d',
release: '#0c7bb3',
vulnerability: '#ae5f00',
};

type Category = keyof typeof CATEGORY_TO_THEME_COLOUR_MAP;
Expand Down
2 changes: 2 additions & 0 deletions apps/site/components/Blog/BlogHeader/index.module.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@reference "../../../styles/index.css";

.blogHeader {
h1 {
@apply inline-flex
Expand Down
2 changes: 2 additions & 0 deletions apps/site/components/Blog/BlogPostCard/index.module.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@reference "../../../styles/index.css";

.container {
@apply max-w-full
flex-1;
Expand Down
67 changes: 32 additions & 35 deletions apps/site/components/Common/Search/utils.ts
Original file line number Diff line number Diff line change
@@ -1,46 +1,43 @@
import tailwindConfig from '@/tailwind.config';

const colors = tailwindConfig.theme.colors;
export const themeConfig = {
typography: {
'--font-primary': 'var(--font-open-sans)',
},
colors: {
light: {
'--text-color-primary': colors.neutral[900],
'--text-color-accent': colors.green[600],
'--background-color-secondary': colors.neutral[100],
'--background-color-tertiary': colors.neutral[300],
'--border-color-accent': colors.green[600],
'--border-color-primary': colors.neutral[200],
'--border-color-tertiary': colors.green[700],
'--button-background-color-primary': colors.green[600],
'--button-background-color-secondary': colors.white,
'--button-background-color-secondary-hover': colors.neutral[100],
'--button-border-color-secondary': colors.neutral[300],
'--button-text-color-secondary': colors.neutral[900],
'--chat-button-border-color-gradientThree': colors.green[400],
'--chat-button-border-color-gradientFour': colors.green[700],
'--chat-button-background-color-gradientOne': colors.green[600],
'--chat-button-background-color-gradientTwo': colors.green[300],
'--text-color-primary': 'var(--color-neutral-900)',
'--text-color-accent': 'var(--color-green-600)',
'--background-color-secondary': 'var(--color-neutral-100)',
'--background-color-tertiary': 'var(--color-neutral-300)',
'--border-color-accent': 'var(--color-green-600)',
'--border-color-primary': 'var(--color-neutral-200)',
'--border-color-tertiary': 'var(--color-green-700)',
'--button-background-color-primary': 'var(--color-green-600)',
'--button-background-color-secondary': 'var(--color-white)',
'--button-background-color-secondary-hover': 'var(--color-neutral-100)',
'--button-border-color-secondary': 'var(--color-neutral-300)',
'--button-text-color-secondary': 'var(--color-neutral-900)',
'--chat-button-border-color-gradientThree': 'var(--color-green-400)',
'--chat-button-border-color-gradientFour': 'var(--color-green-700)',
'--chat-button-background-color-gradientOne': 'var(--color-green-600)',
'--chat-button-background-color-gradientTwo': 'var(--color-green-300)',
},
dark: {
'--text-color-primary': colors.neutral[100],
'--text-color-accent': colors.green[400],
'--background-color-secondary': colors.neutral[950],
'--background-color-tertiary': colors.neutral[900],
'--border-color-accent': colors.green[400],
'--border-color-primary': colors.neutral[900],
'--border-color-tertiary': colors.green[300],
'--button-background-color-primary': colors.green[400],
'--button-background-color-secondary': colors.neutral[950],
'--button-background-color-secondary-hover': colors.neutral[900],
'--button-border-color-secondary': colors.neutral[900],
'--button-text-color-secondary': colors.neutral[200],
'--chat-button-border-color-gradientThree': colors.green[400],
'--chat-button-border-color-gradientFour': colors.green[700],
'--chat-button-background-color-gradientOne': colors.green[400],
'--chat-button-background-color-gradientTwo': colors.green[800],
'--text-color-primary': 'var(--color-neutral-100)',
'--text-color-accent': 'var(--color-green-400)',
'--background-color-secondary': 'var(--color-neutral-950)',
'--background-color-tertiary': 'var(--color-neutral-900)',
'--border-color-accent': 'var(--color-green-400)',
'--border-color-primary': 'var(--color-neutral-900)',
'--border-color-tertiary': 'var(--color-green-300)',
'--button-background-color-primary': 'var(--color-green-400)',
'--button-background-color-secondary': 'var(--color-neutral-950)',
'--button-background-color-secondary-hover': 'var(--color-neutral-900)',
'--button-border-color-secondary': 'var(--color-neutral-900)',
'--button-text-color-secondary': 'var(--color-neutral-200)',
'--chat-button-border-color-gradientThree': 'var(--color-green-400)',
'--chat-button-border-color-gradientFour': 'var(--color-green-700)',
'--chat-button-background-color-gradientOne': 'var(--color-green-400)',
'--chat-button-background-color-gradientTwo': 'var(--color-green-800)',
},
},
};
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@reference "../../../styles/index.css";

.downloadButton {
@apply justify-center;

Expand Down
2 changes: 2 additions & 0 deletions apps/site/components/MDX/Calendar/Event/index.module.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@reference "../../../../styles/index.css";

.event {
@apply flex
w-fit
Expand Down
2 changes: 2 additions & 0 deletions apps/site/components/MDX/Calendar/calendar.module.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@reference "../../../styles/index.css";

.events {
@apply flex
flex-col
Expand Down
2 changes: 1 addition & 1 deletion apps/site/components/withBlogCategories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const WithBlogCategories: FC<WithBlogCategoriesProps> = ({
tabs={categories}
activeTab={blogData.category}
>
<div className="max-xs:grid-cols-[1fr] grid grid-cols-[repeat(auto-fill,minmax(theme(spacing.80),1fr))] [grid-gap:theme(spacing.12)_theme(spacing.8)]">
<div className="max-xs:grid-cols-[1fr] grid grid-cols-[repeat(auto-fill,minmax(--spacing(80),1fr))] [grid-gap:--spacing(12)_--spacing(8)]">
{blogData.posts.map(post => (
<BlogPostCard
key={post.slug}
Expand Down
20 changes: 11 additions & 9 deletions apps/site/layouts/layouts.module.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@reference "../styles/index.css";

.baseLayout {
@apply grid
h-max
Expand All @@ -9,21 +11,21 @@

.articleLayout {
@apply max-w-8xl
sm:grid-areas-[sidebar_main,sidebar_footer]
lg:grid-areas-[sidebar_main_metabar,sidebar_footer_metabar]
mx-auto
block
w-full
sm:grid
sm:grid-cols-[theme(spacing.52)_1fr]
sm:grid-rows-[1fr]
sm:overflow-visible
sm:[grid-template-areas:'sidebar_main''sidebar_footer']
md:grid-cols-[theme(spacing.64)_1fr]
lg:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
lg:[grid-template-areas:'sidebar_main_metabar''sidebar_footer_metabar']
xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)];

> *:nth-child(1) {
@apply grid-in-[sidebar]
@apply [grid-area:sidebar]
lg:sticky
lg:top-0
lg:h-[100vh]
Expand All @@ -35,20 +37,20 @@
sm:max-lg:block;

> *:first-child {
@apply grid-in-[main]
sm:bg-gradient-subtle
@apply sm:bg-gradient-subtle
sm:dark:bg-gradient-subtle-dark
xl:px-18
p-4
[grid-area:main]
motion-safe:scroll-smooth
sm:bg-fixed
sm:p-12;
}

> *:last-child {
@apply grid-in-[metabar]
mt-8
@apply mt-8
border-t
[grid-area:metabar]
sm:mt-0
lg:sticky
lg:top-0
Expand All @@ -59,8 +61,7 @@
}

> *:nth-child(3) {
@apply grid-in-[footer]
sticky
@apply sticky
bottom-0
flex
w-full
Expand All @@ -71,6 +72,7 @@
border-t-neutral-200
bg-white
py-4
[grid-area:footer]
dark:border-t-neutral-900
dark:bg-neutral-950;
}
Expand Down
38 changes: 18 additions & 20 deletions apps/site/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,51 +32,49 @@
"@radix-ui/react-slot": "^1.1.2",
"@radix-ui/react-tabs": "^1.1.3",
"@radix-ui/react-toast": "^1.2.6",
"@radix-ui/react-tooltip": "^1.1.8",
"@tailwindcss/postcss": "~4.0.17",
"@vcarl/remark-headings": "~0.1.0",
"@vercel/analytics": "~1.5.0",
"@vercel/otel": "~1.10.1",
"@vercel/otel": "~1.10.4",
"@vercel/speed-insights": "~1.2.0",
"autoprefixer": "~10.4.20",
"classnames": "~2.5.1",
"cross-env": "7.0.3",
"feed": "~4.2.2",
"github-slugger": "~2.0.0",
"glob": "~11.0.1",
"gray-matter": "~4.0.3",
"next": "15.2.3",
"next": "15.2.4",
"next-intl": "~4.0.2",
"next-themes": "~0.4.4",
"next-themes": "~0.4.6",
"postcss": "~8.5.3",
"postcss-calc": "~10.1.1",
"postcss-import": "~16.1.0",
"postcss-loader": "~8.1.1",
"postcss-mixins": "~11.0.3",
"postcss-simple-vars": "~7.0.1",
"react": "19.0.0",
"react-dom": "19.0.0",
"react": "19.1.0",
"react-dom": "19.1.0",
"rehype-autolink-headings": "~7.1.0",
"rehype-slug": "~6.0.0",
"remark-gfm": "~4.0.1",
"remark-reading-time": "~2.0.1",
"semver": "~7.7.1",
"shiki": "~3.1.0",
"sval": "^0.6.1",
"tailwindcss": "~3.4.17",
"shiki": "~3.2.1",
"sval": "^0.6.3",
"tailwindcss": "~4.0.17",
"unist-util-visit": "~5.0.0",
"vfile": "~6.0.3",
"vfile-matter": "~5.0.0"
"vfile-matter": "~5.0.1"
},
"devDependencies": {
"@eslint/compat": "~1.2.7",
"@next/eslint-plugin-next": "15.2.0",
"@next/eslint-plugin-next": "15.2.4",
"@testing-library/jest-dom": "~6.6.3",
"@testing-library/react": "~16.2.0",
"@testing-library/user-event": "~14.6.1",
"@types/jest": "29.5.14",
"@types/semver": "~7.5.8",
"eslint-config-next": "15.2.0",
"eslint-import-resolver-typescript": "~3.8.3",
"eslint-plugin-mdx": "~3.1.5",
"@types/semver": "~7.7.0",
"eslint-config-next": "15.2.4",
"eslint-import-resolver-typescript": "~4.3.1",
"eslint-plugin-mdx": "~3.3.1",
"eslint-plugin-react": "~7.37.4",
"eslint-plugin-react-hooks": "5.2.0",
"handlebars": "4.7.8",
Expand All @@ -85,12 +83,12 @@
"jest-junit": "16.0.0",
"remark-frontmatter": "5.0.0",
"remark-preset-lint-node": "5.1.2",
"stylelint": "16.15.0",
"stylelint": "16.17.0",
"stylelint-config-standard": "37.0.0",
"stylelint-order": "6.0.4",
"stylelint-selector-bem-pattern": "4.0.1",
"typescript": "~5.7.2",
"typescript-eslint": "~8.25.0",
"typescript-eslint": "~8.28.0",
"user-agent-data-types": "0.4.2"
}
}
6 changes: 3 additions & 3 deletions apps/site/pages/en/about/branding.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ Credit to [Angela Angelini](https://www.linkedin.com/in/angeliningl/) for design
<img
alt="Node.js Light Stacked Logo"
src="/static/logos/nodejsStackedLight.svg"
className="h-[164px] w-[267px] rounded bg-neutral-950 p-2 dark:bg-transparent"
className="rounded-xs h-[164px] w-[267px] bg-neutral-950 p-2 dark:bg-transparent"
width="267"
height="164"
/>
Expand All @@ -83,7 +83,7 @@ Credit to [Angela Angelini](https://www.linkedin.com/in/angeliningl/) for design
<img
alt="Node.js White Stacked Logo"
src="/static/logos/nodejsStackedWhite.svg"
className="rounded bg-neutral-950 p-2 dark:bg-transparent"
className="rounded-xs bg-neutral-950 p-2 dark:bg-transparent"
/>
</td>
</tr>
Expand All @@ -108,7 +108,7 @@ Credit to [Angela Angelini](https://www.linkedin.com/in/angeliningl/) for design
<img
alt="White JS Icons"
src="/static/logos/jsIconWhite.svg"
className="height-[80px] mx-auto w-[71px] rounded bg-neutral-950 p-2 dark:bg-transparent"
className="height-[80px] rounded-xs mx-auto w-[71px] bg-neutral-950 p-2 dark:bg-transparent"
width="71"
height="80"
/>
Expand Down
Loading
Loading