From 2842965913784352f57c85cd48646f274f0ac218 Mon Sep 17 00:00:00 2001 From: Vyacheslav Matyukhin Date: Tue, 14 Jun 2022 11:42:20 +0300 Subject: [PATCH] fix react-ace/tailwind css collision (fixes #672) Also: fix preflight configuration --- packages/components/package.json | 1 - .../src/components/DistributionChart.tsx | 1 + .../src/components/SquigglePlayground.tsx | 4 +- packages/components/src/styles/base.css | 139 ------------------ packages/components/src/styles/forms.css | 102 +++++++++++++ packages/components/src/styles/main.css | 18 ++- packages/components/tailwind.config.js | 6 +- yarn.lock | 12 -- 8 files changed, 126 insertions(+), 157 deletions(-) create mode 100644 packages/components/src/styles/forms.css diff --git a/packages/components/package.json b/packages/components/package.json index 98b70140..b0e62775 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -30,7 +30,6 @@ "@storybook/node-logger": "^6.5.6", "@storybook/preset-create-react-app": "^4.1.2", "@storybook/react": "^6.5.8", - "@tailwindcss/forms": "^0.5.2", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^14.2.0", diff --git a/packages/components/src/components/DistributionChart.tsx b/packages/components/src/components/DistributionChart.tsx index 4069165b..f2ca811b 100644 --- a/packages/components/src/components/DistributionChart.tsx +++ b/packages/components/src/components/DistributionChart.tsx @@ -129,6 +129,7 @@ export const CheckBox: React.FC = ({ value={value + ""} onChange={() => onChange(!value)} disabled={disabled} + className="form-checkbox" /> diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx index 84939f62..a0615ca4 100644 --- a/packages/components/src/components/SquigglePlayground.tsx +++ b/packages/components/src/components/SquigglePlayground.tsx @@ -162,7 +162,7 @@ function InputItem({ ); @@ -182,7 +182,7 @@ function Checkbox({ {/* Clicking on the div makes the checkbox lose focus while mouse button is pressed, leading to annoying blinking; I couldn't figure out how to fix this. */}
{label}
diff --git a/packages/components/src/styles/base.css b/packages/components/src/styles/base.css index 9c4e05dd..e0a33a56 100644 --- a/packages/components/src/styles/base.css +++ b/packages/components/src/styles/base.css @@ -368,143 +368,4 @@ video { max-width: 100%; height: auto; } - -/* these styles were generated by tailwindcss-forms */ -[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select { - appearance: none; - background-color: #fff; - border-color: #6b7280; - border-width: 1px; - border-radius: 0px; - padding-top: 0.5rem; - padding-right: 0.75rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - font-size: 1rem; - line-height: 1.5rem; - --tw-shadow: 0 0 #0000; -} -[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: #2563eb; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - border-color: #2563eb; -} -input::placeholder,textarea::placeholder { - color: #6b7280; - opacity: 1; -} -::-webkit-datetime-edit-fields-wrapper { - padding: 0; -} -::-webkit-date-and-time-value { - min-height: 1.5em; -} -::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field { - padding-top: 0; - padding-bottom: 0; -} -select { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); - background-position: right 0.5rem center; - background-repeat: no-repeat; - background-size: 1.5em 1.5em; - padding-right: 2.5rem; - -webkit-print-color-adjust: exact; - print-color-adjust: exact; -} -[multiple] { - background-image: initial; - background-position: initial; - background-repeat: unset; - background-size: initial; - padding-right: 0.75rem; - -webkit-print-color-adjust: unset; - print-color-adjust: unset; -} -[type='checkbox'],[type='radio'] { - appearance: none; - padding: 0; - -webkit-print-color-adjust: exact; - print-color-adjust: exact; - display: inline-block; - vertical-align: middle; - background-origin: border-box; - -webkit-user-select: none; - user-select: none; - flex-shrink: 0; - height: 1rem; - width: 1rem; - color: #2563eb; - background-color: #fff; - border-color: #6b7280; - border-width: 1px; - --tw-shadow: 0 0 #0000; -} -[type='checkbox'] { - border-radius: 0px; -} -[type='radio'] { - border-radius: 100%; -} -[type='checkbox']:focus,[type='radio']:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); - --tw-ring-offset-width: 2px; - --tw-ring-offset-color: #fff; - --tw-ring-color: #2563eb; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); -} -[type='checkbox']:checked,[type='radio']:checked { - border-color: transparent; - background-color: currentColor; - background-size: 100% 100%; - background-position: center; - background-repeat: no-repeat; -} -[type='checkbox']:checked { - background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); -} -[type='radio']:checked { - background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); -} -[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus { - border-color: transparent; - background-color: currentColor; -} -[type='checkbox']:indeterminate { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); - border-color: transparent; - background-color: currentColor; - background-size: 100% 100%; - background-position: center; - background-repeat: no-repeat; -} -[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus { - border-color: transparent; - background-color: currentColor; -} -[type='file'] { - background: unset; - border-color: inherit; - border-width: 0; - border-radius: 0; - padding: 0; - font-size: unset; - line-height: inherit; -} -[type='file']:focus { - outline: 1px solid ButtonText; - outline: 1px auto -webkit-focus-ring-color; -} - } diff --git a/packages/components/src/styles/forms.css b/packages/components/src/styles/forms.css new file mode 100644 index 00000000..60b4075d --- /dev/null +++ b/packages/components/src/styles/forms.css @@ -0,0 +1,102 @@ +/* Fork of https://github.com/tailwindlabs/tailwindcss-forms styles, see the comment in main.css for details. */ +.squiggle { +.form-input,.form-textarea,.form-select,.form-multiselect { +appearance: none; +background-color: #fff; +border-color: #6b7280; +border-width: 1px; +border-radius: 0px; +padding-top: 0.5rem; +padding-right: 0.75rem; +padding-bottom: 0.5rem; +padding-left: 0.75rem; +font-size: 1rem; +line-height: 1.5rem; +--tw-shadow: 0 0 #0000; +} +.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus { +outline: 2px solid transparent; +outline-offset: 2px; +--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); +--tw-ring-offset-width: 0px; +--tw-ring-offset-color: #fff; +--tw-ring-color: #2563eb; +--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); +--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); +box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); +border-color: #2563eb; +} +.form-input::placeholder,.form-textarea::placeholder { +color: #6b7280; +opacity: 1; +} +.form-input::-webkit-datetime-edit-fields-wrapper { +padding: 0; +} +.form-input::-webkit-date-and-time-value { +min-height: 1.5em; +} +.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field { +padding-top: 0; +padding-bottom: 0; +} +.form-checkbox,.form-radio { +appearance: none; +padding: 0; +-webkit-print-color-adjust: exact; + print-color-adjust: exact; +display: inline-block; +vertical-align: middle; +background-origin: border-box; +-webkit-user-select: none; + user-select: none; +flex-shrink: 0; +height: 1rem; +width: 1rem; +color: #2563eb; +background-color: #fff; +border-color: #6b7280; +border-width: 1px; +--tw-shadow: 0 0 #0000; +} +.form-checkbox { +border-radius: 0px; +} +.form-checkbox:focus,.form-radio:focus { +outline: 2px solid transparent; +outline-offset: 2px; +--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); +--tw-ring-offset-width: 2px; +--tw-ring-offset-color: #fff; +--tw-ring-color: #2563eb; +--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); +--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); +box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); +} +.form-checkbox:checked,.form-radio:checked { +border-color: transparent; +background-color: currentColor; +background-size: 100% 100%; +background-position: center; +background-repeat: no-repeat; +} +.form-checkbox:checked { +background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); +} +.form-checkbox:checked:hover,.form-checkbox:checked:focus,.form-radio:checked:hover,.form-radio:checked:focus { +border-color: transparent; +background-color: currentColor; +} +.form-checkbox:indeterminate { +background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); +border-color: transparent; +background-color: currentColor; +background-size: 100% 100%; +background-position: center; +background-repeat: no-repeat; +} +.form-checkbox:indeterminate:hover,.form-checkbox:indeterminate:focus { +border-color: transparent; +background-color: currentColor; +} +} diff --git a/packages/components/src/styles/main.css b/packages/components/src/styles/main.css index 78c72891..987c3714 100644 --- a/packages/components/src/styles/main.css +++ b/packages/components/src/styles/main.css @@ -1,8 +1,24 @@ +/* +Fork of tailwind's preflight with `.squiggle` scoping. +*/ @import "./base.css"; +/* +Fork of https://github.com/tailwindlabs/tailwindcss-forms styles (with strategy: "class"), but with `.squiggle` scoping. +This is necessary because tailwindcss-forms's css specificity is lower than preflight's specificity (`padding: 0` and so on), +so unscoped forms css with scoped preflight css, and there's no setting for scoping. +*/ +@import "./forms.css"; + +/* +This doesn't include tailwind's original preflight (it's disabled in tailwind.config.js), +but this line is still necessary for proper initialization of `--tw-*` variables. +*/ +@tailwind base; + @tailwind components; @tailwind utilities; -/* necessary hack because scoped preflight in ./base.css has higher specificity */ +/* Necessary hack because scoped preflight in ./base.css has higher specificity. */ .ace_cursor { border-left: 2px solid !important; } diff --git a/packages/components/tailwind.config.js b/packages/components/tailwind.config.js index 24db59b7..f059a98e 100644 --- a/packages/components/tailwind.config.js +++ b/packages/components/tailwind.config.js @@ -1,8 +1,10 @@ module.exports = { content: ["./src/**/*.{html,tsx,ts,js,jsx}"], + corePlugins: { + preflight: false, + }, + important: ".squiggle", theme: { extend: {}, }, - important: ".squiggle", - plugins: [require("@tailwindcss/forms")], }; diff --git a/yarn.lock b/yarn.lock index 70e61d72..c525b154 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4136,13 +4136,6 @@ dependencies: defer-to-connect "^1.0.1" -"@tailwindcss/forms@^0.5.2": - version "0.5.2" - resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.2.tgz#4ef45f9916dcb37838cbe7fecdcc4ba7a7c2ab59" - integrity sha512-pSrFeJB6Bg1Mrg9CdQW3+hqZXAKsBrSG9MAfFLKy1pVA4Mb4W7C0k7mEhlmS2Dfo/otxrQOET7NJiJ9RrS563w== - dependencies: - mini-svg-data-uri "^1.2.3" - "@testing-library/dom@^8.5.0": version "8.13.0" resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.13.0.tgz#bc00bdd64c7d8b40841e27a70211399ad3af46f5" @@ -12437,11 +12430,6 @@ mini-css-extract-plugin@^2.4.5, mini-css-extract-plugin@^2.6.0: dependencies: schema-utils "^4.0.0" -mini-svg-data-uri@^1.2.3: - version "1.4.4" - resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939" - integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg== - minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"