fix react-ace/tailwind css collision (fixes #672)
Also: fix preflight configuration
This commit is contained in:
parent
ae3224b25e
commit
2842965913
|
@ -30,7 +30,6 @@
|
||||||
"@storybook/node-logger": "^6.5.6",
|
"@storybook/node-logger": "^6.5.6",
|
||||||
"@storybook/preset-create-react-app": "^4.1.2",
|
"@storybook/preset-create-react-app": "^4.1.2",
|
||||||
"@storybook/react": "^6.5.8",
|
"@storybook/react": "^6.5.8",
|
||||||
"@tailwindcss/forms": "^0.5.2",
|
|
||||||
"@testing-library/jest-dom": "^5.16.4",
|
"@testing-library/jest-dom": "^5.16.4",
|
||||||
"@testing-library/react": "^13.3.0",
|
"@testing-library/react": "^13.3.0",
|
||||||
"@testing-library/user-event": "^14.2.0",
|
"@testing-library/user-event": "^14.2.0",
|
||||||
|
|
|
@ -129,6 +129,7 @@ export const CheckBox: React.FC<CheckBoxProps> = ({
|
||||||
value={value + ""}
|
value={value + ""}
|
||||||
onChange={() => onChange(!value)}
|
onChange={() => onChange(!value)}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
|
className="form-checkbox"
|
||||||
/>
|
/>
|
||||||
<label className={clsx(disabled && "text-slate-400")}> {label}</label>
|
<label className={clsx(disabled && "text-slate-400")}> {label}</label>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -162,7 +162,7 @@ function InputItem<T>({
|
||||||
<input
|
<input
|
||||||
type={type}
|
type={type}
|
||||||
{...register(name)}
|
{...register(name)}
|
||||||
className="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md"
|
className="form-input max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md"
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
);
|
);
|
||||||
|
@ -182,7 +182,7 @@ function Checkbox<T>({
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
{...register(name)}
|
{...register(name)}
|
||||||
className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
className="form-checkbox focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
||||||
/>
|
/>
|
||||||
{/* 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. */}
|
{/* 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. */}
|
||||||
<div className="ml-3 text-sm font-medium text-gray-700">{label}</div>
|
<div className="ml-3 text-sm font-medium text-gray-700">{label}</div>
|
||||||
|
|
|
@ -368,143 +368,4 @@ video {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
102
packages/components/src/styles/forms.css
Normal file
102
packages/components/src/styles/forms.css
Normal file
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,8 +1,24 @@
|
||||||
|
/*
|
||||||
|
Fork of tailwind's preflight with `.squiggle` scoping.
|
||||||
|
*/
|
||||||
@import "./base.css";
|
@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 components;
|
||||||
@tailwind utilities;
|
@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 {
|
.ace_cursor {
|
||||||
border-left: 2px solid !important;
|
border-left: 2px solid !important;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,10 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: ["./src/**/*.{html,tsx,ts,js,jsx}"],
|
content: ["./src/**/*.{html,tsx,ts,js,jsx}"],
|
||||||
|
corePlugins: {
|
||||||
|
preflight: false,
|
||||||
|
},
|
||||||
|
important: ".squiggle",
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {},
|
||||||
},
|
},
|
||||||
important: ".squiggle",
|
|
||||||
plugins: [require("@tailwindcss/forms")],
|
|
||||||
};
|
};
|
||||||
|
|
12
yarn.lock
12
yarn.lock
|
@ -4136,13 +4136,6 @@
|
||||||
dependencies:
|
dependencies:
|
||||||
defer-to-connect "^1.0.1"
|
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":
|
"@testing-library/dom@^8.5.0":
|
||||||
version "8.13.0"
|
version "8.13.0"
|
||||||
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.13.0.tgz#bc00bdd64c7d8b40841e27a70211399ad3af46f5"
|
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:
|
dependencies:
|
||||||
schema-utils "^4.0.0"
|
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:
|
minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
|
||||||
version "1.0.1"
|
version "1.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
|
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
|
||||||
|
|
Loading…
Reference in New Issue
Block a user