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 erlang 25.2.3
elixir 1.14.3-otp-25 elixir 1.14.3-otp-25
nodejs 16.3.0 nodejs 18.17.1
python 3.9.12 python 3.9.12

View File

@ -166,11 +166,11 @@ const ComparisonInput = function({ site, query, history }) {
<Transition <Transition
as={Fragment} as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75" leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"> 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> <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 })) } { Object.keys(COMPARISON_MODES).map((key) => ComparisonModeOption({ label: COMPARISON_MODES[key], value: key, isCurrentlySelected: key == query.comparison, updateMode, setUiMode })) }
{ query.comparison !== "custom" && <span> { query.comparison !== "custom" && <span>

View File

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

View File

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

View File

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

View File

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

View File

@ -88,11 +88,11 @@ export default function Behaviours(props) {
<Transition <Transition
as={Fragment} as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75" leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" 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"> <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"> <div className="py-1">

View File

@ -79,11 +79,11 @@ export function IntervalPicker({ graphData, query, site, updateInterval }) {
as={Fragment} as={Fragment}
show={open} show={open}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75" leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"> 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> <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 }))} {options.map((option) => DropdownItem({ option, currentInterval, updateInterval }))}
</Menu.Items> </Menu.Items>

View File

@ -110,11 +110,11 @@ export default function SourceList(props) {
<Transition <Transition
as={Fragment} as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75" leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" 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"> <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"> <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", "@kunukn/react-collapse": "^2.2.9",
"@popperjs/core": "^2.11.6", "@popperjs/core": "^2.11.6",
"@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.3.2", "@tailwindcss/forms": "^0.5.6",
"@tailwindcss/typography": "^0.4.1", "@tailwindcss/typography": "^0.4.1",
"abortcontroller-polyfill": "^1.7.3", "abortcontroller-polyfill": "^1.7.3",
"alpinejs": "^2.8.2", "alpinejs": "^2.8.2",
"autoprefixer": "^10.2.6", "autoprefixer": "^10.4.15",
"babel-loader": "^8.2.2", "babel-loader": "^8.2.2",
"chart.js": "^3.3.2", "chart.js": "^3.3.2",
"chartjs-plugin-datalabels": "^2.2.0", "chartjs-plugin-datalabels": "^2.2.0",
@ -40,7 +40,7 @@
"phoenix": "^1.7.2", "phoenix": "^1.7.2",
"phoenix_html": "^3.3.1", "phoenix_html": "^3.3.1",
"phoenix_live_view": "^0.18.18", "phoenix_live_view": "^0.18.18",
"postcss": "^8.3.0", "postcss": "^8.4.29",
"postcss-loader": "^6.1.1", "postcss-loader": "^6.1.1",
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
@ -50,7 +50,7 @@
"react-popper": "^2.3.0", "react-popper": "^2.3.0",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-transition-group": "^4.4.2", "react-transition-group": "^4.4.2",
"tailwindcss": "^2.1.2", "tailwindcss": "^3.3.3",
"terser-webpack-plugin": "^5.1.2", "terser-webpack-plugin": "^5.1.2",
"url-search-params-polyfill": "^8.1.1", "url-search-params-polyfill": "^8.1.1",
"webpack": "5.88.1", "webpack": "5.88.1",

View File

@ -1,20 +1,18 @@
const colors = require('tailwindcss/colors') const colors = require('tailwindcss/colors')
module.exports = { module.exports = {
purge: { content: [
content: [ './js/**/*.js',
'./js/**/*.js', '../lib/plausible_web/templates/**/*.html.eex',
'../lib/plausible_web/templates/**/*.html.eex', '../lib/plausible_web/templates/**/*.html.heex',
'../lib/plausible_web/templates/**/*.html.heex', '../lib/plausible_web/live/**/*.ex',
'../lib/plausible_web/live/**/*.ex', '../lib/plausible_web/components/**/*.ex',
'../lib/plausible_web/components/**/*.ex', ],
], safelist: [
safelist: [ // PlausibleWeb.StatsView.stats_container_class/1 uses this class
// PlausibleWeb.StatsView.stats_container_class/1 uses this class // it's not used anywhere else in the templates or scripts
// it's not used anywhere else in the templates or scripts "max-w-screen-xl"
"max-w-screen-xl" ],
]
},
darkMode: 'class', darkMode: 'class',
theme: { theme: {
container: { container: {
@ -23,7 +21,8 @@ module.exports = {
}, },
extend: { extend: {
colors: { 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-950': 'rgb(13, 18, 30)',
'gray-850': 'rgb(26, 32, 44)', 'gray-850': 'rgb(26, 32, 44)',
'gray-825': 'rgb(37, 47, 63)' 'gray-825': 'rgb(37, 47, 63)'
@ -32,7 +31,6 @@ module.exports = {
'44': '11rem' '44': '11rem'
}, },
width: { width: {
'31percent': '31%',
'content': 'fit-content' 'content': 'fit-content'
}, },
opacity: { 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: [ plugins: [
require('@tailwindcss/forms'), require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'), require('@tailwindcss/aspect-ratio'),
] ]
} }

View File

@ -10,7 +10,7 @@
<div class="grid grid-cols-4 gap-6"> <div class="grid grid-cols-4 gap-6">
<div class="col-span-4 sm:col-span-2"> <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" %> <%= 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>
</div> </div>
<span class="inline-flex rounded-md shadow-sm"> <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"> <p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">
<%= membership.user.name %> <%= membership.user.name %>
</p> </p>
<p class="text-sm text-gray-500 truncate"> <p class="text-sm text-gray-400 truncate">
<%= membership.user.email %> <%= membership.user.email %>
</p> </p>
</div> </div>