Skip to content

Commit 77c6c7e

Browse files
bjohansebasAugustinMauroyovflowd
authored
feat(tailwind): migrate to v4 (#7507)
* chore(tailwind): update to v4 * fix: dark theme * simplify postcss * fix: using good source * fix: lock-file * chore: cleaned package.json * fix some bugs and add missing comment * fix(ui-components): remove unnecessary aspect ratio utility from Preview styles * fix(ui-components): update shadow variables to use --alpha for transparency * fix(ui-components): adjust shadow variables to ensure proper fallback for color transparency * fix fonts? * fix(route): add TODO to use CSS variables instead of absolute values * fix(effects): update background image from turtle.png to smoke.gif * fix: storybook postcss implementation --------- Co-authored-by: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Co-authored-by: Claudio Wunder <cwunder@gnome.org>
1 parent b7364b9 commit 77c6c7e

File tree

73 files changed

+2053
-2538
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+2053
-2538
lines changed

‎COLLABORATOR_GUIDE.md‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -75,11 +75,6 @@ The Node.js Website is built upon [React][] and [Next.js][] respectively, the UI
7575
The Website also uses several other Open Source libraries (not limited to) listed below:
7676

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

578573
#### What PostCSS Plugins we use?
579574

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

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

590581
#### Do we use a CSS Framework?
591582

‎apps/site/.postcssrc.json‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
{
22
"plugins": {
3-
"postcss-mixins": {},
4-
"postcss-simple-vars": {},
53
"postcss-calc": {},
6-
"postcss-import": {},
7-
"tailwindcss/nesting": {},
8-
"tailwindcss": {},
9-
"autoprefixer": {}
4+
"@tailwindcss/postcss": {}
105
}
116
}

‎apps/site/.stylelintrc.mjs‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@ const CUSTOM_AT_RULES = [
44
'apply',
55
'layer',
66
'responsive',
7+
'reference',
8+
'utility',
9+
'theme',
10+
'custom-variant',
711
'screen',
12+
'source',
813
'tailwind',
914
'variants',
10-
// PostCSS-specific at-rules
11-
'define-mixin',
12-
'mixin',
1315
];
1416

1517
// Enforces certain selectors to be only in camelCase notation
@@ -42,6 +44,6 @@ export default {
4244
// Adopts the import notation from `postcss-import`
4345
'import-notation': 'string',
4446
// Allow the `@apply` at rule as its part of Tailwind
45-
'at-rule-no-deprecated': [true, { ignoreAtRules: ['apply'] }],
47+
'at-rule-no-deprecated': [true, { ignoreAtRules: CUSTOM_AT_RULES }],
4648
},
4749
};

‎apps/site/app/[locale]/next-data/og/[category]/[title]/route.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import { ImageResponse } from 'next/og';
44

55
import { DEFAULT_CATEGORY_OG_TYPE } from '@/next.constants.mjs';
66
import { defaultLocale } from '@/next.locales.mjs';
7-
import tailwindConfig from '@/tailwind.config';
87
import { hexToRGBA } from '@/util/hexToRGBA';
98

9+
// TODO: use CSS variables instead of absolute values
1010
const CATEGORY_TO_THEME_COLOUR_MAP = {
11-
announcement: tailwindConfig.theme.colors.green['700'],
12-
release: tailwindConfig.theme.colors.info['600'],
13-
vulnerability: tailwindConfig.theme.colors.warning['600'],
11+
announcement: '#1a3f1d',
12+
release: '#0c7bb3',
13+
vulnerability: '#ae5f00',
1414
};
1515

1616
type Category = keyof typeof CATEGORY_TO_THEME_COLOUR_MAP;

‎apps/site/components/Blog/BlogHeader/index.module.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@reference "../../../styles/index.css";
2+
13
.blogHeader {
24
h1 {
35
@apply inline-flex

‎apps/site/components/Blog/BlogPostCard/index.module.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@reference "../../../styles/index.css";
2+
13
.container {
24
@apply max-w-full
35
flex-1;

‎apps/site/components/Common/Search/utils.ts‎

Lines changed: 32 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,43 @@
1-
import tailwindConfig from '@/tailwind.config';
2-
3-
const colors = tailwindConfig.theme.colors;
41
export const themeConfig = {
52
typography: {
63
'--font-primary': 'var(--font-open-sans)',
74
},
85
colors: {
96
light: {
10-
'--text-color-primary': colors.neutral[900],
11-
'--text-color-accent': colors.green[600],
12-
'--background-color-secondary': colors.neutral[100],
13-
'--background-color-tertiary': colors.neutral[300],
14-
'--border-color-accent': colors.green[600],
15-
'--border-color-primary': colors.neutral[200],
16-
'--border-color-tertiary': colors.green[700],
17-
'--button-background-color-primary': colors.green[600],
18-
'--button-background-color-secondary': colors.white,
19-
'--button-background-color-secondary-hover': colors.neutral[100],
20-
'--button-border-color-secondary': colors.neutral[300],
21-
'--button-text-color-secondary': colors.neutral[900],
22-
'--chat-button-border-color-gradientThree': colors.green[400],
23-
'--chat-button-border-color-gradientFour': colors.green[700],
24-
'--chat-button-background-color-gradientOne': colors.green[600],
25-
'--chat-button-background-color-gradientTwo': colors.green[300],
7+
'--text-color-primary': 'var(--color-neutral-900)',
8+
'--text-color-accent': 'var(--color-green-600)',
9+
'--background-color-secondary': 'var(--color-neutral-100)',
10+
'--background-color-tertiary': 'var(--color-neutral-300)',
11+
'--border-color-accent': 'var(--color-green-600)',
12+
'--border-color-primary': 'var(--color-neutral-200)',
13+
'--border-color-tertiary': 'var(--color-green-700)',
14+
'--button-background-color-primary': 'var(--color-green-600)',
15+
'--button-background-color-secondary': 'var(--color-white)',
16+
'--button-background-color-secondary-hover': 'var(--color-neutral-100)',
17+
'--button-border-color-secondary': 'var(--color-neutral-300)',
18+
'--button-text-color-secondary': 'var(--color-neutral-900)',
19+
'--chat-button-border-color-gradientThree': 'var(--color-green-400)',
20+
'--chat-button-border-color-gradientFour': 'var(--color-green-700)',
21+
'--chat-button-background-color-gradientOne': 'var(--color-green-600)',
22+
'--chat-button-background-color-gradientTwo': 'var(--color-green-300)',
2623
},
2724
dark: {
28-
'--text-color-primary': colors.neutral[100],
29-
'--text-color-accent': colors.green[400],
30-
'--background-color-secondary': colors.neutral[950],
31-
'--background-color-tertiary': colors.neutral[900],
32-
'--border-color-accent': colors.green[400],
33-
'--border-color-primary': colors.neutral[900],
34-
'--border-color-tertiary': colors.green[300],
35-
'--button-background-color-primary': colors.green[400],
36-
'--button-background-color-secondary': colors.neutral[950],
37-
'--button-background-color-secondary-hover': colors.neutral[900],
38-
'--button-border-color-secondary': colors.neutral[900],
39-
'--button-text-color-secondary': colors.neutral[200],
40-
'--chat-button-border-color-gradientThree': colors.green[400],
41-
'--chat-button-border-color-gradientFour': colors.green[700],
42-
'--chat-button-background-color-gradientOne': colors.green[400],
43-
'--chat-button-background-color-gradientTwo': colors.green[800],
25+
'--text-color-primary': 'var(--color-neutral-100)',
26+
'--text-color-accent': 'var(--color-green-400)',
27+
'--background-color-secondary': 'var(--color-neutral-950)',
28+
'--background-color-tertiary': 'var(--color-neutral-900)',
29+
'--border-color-accent': 'var(--color-green-400)',
30+
'--border-color-primary': 'var(--color-neutral-900)',
31+
'--border-color-tertiary': 'var(--color-green-300)',
32+
'--button-background-color-primary': 'var(--color-green-400)',
33+
'--button-background-color-secondary': 'var(--color-neutral-950)',
34+
'--button-background-color-secondary-hover': 'var(--color-neutral-900)',
35+
'--button-border-color-secondary': 'var(--color-neutral-900)',
36+
'--button-text-color-secondary': 'var(--color-neutral-200)',
37+
'--chat-button-border-color-gradientThree': 'var(--color-green-400)',
38+
'--chat-button-border-color-gradientFour': 'var(--color-green-700)',
39+
'--chat-button-background-color-gradientOne': 'var(--color-green-400)',
40+
'--chat-button-background-color-gradientTwo': 'var(--color-green-800)',
4441
},
4542
},
4643
};

‎apps/site/components/Downloads/DownloadButton/index.module.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@reference "../../../styles/index.css";
2+
13
.downloadButton {
24
@apply justify-center;
35

‎apps/site/components/MDX/Calendar/Event/index.module.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@reference "../../../../styles/index.css";
2+
13
.event {
24
@apply flex
35
w-fit

‎apps/site/components/MDX/Calendar/calendar.module.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@reference "../../../styles/index.css";
2+
13
.events {
24
@apply flex
35
flex-col

0 commit comments

Comments
 (0)