From f30d9c282e586ac08aaa45a5dcd423d6fc4bd1ea Mon Sep 17 00:00:00 2001 From: Lendemor Date: Wed, 18 Jun 2025 16:45:17 +0200 Subject: [PATCH 1/5] fix default body style --- reflex/compiler/utils.py | 1 + 1 file changed, 1 insertion(+) diff --git a/reflex/compiler/utils.py b/reflex/compiler/utils.py index 19223a47678..b345acef090 100644 --- a/reflex/compiler/utils.py +++ b/reflex/compiler/utils.py @@ -368,6 +368,7 @@ def create_document_root( Var("children"), ScrollRestoration.create(), Scripts.create(), + margin=0, ), lang=html_lang or "en", custom_attrs=html_custom_attrs or {}, From e532b73d2a128388c28b40dab62bb99425d4f671 Mon Sep 17 00:00:00 2001 From: Lendemor Date: Wed, 18 Jun 2025 22:41:14 +0200 Subject: [PATCH 2/5] wip vendored preflight --- .../web/styles/__reflex_style_reset.css | 385 ++++++++++++++++++ reflex/app.py | 7 +- reflex/compiler/compiler.py | 32 +- reflex/compiler/utils.py | 1 - reflex/constants/compiler.py | 7 + 5 files changed, 421 insertions(+), 11 deletions(-) create mode 100644 reflex/.templates/web/styles/__reflex_style_reset.css diff --git a/reflex/.templates/web/styles/__reflex_style_reset.css b/reflex/.templates/web/styles/__reflex_style_reset.css new file mode 100644 index 00000000000..0976a40d492 --- /dev/null +++ b/reflex/.templates/web/styles/__reflex_style_reset.css @@ -0,0 +1,385 @@ +/* + 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) + 2. Remove default margins and padding + 3. Reset all borders. +*/ + +*, +::after, +::before, +::backdrop, +::file-selector-button { + box-sizing: border-box; /* 1 */ + margin: 0; /* 2 */ + padding: 0; /* 2 */ + border: 0 solid; /* 3 */ +} + +/* + 1. Use a consistent sensible line-height in all browsers. + 2. Prevent adjustments of font size after orientation changes in iOS. + 3. Use a more readable tab size. + 4. Use the user's configured `sans` font-family by default. + 5. Use the user's configured `sans` font-feature-settings by default. + 6. Use the user's configured `sans` font-variation-settings by default. + 7. Disable tap highlights on iOS. +*/ + +html, +:host { + line-height: 1.5; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + tab-size: 4; /* 3 */ + font-family: --theme( + --default-font-family, + ui-sans-serif, + system-ui, + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji' + ); /* 4 */ + font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */ + font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */ + -webkit-tap-highlight-color: transparent; /* 7 */ +} + +/* + 1. Add the correct height in Firefox. + 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) + 3. Reset the default border style to a 1px solid border. +*/ + +hr { + height: 0; /* 1 */ + color: inherit; /* 2 */ + border-top-width: 1px; /* 3 */ +} + +/* + Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* + Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* + Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; +} + +/* + Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* + 1. Use the user's configured `mono` font-family by default. + 2. Use the user's configured `mono` font-feature-settings by default. + 3. Use the user's configured `mono` font-variation-settings by default. + 4. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: --theme( + --default-mono-font-family, + ui-monospace, + SFMono-Regular, + Menlo, + Monaco, + Consolas, + 'Liberation Mono', + 'Courier New', + monospace + ); /* 1 */ + font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */ + font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */ + font-size: 1em; /* 4 */ +} + +/* + Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* + Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* + 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) + 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) + 3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; /* 1 */ + border-color: inherit; /* 2 */ + border-collapse: collapse; /* 3 */ +} + +/* + Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* + Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* + Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* + Make lists unstyled by default. +*/ + +ol, +ul, +menu { + list-style: none; +} + +/* + 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) + 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; /* 1 */ + vertical-align: middle; /* 2 */ +} + +/* + Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* + 1. Inherit font styles in all browsers. + 2. Remove border radius in all browsers. + 3. Remove background color in all browsers. + 4. Ensure consistent opacity for disabled states in all browsers. +*/ + +button, +input, +select, +optgroup, +textarea, +::file-selector-button { + font: inherit; /* 1 */ + font-feature-settings: inherit; /* 1 */ + font-variation-settings: inherit; /* 1 */ + letter-spacing: inherit; /* 1 */ + color: inherit; /* 1 */ + border-radius: 0; /* 2 */ + background-color: transparent; /* 3 */ + opacity: 1; /* 4 */ +} + +/* + Restore default font weight. +*/ + +:where(select:is([multiple], [size])) optgroup { + font-weight: bolder; +} + +/* + Restore indentation. +*/ + +:where(select:is([multiple], [size])) optgroup option { + padding-inline-start: 20px; +} + +/* + Restore space after button. +*/ + +::file-selector-button { + margin-inline-end: 4px; +} + +/* + Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +*/ + +::placeholder { + opacity: 1; +} + +/* + Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not + crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194) +*/ + +@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or + (contain-intrinsic-size: 1px) /* Safari 17+ */ { + ::placeholder { + color: color-mix(in oklab, currentcolor 50%, transparent); + } +} + +/* + Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* + Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* + 1. Ensure date/time inputs have the same height when empty in iOS Safari. + 2. Ensure text alignment can be changed on date/time inputs in iOS Safari. +*/ + +::-webkit-date-and-time-value { + min-height: 1lh; /* 1 */ + text-align: inherit; /* 2 */ +} + +/* + Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`. +*/ + +::-webkit-datetime-edit { + display: inline-flex; +} + +/* + Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers. +*/ + +::-webkit-datetime-edit-fields-wrapper { + padding: 0; +} + +::-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-block: 0; +} + +/* + Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* + Correct the inability to style the border radius in iOS Safari. +*/ + +button, +input:where([type='button'], [type='reset'], [type='submit']), +::file-selector-button { + appearance: button; +} + +/* + Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* + Make elements with the HTML hidden attribute stay hidden by default. +*/ + +[hidden]:where(:not([hidden='until-found'])) { + display: none !important; +} diff --git a/reflex/app.py b/reflex/app.py index 145e32d0a77..cb753e02824 100644 --- a/reflex/app.py +++ b/reflex/app.py @@ -332,6 +332,9 @@ class App(MiddlewareMixin, LifespanMixin): # A list of URLs to [stylesheets](https://reflex.dev/docs/styling/custom-stylesheets/) to include in the app. stylesheets: list[str] = dataclasses.field(default_factory=list) + # Whether to include CSS reset for margin and padding (defaults to True). + reset_style: bool = dataclasses.field(default=True) + # A component that is present on every page (defaults to the Connection Error banner). overlay_component: Component | ComponentCallable | None = dataclasses.field( default=None @@ -1358,7 +1361,9 @@ def _submit_work( ) # Compile the root stylesheet with base styles. - _submit_work(compiler.compile_root_stylesheet, self.stylesheets) + _submit_work( + compiler.compile_root_stylesheet, self.stylesheets, self.reset_style + ) # Compile the theme. _submit_work(compile_theme, self.style) diff --git a/reflex/compiler/compiler.py b/reflex/compiler/compiler.py index d92316d7129..e325fa6353f 100644 --- a/reflex/compiler/compiler.py +++ b/reflex/compiler/compiler.py @@ -19,7 +19,7 @@ StatefulComponent, ) from reflex.config import get_config -from reflex.constants.compiler import PageNames +from reflex.constants.compiler import PageNames, ResetStylesheet from reflex.constants.state import FIELD_MARKER from reflex.environment import environment from reflex.state import BaseState @@ -171,18 +171,21 @@ def _compile_page( ) -def compile_root_stylesheet(stylesheets: list[str]) -> tuple[str, str]: +def compile_root_stylesheet( + stylesheets: list[str], reset_style: bool = True +) -> tuple[str, str]: """Compile the root stylesheet. Args: stylesheets: The stylesheets to include in the root stylesheet. + reset_style: Whether to include CSS reset for margin and padding. Returns: The path and code of the compiled root stylesheet. """ output_path = utils.get_root_stylesheet_path() - code = _compile_root_stylesheet(stylesheets) + code = _compile_root_stylesheet(stylesheets, reset_style) return output_path, code @@ -224,11 +227,12 @@ def _validate_stylesheet(stylesheet_full_path: Path, assets_app_path: Path) -> N RADIX_THEMES_STYLESHEET = "@radix-ui/themes/styles.css" -def _compile_root_stylesheet(stylesheets: list[str]) -> str: +def _compile_root_stylesheet(stylesheets: list[str], reset_style: bool = True) -> str: """Compile the root stylesheet. Args: stylesheets: The stylesheets to include in the root stylesheet. + reset_style: Whether to include CSS reset for margin and padding. Returns: The compiled root stylesheet. @@ -237,11 +241,21 @@ def _compile_root_stylesheet(stylesheets: list[str]) -> str: FileNotFoundError: If a specified stylesheet in assets directory does not exist. """ # Add stylesheets from plugins. - sheets = [RADIX_THEMES_STYLESHEET] + [ - sheet - for plugin in get_config().plugins - for sheet in plugin.get_stylesheet_paths() - ] + sheets = [] + + # Add CSS reset if enabled + if reset_style: + # Reference the vendored style reset file (automatically copied from .templates/web) + sheets.append(f"./styles/{ResetStylesheet.FILENAME}") + + sheets.extend( + [RADIX_THEMES_STYLESHEET] + + [ + sheet + for plugin in get_config().plugins + for sheet in plugin.get_stylesheet_paths() + ] + ) failed_to_import_sass = False assets_app_path = Path.cwd() / constants.Dirs.APP_ASSETS diff --git a/reflex/compiler/utils.py b/reflex/compiler/utils.py index b345acef090..19223a47678 100644 --- a/reflex/compiler/utils.py +++ b/reflex/compiler/utils.py @@ -368,7 +368,6 @@ def create_document_root( Var("children"), ScrollRestoration.create(), Scripts.create(), - margin=0, ), lang=html_lang or "en", custom_attrs=html_custom_attrs or {}, diff --git a/reflex/constants/compiler.py b/reflex/constants/compiler.py index 09e131db038..e995164c6ba 100644 --- a/reflex/constants/compiler.py +++ b/reflex/constants/compiler.py @@ -204,3 +204,10 @@ def is_special(cls, attr: str) -> bool: True if the attribute is special. """ return attr.startswith(SPECIAL_ATTRS) + + +class ResetStylesheet(SimpleNamespace): + """Constants for CSS reset stylesheet.""" + + # The filename of the CSS reset file. + FILENAME = "__reflex_style_reset.css" From 6922b4d687f43e116e18cf679817085c777fef41 Mon Sep 17 00:00:00 2001 From: Lendemor Date: Wed, 18 Jun 2025 22:47:08 +0200 Subject: [PATCH 3/5] fricking dumb claude --- reflex/compiler/compiler.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/reflex/compiler/compiler.py b/reflex/compiler/compiler.py index e325fa6353f..f5dcf1101a4 100644 --- a/reflex/compiler/compiler.py +++ b/reflex/compiler/compiler.py @@ -246,7 +246,7 @@ def _compile_root_stylesheet(stylesheets: list[str], reset_style: bool = True) - # Add CSS reset if enabled if reset_style: # Reference the vendored style reset file (automatically copied from .templates/web) - sheets.append(f"./styles/{ResetStylesheet.FILENAME}") + sheets.append(f"./{ResetStylesheet.FILENAME}") sheets.extend( [RADIX_THEMES_STYLESHEET] From a503a3b7f416d36148600e2978fb8dcbd930d423 Mon Sep 17 00:00:00 2001 From: Lendemor Date: Wed, 18 Jun 2025 23:36:47 +0200 Subject: [PATCH 4/5] fix layer issue --- .../web/styles/__reflex_style_reset.css | 660 +++++++++--------- 1 file changed, 337 insertions(+), 323 deletions(-) diff --git a/reflex/.templates/web/styles/__reflex_style_reset.css b/reflex/.templates/web/styles/__reflex_style_reset.css index 0976a40d492..85799f60cf9 100644 --- a/reflex/.templates/web/styles/__reflex_style_reset.css +++ b/reflex/.templates/web/styles/__reflex_style_reset.css @@ -1,385 +1,399 @@ -/* - 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) - 2. Remove default margins and padding - 3. Reset all borders. -*/ - -*, -::after, -::before, -::backdrop, -::file-selector-button { - box-sizing: border-box; /* 1 */ - margin: 0; /* 2 */ - padding: 0; /* 2 */ - border: 0 solid; /* 3 */ -} +@layer __reflex_base { + /* + 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) + 2. Remove default margins and padding + 3. Reset all borders. + */ + + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + box-sizing: border-box; /* 1 */ + margin: 0; /* 2 */ + padding: 0; /* 2 */ + border: 0 solid; /* 3 */ + } -/* - 1. Use a consistent sensible line-height in all browsers. - 2. Prevent adjustments of font size after orientation changes in iOS. - 3. Use a more readable tab size. - 4. Use the user's configured `sans` font-family by default. - 5. Use the user's configured `sans` font-feature-settings by default. - 6. Use the user's configured `sans` font-variation-settings by default. - 7. Disable tap highlights on iOS. -*/ - -html, -:host { - line-height: 1.5; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - tab-size: 4; /* 3 */ - font-family: --theme( - --default-font-family, - ui-sans-serif, - system-ui, - sans-serif, - 'Apple Color Emoji', - 'Segoe UI Emoji', - 'Segoe UI Symbol', - 'Noto Color Emoji' - ); /* 4 */ - font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */ - font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */ - -webkit-tap-highlight-color: transparent; /* 7 */ -} + /* + 1. Use a consistent sensible line-height in all browsers. + 2. Prevent adjustments of font size after orientation changes in iOS. + 3. Use a more readable tab size. + 4. Use the user's configured `sans` font-family by default. + 5. Use the user's configured `sans` font-feature-settings by default. + 6. Use the user's configured `sans` font-variation-settings by default. + 7. Disable tap highlights on iOS. + */ + + html, + :host { + line-height: 1.5; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + tab-size: 4; /* 3 */ + font-family: --theme( + --default-font-family, + ui-sans-serif, + system-ui, + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji" + ); /* 4 */ + font-feature-settings: --theme( + --default-font-feature-settings, + normal + ); /* 5 */ + font-variation-settings: --theme( + --default-font-variation-settings, + normal + ); /* 6 */ + -webkit-tap-highlight-color: transparent; /* 7 */ + } -/* - 1. Add the correct height in Firefox. - 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) - 3. Reset the default border style to a 1px solid border. -*/ + /* + 1. Add the correct height in Firefox. + 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) + 3. Reset the default border style to a 1px solid border. + */ -hr { - height: 0; /* 1 */ - color: inherit; /* 2 */ - border-top-width: 1px; /* 3 */ -} + hr { + height: 0; /* 1 */ + color: inherit; /* 2 */ + border-top-width: 1px; /* 3 */ + } -/* - Add the correct text decoration in Chrome, Edge, and Safari. -*/ + /* + Add the correct text decoration in Chrome, Edge, and Safari. + */ -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} + abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + } -/* - Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} + /* + Remove the default font size and weight for headings. + */ + + h1, + h2, + h3, + h4, + h5, + h6 { + font-size: inherit; + font-weight: inherit; + } -/* - Reset links to optimize for opt-in styling instead of opt-out. -*/ + /* + Reset links to optimize for opt-in styling instead of opt-out. + */ -a { - color: inherit; - -webkit-text-decoration: inherit; - text-decoration: inherit; -} + a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; + } -/* - Add the correct font weight in Edge and Safari. -*/ + /* + Add the correct font weight in Edge and Safari. + */ -b, -strong { - font-weight: bolder; -} + b, + strong { + font-weight: bolder; + } -/* - 1. Use the user's configured `mono` font-family by default. - 2. Use the user's configured `mono` font-feature-settings by default. - 3. Use the user's configured `mono` font-variation-settings by default. - 4. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: --theme( - --default-mono-font-family, - ui-monospace, - SFMono-Regular, - Menlo, - Monaco, - Consolas, - 'Liberation Mono', - 'Courier New', - monospace - ); /* 1 */ - font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */ - font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */ - font-size: 1em; /* 4 */ -} + /* + 1. Use the user's configured `mono` font-family by default. + 2. Use the user's configured `mono` font-feature-settings by default. + 3. Use the user's configured `mono` font-variation-settings by default. + 4. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp, + pre { + font-family: --theme( + --default-mono-font-family, + ui-monospace, + SFMono-Regular, + Menlo, + Monaco, + Consolas, + "Liberation Mono", + "Courier New", + monospace + ); /* 1 */ + font-feature-settings: --theme( + --default-mono-font-feature-settings, + normal + ); /* 2 */ + font-variation-settings: --theme( + --default-mono-font-variation-settings, + normal + ); /* 3 */ + font-size: 1em; /* 4 */ + } -/* - Add the correct font size in all browsers. -*/ + /* + Add the correct font size in all browsers. + */ -small { - font-size: 80%; -} + small { + font-size: 80%; + } -/* - Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ + /* + Prevent `sub` and `sup` elements from affecting the line height in all browsers. + */ -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } -sub { - bottom: -0.25em; -} + sub { + bottom: -0.25em; + } -sup { - top: -0.5em; -} + sup { + top: -0.5em; + } -/* - 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) - 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) - 3. Remove gaps between table borders by default. -*/ + /* + 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) + 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) + 3. Remove gaps between table borders by default. + */ -table { - text-indent: 0; /* 1 */ - border-color: inherit; /* 2 */ - border-collapse: collapse; /* 3 */ -} + table { + text-indent: 0; /* 1 */ + border-color: inherit; /* 2 */ + border-collapse: collapse; /* 3 */ + } -/* - Use the modern Firefox focus style for all focusable elements. -*/ + /* + Use the modern Firefox focus style for all focusable elements. + */ -:-moz-focusring { - outline: auto; -} + :-moz-focusring { + outline: auto; + } -/* - Add the correct vertical alignment in Chrome and Firefox. -*/ + /* + Add the correct vertical alignment in Chrome and Firefox. + */ -progress { - vertical-align: baseline; -} + progress { + vertical-align: baseline; + } -/* - Add the correct display in Chrome and Safari. -*/ + /* + Add the correct display in Chrome and Safari. + */ -summary { - display: list-item; -} + summary { + display: list-item; + } -/* - Make lists unstyled by default. -*/ + /* + Make lists unstyled by default. + */ -ol, -ul, -menu { - list-style: none; -} + ol, + ul, + menu { + list-style: none; + } -/* - 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) - 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; /* 1 */ - vertical-align: middle; /* 2 */ -} + /* + 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) + 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. + */ + + img, + svg, + video, + canvas, + audio, + iframe, + embed, + object { + display: block; /* 1 */ + vertical-align: middle; /* 2 */ + } -/* - Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ + /* + Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) + */ -img, -video { - max-width: 100%; - height: auto; -} + img, + video { + max-width: 100%; + height: auto; + } -/* - 1. Inherit font styles in all browsers. - 2. Remove border radius in all browsers. - 3. Remove background color in all browsers. - 4. Ensure consistent opacity for disabled states in all browsers. -*/ - -button, -input, -select, -optgroup, -textarea, -::file-selector-button { - font: inherit; /* 1 */ - font-feature-settings: inherit; /* 1 */ - font-variation-settings: inherit; /* 1 */ - letter-spacing: inherit; /* 1 */ - color: inherit; /* 1 */ - border-radius: 0; /* 2 */ - background-color: transparent; /* 3 */ - opacity: 1; /* 4 */ -} + /* + 1. Inherit font styles in all browsers. + 2. Remove border radius in all browsers. + 3. Remove background color in all browsers. + 4. Ensure consistent opacity for disabled states in all browsers. + */ + + button, + input, + select, + optgroup, + textarea, + ::file-selector-button { + font: inherit; /* 1 */ + font-feature-settings: inherit; /* 1 */ + font-variation-settings: inherit; /* 1 */ + letter-spacing: inherit; /* 1 */ + color: inherit; /* 1 */ + border-radius: 0; /* 2 */ + background-color: transparent; /* 3 */ + opacity: 1; /* 4 */ + } -/* - Restore default font weight. -*/ + /* + Restore default font weight. + */ -:where(select:is([multiple], [size])) optgroup { - font-weight: bolder; -} + :where(select:is([multiple], [size])) optgroup { + font-weight: bolder; + } -/* - Restore indentation. -*/ + /* + Restore indentation. + */ -:where(select:is([multiple], [size])) optgroup option { - padding-inline-start: 20px; -} + :where(select:is([multiple], [size])) optgroup option { + padding-inline-start: 20px; + } -/* - Restore space after button. -*/ + /* + Restore space after button. + */ -::file-selector-button { - margin-inline-end: 4px; -} + ::file-selector-button { + margin-inline-end: 4px; + } -/* - Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -*/ + /* + Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) + */ -::placeholder { - opacity: 1; -} + ::placeholder { + opacity: 1; + } -/* - Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not - crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194) -*/ + /* + Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not + crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194) + */ -@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or - (contain-intrinsic-size: 1px) /* Safari 17+ */ { - ::placeholder { - color: color-mix(in oklab, currentcolor 50%, transparent); + @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or + (contain-intrinsic-size: 1px) /* Safari 17+ */ { + ::placeholder { + color: color-mix(in oklab, currentcolor 50%, transparent); + } } -} -/* - Prevent resizing textareas horizontally by default. -*/ + /* + Prevent resizing textareas horizontally by default. + */ -textarea { - resize: vertical; -} + textarea { + resize: vertical; + } -/* - Remove the inner padding in Chrome and Safari on macOS. -*/ + /* + Remove the inner padding in Chrome and Safari on macOS. + */ -::-webkit-search-decoration { - -webkit-appearance: none; -} + ::-webkit-search-decoration { + -webkit-appearance: none; + } -/* - 1. Ensure date/time inputs have the same height when empty in iOS Safari. - 2. Ensure text alignment can be changed on date/time inputs in iOS Safari. -*/ + /* + 1. Ensure date/time inputs have the same height when empty in iOS Safari. + 2. Ensure text alignment can be changed on date/time inputs in iOS Safari. + */ -::-webkit-date-and-time-value { - min-height: 1lh; /* 1 */ - text-align: inherit; /* 2 */ -} + ::-webkit-date-and-time-value { + min-height: 1lh; /* 1 */ + text-align: inherit; /* 2 */ + } -/* - Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`. -*/ + /* + Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`. + */ -::-webkit-datetime-edit { - display: inline-flex; -} + ::-webkit-datetime-edit { + display: inline-flex; + } -/* - Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers. -*/ + /* + Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers. + */ -::-webkit-datetime-edit-fields-wrapper { - padding: 0; -} + ::-webkit-datetime-edit-fields-wrapper { + padding: 0; + } -::-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-block: 0; -} + ::-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-block: 0; + } -/* - Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ + /* + Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) + */ -:-moz-ui-invalid { - box-shadow: none; -} + :-moz-ui-invalid { + box-shadow: none; + } -/* - Correct the inability to style the border radius in iOS Safari. -*/ + /* + Correct the inability to style the border radius in iOS Safari. + */ -button, -input:where([type='button'], [type='reset'], [type='submit']), -::file-selector-button { - appearance: button; -} + button, + input:where([type="button"], [type="reset"], [type="submit"]), + ::file-selector-button { + appearance: button; + } -/* - Correct the cursor style of increment and decrement buttons in Safari. -*/ + /* + Correct the cursor style of increment and decrement buttons in Safari. + */ -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} + ::-webkit-inner-spin-button, + ::-webkit-outer-spin-button { + height: auto; + } -/* - Make elements with the HTML hidden attribute stay hidden by default. -*/ + /* + Make elements with the HTML hidden attribute stay hidden by default. + */ -[hidden]:where(:not([hidden='until-found'])) { - display: none !important; + [hidden]:where(:not([hidden="until-found"])) { + display: none !important; + } } From 27c95a25ce5fbcba4da1e63f863fa184516648ec Mon Sep 17 00:00:00 2001 From: Lendemor Date: Thu, 19 Jun 2025 00:43:06 +0200 Subject: [PATCH 5/5] fix unit tests --- tests/units/compiler/test_compiler.py | 42 +++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/tests/units/compiler/test_compiler.py b/tests/units/compiler/test_compiler.py index bcf21a0a019..070debd9a9e 100644 --- a/tests/units/compiler/test_compiler.py +++ b/tests/units/compiler/test_compiler.py @@ -158,6 +158,7 @@ def test_compile_stylesheets(tmp_path: Path, mocker: MockerFixture): / "styles" / (PageNames.STYLESHEET_ROOT + ".css") ), + "@import url('./__reflex_style_reset.css'); \n" "@import url('@radix-ui/themes/styles.css'); \n" "@import url('https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple'); \n" "@import url('https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css'); \n" @@ -218,6 +219,7 @@ def test_compile_stylesheets_scss_sass(tmp_path: Path, mocker: MockerFixture): / "styles" / (PageNames.STYLESHEET_ROOT + ".css") ), + "@import url('./__reflex_style_reset.css'); \n" "@import url('@radix-ui/themes/styles.css'); \n" "@import url('./style.css'); \n" f"@import url('./{Path('preprocess') / Path('styles_a.css')!s}'); \n" @@ -236,6 +238,7 @@ def test_compile_stylesheets_scss_sass(tmp_path: Path, mocker: MockerFixture): / "styles" / (PageNames.STYLESHEET_ROOT + ".css") ), + "@import url('./__reflex_style_reset.css'); \n" "@import url('@radix-ui/themes/styles.css'); \n" "@import url('./style.css'); \n" f"@import url('./{Path('preprocess') / Path('styles_a.css')!s}'); \n" @@ -282,6 +285,45 @@ def test_compile_stylesheets_exclude_tailwind(tmp_path, mocker: MockerFixture): assert compiler.compile_root_stylesheet(stylesheets) == ( str(Path(".web") / "styles" / (PageNames.STYLESHEET_ROOT + ".css")), + "@import url('./__reflex_style_reset.css'); \n@import url('@radix-ui/themes/styles.css'); \n@import url('./style.css'); \n", + ) + + +def test_compile_stylesheets_no_reset(tmp_path: Path, mocker: MockerFixture): + """Test that stylesheets compile correctly without reset styles. + + Args: + tmp_path: The test directory. + mocker: Pytest mocker object. + """ + project = tmp_path / "test_project" + project.mkdir() + + assets_dir = project / "assets" + assets_dir.mkdir() + + (assets_dir / "style.css").write_text( + "button.rt-Button {\n\tborder-radius:unset !important;\n}" + ) + mocker.patch("reflex.compiler.compiler.Path.cwd", return_value=project) + mocker.patch( + "reflex.compiler.compiler.get_web_dir", + return_value=project / constants.Dirs.WEB, + ) + mocker.patch( + "reflex.compiler.utils.get_web_dir", return_value=project / constants.Dirs.WEB + ) + + stylesheets = ["/style.css"] + + # Test with reset_style=False + assert compiler.compile_root_stylesheet(stylesheets, reset_style=False) == ( + str( + project + / constants.Dirs.WEB + / "styles" + / (PageNames.STYLESHEET_ROOT + ".css") + ), "@import url('@radix-ui/themes/styles.css'); \n@import url('./style.css'); \n", )