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

Jump to bottom

feat: update tailwindcss #340

Closed
wants to merge 6 commits into from
Closed

feat: update tailwindcss #340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4565596
feat: update tailwindcss
ufkaya May 3, 2021
f20a92c
update snapshots
ufkaya May 3, 2021
f6e94b9
merge master
ufkaya May 25, 2021
dabeef2
update package-lock
ufkaya May 25, 2021
ac7912d
fix: build
ufkaya May 25, 2021
9ad0535
Merge branch 'master' into updateTailwind
ufkaya May 31, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
864 changes: 481 additions & 383 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions package.json
View file
Open in desktop
Expand Up @@ -27,7 +27,7 @@
"peerDependencies": {
"react": ">=16.12.0",
"react-dom": ">=16.12.0",
"tailwindcss": "^1.4.0"
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.2"
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this forcing the resolution to another package?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

is telling tailwindcss to use PostCSS 7, they included PostCSS 7 compatibility build

Copy link
Contributor

Choose a reason for hiding this comment

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

what's holding us back from using postcss 8?
I'm ok with doing an intermediary step, but I would not want to close the jira ticket with this workaround in place

},
"dependencies": {
"classnames": "^2.2.6",
Expand Down Expand Up @@ -60,7 +60,7 @@
"@types/node": "^12.12.24",
"@types/react": "^16.9.17",
"@types/react-paginate": "^7.0.0",
"autoprefixer": "^9.7.4",
"autoprefixer": "^9.8.6",
"babel-loader": "^8.1.0",
"bundlesize": "^0.18.0",
"jest": "^25.1.0",
Expand All @@ -74,8 +74,8 @@
"react-test-renderer": "^16.12.0",
"semantic-release": "^17.0.0",
"svgo": "^1.3.2",
"tailwindcss": "^1.9.6",
"ts-jest": "^25.0.0",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.2",
"ts-jest": "25.0.0",
"ts-loader": "^9.0.0",
"typescript": "^4.0.0"
},
Expand Down
10 changes: 5 additions & 5 deletions src/__tests__/__snapshots__/node.test.ts.snap
View file
Open in desktop
Expand Up @@ -62,8 +62,8 @@ Object {
"cover": "cover",
},
"borderColor": Object {
"DEFAULT": undefined,
"black": "#000000",
"default": undefined,
"facebook": "#4267B2",
"fair-deal": "#EAA403",
"good-deal": "#81B040",
Expand Down Expand Up @@ -101,7 +101,7 @@ Object {
"20": "20px",
"4": "4px",
"6": "6px",
"default": "4px",
"DEFAULT": "4px",
"full": "9999px",
"half": "50%",
"none": "0",
Expand All @@ -111,10 +111,10 @@ Object {
"0": "0",
"2": "2px",
"5": "5px",
"default": "1px",
"DEFAULT": "1px",
},
"boxShadow": Object {
"default": "0 2px 4px 0 rgba(0,0,0,0.10)",
"DEFAULT": "0 2px 4px 0 rgba(0,0,0,0.10)",
"focus": "0px 0px 1px 2px rgba(54, 150, 185, 0.6)",
"hard": "0 4px 18px 0 rgba(35,42,54,0.4)",
"harder": "0 0 18px 0 rgba(35,42,54,0.8)",
Expand Down Expand Up @@ -166,7 +166,7 @@ Object {
"0": "0",
"2": "2px",
"5": "5px",
"default": "1px",
"DEFAULT": "1px",
},
"fontFamily": Object {
"sans": Array [
Expand Down
2 changes: 1 addition & 1 deletion src/components/dropdown/menu.tsx
View file
Open in desktop
Expand Up @@ -102,7 +102,7 @@ class Menu<T> extends Component<Props<T>> {
{...getMenuProps(
{
className: classNames(
"border border-grey-3 absolute z-dropdownMenu bg-white cursor-normal inset-x-0 list-reset scrolling-touch overflow-y-scroll custom-scrollbar max-h-dropdownSM md:max-h-dropdown py-10 shadow-soft rounded-4",
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this safe to drop regarding the browser support of the project, or does it only apply to iOS native apps?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

its not supported anymore, tailwindlabs/tailwindcss#2573
We will test it and see if it is still ok

"border border-grey-3 absolute z-dropdownMenu bg-white cursor-normal inset-x-0 list-reset overflow-y-scroll custom-scrollbar max-h-dropdownSM md:max-h-dropdown py-10 shadow-soft rounded-4",
className
),
onMouseLeave: () => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/fieldHelpers/withValidationError.tsx
View file
Open in desktop
Expand Up @@ -9,7 +9,7 @@ const WithValidationError: FC<Props> = ({ error, children }) => {
return (
<div className="relative pb-px">
{error && (
<div className="text-xs text-salmon absolute bottom-validationError validation-errorMessage whitespace-no-wrap">
<div className="text-xs text-salmon absolute bottom-validationError validation-errorMessage whitespace-nowrap">
{error}
</div>
)}
Expand Down
4 changes: 2 additions & 2 deletions src/components/modal/index.tsx
View file
Open in desktop
Expand Up @@ -53,11 +53,11 @@ const Modal: FC<ModalProps> = ({
}, [])

return (
<div className="fixed inset-0 scrolling-touch overflow-y-scroll md:overflow-y-auto z-modal min-h-full transition duration-200 flex flex-col justify-center items-center">
<div className="fixed inset-0 overflow-y-scroll md:overflow-y-auto z-modal min-h-full transition duration-200 flex flex-col justify-center items-center">
<Overlay handleClick={handleClose} />
<div
className={classNames(
"min-h-full max-h-full scrolling-touch fixed inline-block",
"min-h-full max-h-full fixed inline-block",
overflowClass,
size === "fullscreen"
? "inset-0"
Expand Down
8 changes: 4 additions & 4 deletions src/hooks/__tests__/__snapshots__/useModal.test.tsx.snap
View file
Open in desktop
Expand Up @@ -5,14 +5,14 @@ exports[`useModal with a portal renders the modal within the portal 1`] = `
data-testid="modal-wrapper"
>
<div
class="fixed inset-0 scrolling-touch overflow-y-scroll md:overflow-y-auto z-modal min-h-full transition duration-200 flex flex-col justify-center items-center"
class="fixed inset-0 overflow-y-scroll md:overflow-y-auto z-modal min-h-full transition duration-200 flex flex-col justify-center items-center"
>
<div
class="absolute inset-0 bg-grey-dark opacity-40 transition duration-200"
data-testid="modal-overlay"
/>
<div
class="min-h-full max-h-full scrolling-touch fixed inline-block md:overflow-y-auto overflow-y-scroll inset-x-0 md:min-h-auto md:align-middle md:inset-auto md:relative h-full md:h-auto rounded-4 bg-white"
class="min-h-full max-h-full fixed inline-block md:overflow-y-auto overflow-y-scroll inset-x-0 md:min-h-auto md:align-middle md:inset-auto md:relative h-full md:h-auto rounded-4 bg-white"
role="dialog"
>
<div
Expand Down Expand Up @@ -80,14 +80,14 @@ exports[`useModal without portal renders the modal within the container 1`] = `
Open modal
</button>
<div
class="fixed inset-0 scrolling-touch overflow-y-scroll md:overflow-y-auto z-modal min-h-full transition duration-200 flex flex-col justify-center items-center"
class="fixed inset-0 overflow-y-scroll md:overflow-y-auto z-modal min-h-full transition duration-200 flex flex-col justify-center items-center"
>
<div
class="absolute inset-0 bg-grey-dark opacity-40 transition duration-200"
data-testid="modal-overlay"
/>
<div
class="min-h-full max-h-full scrolling-touch fixed inline-block md:overflow-y-auto overflow-y-scroll inset-x-0 md:min-h-auto md:align-middle md:inset-auto md:relative h-full md:h-auto rounded-4 bg-white"
class="min-h-full max-h-full fixed inline-block md:overflow-y-auto overflow-y-scroll inset-x-0 md:min-h-auto md:align-middle md:inset-auto md:relative h-full md:h-auto rounded-4 bg-white"
role="dialog"
>
<div
Expand Down
8 changes: 4 additions & 4 deletions src/tailwind/defaultConfig.ts
View file
Open in desktop
Expand Up @@ -116,7 +116,7 @@ export default {
*/
borderColor: (theme) => ({
...theme("colors"),
default: theme("colors.grey-light", "currentColor"),
DEFAULT: theme("colors.grey-light", "currentColor"),
}),

/*
Expand All @@ -129,7 +129,7 @@ export default {
*/
borderRadius: {
none: "0",
default: "4px",
DEFAULT: "4px",
full: "9999px",
half: "50%",
"2": "2px",
Expand All @@ -149,7 +149,7 @@ export default {
|
*/
borderWidth: {
default: "1px",
DEFAULT: "1px",
"0": "0",
"2": "2px",
"5": "5px",
Expand All @@ -168,7 +168,7 @@ export default {
*/
boxShadow: {
none: "none",
default: "0 2px 4px 0 rgba(0,0,0,0.10)",
DEFAULT: "0 2px 4px 0 rgba(0,0,0,0.10)",
small: "0 2px 6px 0 rgba(35,42,54,0.1)",
soft: "0 4px 18px 0 rgba(35,42,54,0.1)",
hard: "0 4px 18px 0 rgba(35,42,54,0.4)",
Expand Down