Update Tailwind to latest v3.3.3 (#3320)

* Update Tailwind to latest v3.3.3

* Upgrade autoprefixer and postcss

* Move tailwindcss plugins to devDependencies

* Remove unused tailwind rules

* Remove obsolete 'transform' rules

Ref: https://tailwindcss.com/docs/upgrade-guide#automatic-transforms-and-filters

* Use the current yellow, update gray to slate

* Move webpack to devdependencies

* Go more minimal with package.json changes

* Update autoprefixer version

* Update postcss version

* Adjust dark style colors

* Use proper node version is asdf config
This commit is contained in:
Uku Taht 2023-09-07 17:23:19 +03:00 committed by GitHub
parent ae0019afe5
commit 275335071b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 541 additions and 853 deletions

View File

@ -1,4 +1,4 @@
erlang 25.2.3
elixir 1.14.3-otp-25
nodejs 16.3.0
nodejs 18.17.1
python 3.9.12

View File

@ -166,11 +166,11 @@ const ComparisonInput = function({ site, query, history }) {
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95">
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95">
<Menu.Items className="py-1 text-left origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10" static>
{ Object.keys(COMPARISON_MODES).map((key) => ComparisonModeOption({ label: COMPARISON_MODES[key], value: key, isCurrentlySelected: key == query.comparison, updateMode, setUiMode })) }
{ query.comparison !== "custom" && <span>

View File

@ -50,11 +50,11 @@ export default function FilterTypeSelector(props) {
show={open}
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Menu.Items
static

View File

@ -416,11 +416,11 @@ function DatePicker({ query, site, history }) {
show={open}
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
{renderDropDownContent()}
</Transition>

View File

@ -250,11 +250,11 @@ class Filters extends React.Component {
show={open}
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Menu.Items
static

View File

@ -249,10 +249,10 @@ export default class SiteSwitcher extends React.Component {
<Transition
show={this.state.open}
enter="transition ease-out duration-100 transform"
enter="transition ease-out duration-100"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75 transform"
leave="transition ease-in duration-75"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>

View File

@ -88,11 +88,11 @@ export default function Behaviours(props) {
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Menu.Items className="text-left origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
<div className="py-1">

View File

@ -79,11 +79,11 @@ export function IntervalPicker({ graphData, query, site, updateInterval }) {
as={Fragment}
show={open}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95">
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95">
<Menu.Items className="py-1 text-left origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10" static>
{options.map((option) => DropdownItem({ option, currentInterval, updateInterval }))}
</Menu.Items>

View File

@ -110,11 +110,11 @@ export default function SourceList(props) {
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Menu.Items className="text-left origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
<div className="py-1">

1271
assets/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -20,11 +20,11 @@
"@kunukn/react-collapse": "^2.2.9",
"@popperjs/core": "^2.11.6",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.3.2",
"@tailwindcss/forms": "^0.5.6",
"@tailwindcss/typography": "^0.4.1",
"abortcontroller-polyfill": "^1.7.3",
"alpinejs": "^2.8.2",
"autoprefixer": "^10.2.6",
"autoprefixer": "^10.4.15",
"babel-loader": "^8.2.2",
"chart.js": "^3.3.2",
"chartjs-plugin-datalabels": "^2.2.0",
@ -40,7 +40,7 @@
"phoenix": "^1.7.2",
"phoenix_html": "^3.3.1",
"phoenix_live_view": "^0.18.18",
"postcss": "^8.3.0",
"postcss": "^8.4.29",
"postcss-loader": "^6.1.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
@ -50,7 +50,7 @@
"react-popper": "^2.3.0",
"react-router-dom": "^5.2.0",
"react-transition-group": "^4.4.2",
"tailwindcss": "^2.1.2",
"tailwindcss": "^3.3.3",
"terser-webpack-plugin": "^5.1.2",
"url-search-params-polyfill": "^8.1.1",
"webpack": "5.88.1",

View File

@ -1,20 +1,18 @@
const colors = require('tailwindcss/colors')
module.exports = {
purge: {
content: [
'./js/**/*.js',
'../lib/plausible_web/templates/**/*.html.eex',
'../lib/plausible_web/templates/**/*.html.heex',
'../lib/plausible_web/live/**/*.ex',
'../lib/plausible_web/components/**/*.ex',
],
safelist: [
// PlausibleWeb.StatsView.stats_container_class/1 uses this class
// it's not used anywhere else in the templates or scripts
"max-w-screen-xl"
]
},
content: [
'./js/**/*.js',
'../lib/plausible_web/templates/**/*.html.eex',
'../lib/plausible_web/templates/**/*.html.heex',
'../lib/plausible_web/live/**/*.ex',
'../lib/plausible_web/components/**/*.ex',
],
safelist: [
// PlausibleWeb.StatsView.stats_container_class/1 uses this class
// it's not used anywhere else in the templates or scripts
"max-w-screen-xl"
],
darkMode: 'class',
theme: {
container: {
@ -23,7 +21,8 @@ module.exports = {
},
extend: {
colors: {
orange: colors.orange,
yellow: colors.amber, // We started usign `yellow` in v2 but it was renamed to `amber` in v3 https://tailwindcss.com/docs/upgrade-guide#removed-color-aliases
gray: colors.slate,
'gray-950': 'rgb(13, 18, 30)',
'gray-850': 'rgb(26, 32, 44)',
'gray-825': 'rgb(37, 47, 63)'
@ -32,7 +31,6 @@ module.exports = {
'44': '11rem'
},
width: {
'31percent': '31%',
'content': 'fit-content'
},
opacity: {
@ -50,23 +48,8 @@ module.exports = {
}
},
},
variants: {
textColor: ['responsive', 'hover', 'focus', 'group-hover'],
display: ['responsive', 'hover', 'focus', 'group-hover'],
extend: {
textColor: ['dark'],
borderWidth: ['dark'],
backgroundOpacity: ['dark'],
display: ['dark'],
cursor: ['hover'],
justifyContent: ['responsive'],
backgroundColor: ['odd', 'even'],
shadow: ['dark']
}
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),
]
}

View File

@ -10,7 +10,7 @@
<div class="grid grid-cols-4 gap-6">
<div class="col-span-4 sm:col-span-2">
<%= label nil, "Domain", class: "block text-sm font-medium leading-5 text-gray-700 dark:text-gray-300" %>
<%= text_input nil, :domain, value: @site.domain, disabled: "disabled", class: "dark:bg-gray-900 w-full mt-1 block pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:text-gray-500 text-gray-500" %>
<%= text_input nil, :domain, value: @site.domain, disabled: "disabled", class: "dark:bg-gray-900 w-full mt-1 block pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:text-gray-100 text-gray-500" %>
</div>
</div>
<span class="inline-flex rounded-md shadow-sm">

View File

@ -18,7 +18,7 @@
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">
<%= membership.user.name %>
</p>
<p class="text-sm text-gray-500 truncate">
<p class="text-sm text-gray-400 truncate">
<%= membership.user.email %>
</p>
</div>