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

Update TW to v3.4.1 and nvmrc to 20 #942

Merged
merged 1 commit into from
Jan 11, 2024
Merged

Update TW to v3.4.1 and nvmrc to 20 #942

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion .nvmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
18
20
58 changes: 29 additions & 29 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
},
"dependencies": {
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.5.3",
"tailwindcss": "^3.3.5"
"@tailwindcss/forms": "^0.5.7",
"tailwindcss": "^3.4.1"
},
"devDependencies": {
"auto-changelog": "^2.2.1",
Expand All @@ -42,7 +42,7 @@
"eslint-config-standard": "^16.0.2",
"eslint-plugin-prettier": "^3.4.0",
"light-server": "^2.9.1",
"postcss": "^8.4.31",
"postcss": "^8.4.33",
"postcss-import": "^13.0.0",
"postcss-loader": "^4.0.0",
"postcss-nested": "^5.0.1",
Expand Down
8 changes: 0 additions & 8 deletions src/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,3 @@
*/
@tailwind utilities;

/**
* Use this directive to control where Tailwind injects the responsive
* variations of each utility.
*
* If omitted, Tailwind will append these classes to the very end of
* your stylesheet by default.
*/
@tailwind variants;
Comment on lines -31 to -38
Copy link
Member Author

Choose a reason for hiding this comment

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

Removing this one because we no longer need this line
https://tailwindcss.com/docs/installation

1 change: 1 addition & 0 deletions src/plugins/theme/borderWidth.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/**
* Note: these are in px not rem units
* 1, 2, 4 and 8px are already provided by Tailwind out of the box
*/
module.exports = function () {
return {
Expand Down
5 changes: 5 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,11 @@ module.exports = {
':merge(.group):focus-within &',
':merge(.group):hover &',
]);
/**
* Note: in TW v3.4.0, the *: variant is added for targeting direct children
* https://github.com/tailwindlabs/tailwindcss/pull/12551
* Leaving these in for now for backwards compatibility.
*/
Comment on lines +60 to +64
Copy link
Member Author

Choose a reason for hiding this comment

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

Leaving in our current custom children: variant because we used that on every site.

Copy link
Member

Choose a reason for hiding this comment

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

Yeah, and they are different.

Children use the direct child selector to select any immediate element > * which scopes that at one level
I'd have to test to confirm but using the wildcard selector * without the direct child selector opens up the selectivity scope to all the levels

Copy link
Member Author

@yvonnetangsu yvonnetangsu Jan 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Oh don't worry @sherakama , Tailwind actually make the *: variant only select direct children so it's actually equivalent to > *, same as our children: variant. Some people were commenting on whether it's good idea for them to pick the * 😂

Screenshot 2024-01-11 at 10 01 50 AM

Copy link
Member

Choose a reason for hiding this comment

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

Oh, I just read tailwindlabs/tailwindcss#12551

* is a direct child selector 🤦

That difference isn't obvious with this syntax but it makes sense after reading the thread.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah it could be a bit confusing because of the * 😅

addVariant('children', '& > *');
addVariant('children-hover', '& > *:hover');
addVariant('children-focus', '& > *:focus');
Expand Down
Loading