├── .cargo └── config ├── .github └── workflows │ ├── ci.yml │ ├── release.yml │ └── snapshot.yml ├── .gitignore ├── .gitmodules ├── .releaserc.json ├── CHANGELOG.md ├── Cargo.toml ├── LICENSE-APACHE ├── LICENSE-MIT ├── contributing.md ├── crates ├── swc-utils │ ├── Cargo.toml │ └── src │ │ └── lib.rs ├── tailwind-config │ ├── Cargo.toml │ └── src │ │ └── lib.rs ├── tailwind-parse-macro │ ├── Cargo.toml │ └── src │ │ └── lib.rs ├── tailwind-parse │ ├── Cargo.toml │ └── src │ │ ├── directive.rs │ │ ├── eval │ │ ├── macros.rs │ │ ├── mod.rs │ │ ├── plugin.rs │ │ ├── prose.rs │ │ └── util.rs │ │ ├── expression.rs │ │ ├── lib.rs │ │ ├── literal.rs │ │ ├── plugin.rs │ │ └── subject.rs └── test-generator │ ├── Cargo.toml │ └── src │ ├── lib.rs │ └── main.rs ├── data ├── form.css └── reset.css ├── examples ├── nextjs-emotion │ ├── .gitignore │ ├── README.md │ ├── next.config.js │ ├── package.json │ ├── pages │ │ ├── _app.tsx │ │ └── index.tsx │ ├── public │ │ ├── favicon.ico │ │ └── vercel.svg │ ├── tsconfig.json │ └── yarn.lock ├── nextjs-styled-components │ ├── .gitignore │ ├── README.md │ ├── next.config.js │ ├── package.json │ ├── pages │ │ ├── _app.tsx │ │ ├── _document.tsx │ │ └── index.tsx │ ├── public │ │ ├── favicon.ico │ │ └── vercel.svg │ ├── tsconfig.json │ └── yarn.lock ├── swc │ ├── .gitignore │ ├── index.html │ ├── index.tsx │ ├── install.js │ ├── package.json │ ├── tailwind.config.json │ └── yarn.lock └── vite │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── main.tsx │ ├── stailwc.d.ts │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock ├── index.d.ts ├── install.js ├── package.json ├── readme.md ├── rust-toolchain ├── split.js ├── src ├── css.rs ├── depth_stack.rs ├── engine │ ├── emotion.rs │ ├── mod.rs │ └── styled_components.rs ├── lib.rs ├── snapshot │ ├── arbitrary_properties_arbitrary_properties.rs │ ├── arbitrary_variants_arbitrary_variants.rs │ ├── auto_css_prop_auto_css_prop.rs │ ├── comments_comments.rs │ ├── config_config.rs │ ├── config_ts_config_ts.rs │ ├── content_content.rs │ ├── css_prop_emotion_auto_css_prop.rs │ ├── css_prop_emotion_auto_css_prop_with_styled.rs │ ├── css_prop_styled_components_auto_css_prop.rs │ ├── css_prop_styled_components_auto_css_prop_with_styled.rs │ ├── dark_light_mode_array_dark_light_mode_array.rs │ ├── directional_borders_directional_borders.rs │ ├── fixtures_general.rs │ ├── fixtures_important.rs │ ├── fixtures_ordering.rs │ ├── fixtures_variants.rs │ ├── fluid_container_fluid_container.rs │ ├── group_group.rs │ ├── include_class_names_include_class_names.rs │ ├── line_clamp_line_clamp.rs │ ├── mod.rs │ ├── negative_negative.rs │ ├── peers_peers.rs │ ├── plugin_aspect_ratio_plugin_aspect_ratio.rs │ ├── plugin_examples_plugin_examples.rs │ ├── plugin_forms_class_strategy_plugin_typography.rs │ ├── plugin_gap_fallback_plugin_gap_fallback.rs │ ├── plugin_typography_plugin_typography.rs │ ├── plugin_user_parent_selector_plugin_user_parent_selector.rs │ ├── plugins_plugins.rs │ ├── prefix_prefix.rs │ ├── preflight_preflight.rs │ ├── presets_presets.rs │ ├── sassy_pseudo_sassy_pseudo.rs │ ├── screen_import_screen_import.rs │ ├── screens_screens.rs │ ├── separator_separator.rs │ ├── short_css_short_css.rs │ ├── stitches_stitches_dot_syntax.rs │ ├── theme_values_to_string_theme_values_to_string.rs │ ├── user_plugin_ordering_user_plugin_ordering.rs │ ├── utilities_accessibility_screen_readers.rs │ ├── utilities_backgrounds_background_attachment.rs │ ├── utilities_backgrounds_background_clip.rs │ ├── utilities_backgrounds_background_color.rs │ ├── utilities_backgrounds_background_image.rs │ ├── utilities_backgrounds_background_opacity.rs │ ├── utilities_backgrounds_background_origin.rs │ ├── utilities_backgrounds_background_position.rs │ ├── utilities_backgrounds_background_repeat.rs │ ├── utilities_backgrounds_background_size.rs │ ├── utilities_backgrounds_gradient_color_stops.rs │ ├── utilities_borders_border_color.rs │ ├── utilities_borders_border_opacity.rs │ ├── utilities_borders_border_radius.rs │ ├── utilities_borders_border_style.rs │ ├── utilities_borders_border_width.rs │ ├── utilities_borders_divide_color.rs │ ├── utilities_borders_divide_opacity.rs │ ├── utilities_borders_divide_style.rs │ ├── utilities_borders_divide_width.rs │ ├── utilities_borders_outline_color.rs │ ├── utilities_borders_outline_offset.rs │ ├── utilities_borders_outline_style.rs │ ├── utilities_borders_outline_width.rs │ ├── utilities_borders_ring_color.rs │ ├── utilities_borders_ring_misc.rs │ ├── utilities_borders_ring_offset_color.rs │ ├── utilities_borders_ring_offset_width.rs │ ├── utilities_borders_ring_opacity.rs │ ├── utilities_borders_ring_width.rs │ ├── utilities_effects_background_blend_mode.rs │ ├── utilities_effects_box_shadow.rs │ ├── utilities_effects_box_shadow_color.rs │ ├── utilities_effects_mix_blend_mode.rs │ ├── utilities_effects_opacity.rs │ ├── utilities_filters_backdrop_blur.rs │ ├── utilities_filters_backdrop_brightness.rs │ ├── utilities_filters_backdrop_contrast.rs │ ├── utilities_filters_backdrop_grayscale.rs │ ├── utilities_filters_backdrop_hue_rotate.rs │ ├── utilities_filters_backdrop_invert.rs │ ├── utilities_filters_backdrop_opacity.rs │ ├── utilities_filters_backdrop_saturate.rs │ ├── utilities_filters_backdrop_sepia.rs │ ├── utilities_filters_blur.rs │ ├── utilities_filters_brightness.rs │ ├── utilities_filters_contrast.rs │ ├── utilities_filters_drop_shadow.rs │ ├── utilities_filters_grayscale.rs │ ├── utilities_filters_hue_rotate.rs │ ├── utilities_filters_invert.rs │ ├── utilities_filters_misc.rs │ ├── utilities_filters_saturate.rs │ ├── utilities_filters_sepia.rs │ ├── utilities_layout_aspect_ratio.rs │ ├── utilities_layout_box_decoration_break.rs │ ├── utilities_layout_box_sizing.rs │ ├── utilities_layout_break_after.rs │ ├── utilities_layout_break_before.rs │ ├── utilities_layout_break_inside.rs │ ├── utilities_layout_clear.rs │ ├── utilities_layout_columns.rs │ ├── utilities_layout_container.rs │ ├── utilities_layout_display.rs │ ├── utilities_layout_float.rs │ ├── utilities_layout_isolation.rs │ ├── utilities_layout_object_fit.rs │ ├── utilities_layout_object_position.rs │ ├── utilities_layout_overflow.rs │ ├── utilities_layout_overscroll_behavior.rs │ ├── utilities_layout_position.rs │ ├── utilities_layout_top_right_bottom_left.rs │ ├── utilities_layout_visibility.rs │ ├── utilities_layout_z_index.rs │ ├── utilities_spacing_margin.rs │ ├── utilities_spacing_padding.rs │ ├── utilities_spacing_space_between.rs │ ├── utilities_svg_fill.rs │ ├── utilities_svg_stroke.rs │ ├── utilities_svg_stroke_width.rs │ ├── utilities_transforms_misc.rs │ ├── utilities_transforms_rotate.rs │ ├── utilities_transforms_scale.rs │ ├── utilities_transforms_skew.rs │ ├── utilities_transforms_transform_origin.rs │ ├── utilities_transforms_translate.rs │ ├── utilities_transitions_animation_animation.rs │ ├── utilities_transitions_animation_misc.rs │ ├── utilities_transitions_animation_transition_delay.rs │ ├── utilities_transitions_animation_transition_duration.rs │ ├── utilities_transitions_animation_transition_property.rs │ ├── utilities_transitions_animation_transition_timing_function.rs │ ├── utilties_flexbox_grid_align_content.rs │ ├── utilties_flexbox_grid_align_items.rs │ ├── utilties_flexbox_grid_align_self.rs │ ├── utilties_flexbox_grid_flex.rs │ ├── utilties_flexbox_grid_flex_basis.rs │ ├── utilties_flexbox_grid_flex_direction.rs │ ├── utilties_flexbox_grid_flex_grow.rs │ ├── utilties_flexbox_grid_flex_shrink.rs │ ├── utilties_flexbox_grid_flex_wrap.rs │ ├── utilties_flexbox_grid_gap.rs │ ├── utilties_flexbox_grid_grid_auto_columns.rs │ ├── utilties_flexbox_grid_grid_auto_flow.rs │ ├── utilties_flexbox_grid_grid_auto_rows.rs │ ├── utilties_flexbox_grid_grid_column.rs │ ├── utilties_flexbox_grid_grid_row.rs │ ├── utilties_flexbox_grid_grid_template_columns.rs │ ├── utilties_flexbox_grid_grid_template_rows.rs │ ├── utilties_flexbox_grid_justify_content.rs │ ├── utilties_flexbox_grid_justify_items.rs │ ├── utilties_flexbox_grid_justify_self.rs │ ├── utilties_flexbox_grid_misc.rs │ ├── utilties_flexbox_grid_order.rs │ ├── utilties_flexbox_grid_place_content.rs │ ├── utilties_flexbox_grid_place_items.rs │ ├── utilties_flexbox_grid_place_self.rs │ ├── utilties_interactivity_accent_color.rs │ ├── utilties_interactivity_appearance.rs │ ├── utilties_interactivity_caret_color.rs │ ├── utilties_interactivity_cursor.rs │ ├── utilties_interactivity_pointer_events.rs │ ├── utilties_interactivity_resize.rs │ ├── utilties_interactivity_scroll_behavior.rs │ ├── utilties_interactivity_scroll_margin.rs │ ├── utilties_interactivity_scroll_padding.rs │ ├── utilties_interactivity_scroll_snap_align.rs │ ├── utilties_interactivity_scroll_snap_stop.rs │ ├── utilties_interactivity_scroll_snap_type.rs │ ├── utilties_interactivity_touch_action.rs │ ├── utilties_interactivity_user_select.rs │ ├── utilties_interactivity_will_change.rs │ ├── utilties_sizing_height.rs │ ├── utilties_sizing_max_height.rs │ ├── utilties_sizing_max_width.rs │ ├── utilties_sizing_min_height.rs │ ├── utilties_sizing_min_width.rs │ ├── utilties_sizing_width.rs │ ├── utilties_tables_border_collapse.rs │ ├── utilties_tables_border_spacing.rs │ ├── utilties_tables_caption_side.rs │ ├── utilties_tables_table_layout.rs │ ├── utilties_typography_font_family.rs │ ├── utilties_typography_font_size.rs │ ├── utilties_typography_font_smoothing.rs │ ├── utilties_typography_font_style.rs │ ├── utilties_typography_font_variant_numeric.rs │ ├── utilties_typography_font_weight.rs │ ├── utilties_typography_hyphens.rs │ ├── utilties_typography_letter_spacing.rs │ ├── utilties_typography_line_height.rs │ ├── utilties_typography_list_style_image.rs │ ├── utilties_typography_list_style_position.rs │ ├── utilties_typography_list_style_type.rs │ ├── utilties_typography_placeholder_color.rs │ ├── utilties_typography_placeholder_opacity.rs │ ├── utilties_typography_text_align.rs │ ├── utilties_typography_text_color.rs │ ├── utilties_typography_text_decoration.rs │ ├── utilties_typography_text_decoration_color.rs │ ├── utilties_typography_text_decoration_style.rs │ ├── utilties_typography_text_decoration_thickness.rs │ ├── utilties_typography_text_indent.rs │ ├── utilties_typography_text_opacity.rs │ ├── utilties_typography_text_overflow.rs │ ├── utilties_typography_text_transform.rs │ ├── utilties_typography_text_underline_offset.rs │ ├── utilties_typography_vertical_align.rs │ ├── utilties_typography_whitespace.rs │ ├── utilties_typography_word_break.rs │ ├── variables_variables.rs │ ├── variant_ordering_variant_ordering.rs │ └── visited_opacity_visited_opacity.rs └── test.rs ├── stailwc.d.ts ├── tw.json └── yarn.lock /.cargo/config: -------------------------------------------------------------------------------- 1 | # These command aliases are not final, may change 2 | [alias] 3 | # Alias to build actual plugin binary for the specified target. 4 | build-wasi = "build --target wasm32-wasi" 5 | build-wasm32 = "build --target wasm32-unknown-unknown" 6 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: Continuous integration 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | check: 7 | name: Check 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/checkout@v2 11 | - uses: actions-rs/toolchain@v1 12 | with: 13 | profile: minimal 14 | # regular nightly currently causes panics, so pin this 15 | toolchain: nightly-2023-03-08-x86_64-unknown-linux-gnu 16 | override: true 17 | - uses: Swatinem/rust-cache@v2 18 | - uses: actions-rs/cargo@v1 19 | with: 20 | command: check 21 | 22 | test: 23 | name: Test Suite 24 | runs-on: ubuntu-latest 25 | steps: 26 | - uses: actions/checkout@v2 27 | - uses: actions-rs/toolchain@v1 28 | with: 29 | profile: minimal 30 | # regular nightly currently causes panics, so pin this 31 | toolchain: nightly-2023-03-08-x86_64-unknown-linux-gnu 32 | override: true 33 | - uses: Swatinem/rust-cache@v2 34 | - uses: actions-rs/cargo@v1 35 | with: 36 | command: test 37 | 38 | fmt: 39 | name: Rustfmt 40 | runs-on: ubuntu-latest 41 | steps: 42 | - uses: actions/checkout@v2 43 | - uses: actions-rs/toolchain@v1 44 | with: 45 | profile: minimal 46 | # regular nightly currently causes panics, so pin this 47 | toolchain: nightly-2023-03-08-x86_64-unknown-linux-gnu 48 | override: true 49 | - uses: Swatinem/rust-cache@v2 50 | - run: rustup component add rustfmt 51 | - uses: actions-rs/cargo@v1 52 | with: 53 | command: fmt 54 | args: --all -- --check 55 | 56 | clippy: 57 | name: Clippy 58 | runs-on: ubuntu-latest 59 | steps: 60 | - uses: actions/checkout@v2 61 | - uses: actions-rs/toolchain@v1 62 | with: 63 | profile: minimal 64 | # regular nightly currently causes panics, so pin this 65 | toolchain: nightly-2023-03-08-x86_64-unknown-linux-gnu 66 | override: true 67 | - uses: Swatinem/rust-cache@v2 68 | - run: rustup component add clippy 69 | - uses: actions-rs/cargo@v1 70 | with: 71 | command: clippy 72 | args: -- -D warnings 73 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: workflow_dispatch 4 | 5 | jobs: 6 | release: 7 | name: Release 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: Checkout 11 | uses: actions/checkout@v2 12 | with: 13 | fetch-depth: 0 14 | token: ${{ secrets.GH_TOKEN }} 15 | 16 | # toolchains 17 | - uses: actions-rs/toolchain@v1 18 | with: 19 | profile: minimal 20 | # regular nightly currently causes panics, so pin this 21 | toolchain: nightly-2023-03-08-x86_64-unknown-linux-gnu 22 | target: wasm32-wasi 23 | override: true 24 | - name: Set up Node 14 25 | uses: actions/setup-node@v2 26 | with: 27 | node-version: 14.x 28 | 29 | # caching 30 | - uses: Swatinem/rust-cache@v2 31 | - name: Get yarn cache directory path 32 | id: yarn-cache-dir-path 33 | run: echo "::set-output name=dir::$(yarn config get cacheFolder)" 34 | - uses: actions/cache@v3 35 | id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) 36 | with: 37 | path: ${{ steps.yarn-cache-dir-path.outputs.dir }} 38 | key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} 39 | restore-keys: | 40 | ${{ runner.os }}-yarn- 41 | 42 | - name: Install semantic-release-rust 43 | run: cargo install --git https://github.com/arlyon/semantic-release-rust.git 44 | - name: Install dependencies 45 | run: yarn 46 | - name: Release 47 | run: yarn semantic-release 48 | env: 49 | GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} 50 | CARGO_REGISTRY_TOKEN: ${{ secrets.CARGO_REGISTRY_TOKEN }} 51 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 52 | -------------------------------------------------------------------------------- /.github/workflows/snapshot.yml: -------------------------------------------------------------------------------- 1 | name: Snapshot 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | test: 7 | name: Snapshot Tests 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/checkout@v2 11 | - uses: actions-rs/toolchain@v1 12 | with: 13 | profile: minimal 14 | # regular nightly currently causes panics, so pin this 15 | toolchain: nightly-2023-03-08-x86_64-unknown-linux-gnu 16 | override: true 17 | - name: Set up Node 14 18 | uses: actions/setup-node@v2 19 | with: 20 | node-version: 14.x 21 | - uses: Swatinem/rust-cache@v2 22 | - run: yarn 23 | - run: cargo test snapshot 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /target 2 | ^target/ 3 | target 4 | node_modules 5 | Cargo.lock -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arlyon/stailwc/4c40fbd58c29702e234295c00aac3a28be122874/.gitmodules -------------------------------------------------------------------------------- /.releaserc.json: -------------------------------------------------------------------------------- 1 | { 2 | "branches": ["master"], 3 | "tagFormat": "${version}", 4 | "plugins": [ 5 | "@semantic-release/commit-analyzer", 6 | "@semantic-release/release-notes-generator", 7 | "@semantic-release/changelog", 8 | [ 9 | "@semantic-release/exec", 10 | { 11 | "verifyConditionsCmd": "semantic-release-rust verify-conditions", 12 | "prepareCmd": "semantic-release-rust prepare ${nextRelease.version}", 13 | "publishCmd": "semantic-release-rust publish" 14 | } 15 | ], 16 | "@semantic-release/npm", 17 | [ 18 | "@semantic-release/git", 19 | { 20 | "assets": ["CHANGELOG.md", "package.json", "Cargo.toml"], 21 | "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}" 22 | } 23 | ], 24 | [ 25 | "@semantic-release/github", 26 | { 27 | "release": true 28 | } 29 | ] 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | description = "An experimental transpiler to bring tailwind macros to SWC rocket" 3 | edition = "2021" 4 | license = "MIT OR Apache-2.0" 5 | name = "stailwc" 6 | readme = "readme.md" 7 | repository = "https://github.com/arlyon/stailwc" 8 | version ="0.17.0" 9 | 10 | [lib] 11 | crate-type = ["cdylib"] 12 | 13 | [profile.release] 14 | # This removes more dead code 15 | codegen-units = 1 16 | # wasmer doesn't support lto 17 | lto = false 18 | # Optimize for size 19 | opt-level = "s" 20 | # Optimize for performance, this is default so you don't need to specify it 21 | # opt-level = "z" 22 | 23 | [dependencies] 24 | itertools = "0.10.3" 25 | nom = "7.1.1" 26 | nom_locate = "4.0.0" 27 | serde = "1" 28 | serde_json = "1.0.83" 29 | serde_path_to_error = "0.1.8" 30 | swc_core = {version = "=0.79.59", features = ["ecma_visit", "ecma_ast", "ecma_plugin_transform"]} 31 | tailwind-config = {version ="0.17.0", path = "crates/tailwind-config"} 32 | tailwind-parse = {version ="0.17.0", path = "crates/tailwind-parse"} 33 | tracing = "0.1.36" 34 | 35 | [dev-dependencies] 36 | anyhow = "1.0.62" 37 | cmd_lib = "1.3.0" 38 | swc_core = {version = "=0.79.59", features = ["testing_transform", "ecma_parser"]} 39 | test-case = "2.2.1" 40 | 41 | [build-dependencies] 42 | glob = "0.3.0" 43 | 44 | [workspace] 45 | members = [ 46 | ".", 47 | "crates/*", 48 | ] 49 | -------------------------------------------------------------------------------- /LICENSE-MIT: -------------------------------------------------------------------------------- 1 | Copyright (c) 2022 Alexander Lyon 2 | 3 | Permission is hereby granted, free of charge, to any 4 | person obtaining a copy of this software and associated 5 | documentation files (the "Software"), to deal in the 6 | Software without restriction, including without 7 | limitation the rights to use, copy, modify, merge, 8 | publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software 10 | is furnished to do so, subject to the following 11 | conditions: 12 | 13 | The above copyright notice and this permission notice 14 | shall be included in all copies or substantial portions 15 | of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF 18 | ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED 19 | TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 20 | PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT 21 | SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 22 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 23 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR 24 | IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 25 | DEALINGS IN THE SOFTWARE. 26 | -------------------------------------------------------------------------------- /contributing.md: -------------------------------------------------------------------------------- 1 | # Contributing to async-stripe 2 | 3 | 1. Fork it! 4 | 2. Create your feature branch: `git checkout -b my-new-feature` 5 | 3. Test it: `cargo test --workspace` 6 | 4. Lint it: `cargo +nightly clippy --all --all-targets -- -D warnings` 7 | 5. Commit your changes: `git commit -am 'Add some feature'` 8 | 6. Push to the branch: `git push origin my-new-feature` 9 | 7. Submit a pull request :D 10 | 11 | We use `rustfmt` to keep our codebase consistently formatted. Please ensure that 12 | you have correctly formatted your code (most editors will do this automatically 13 | when saving) or it may not pass the CI tests. 14 | 15 | Unless you explicitly state otherwise, any contribution intentionally 16 | submitted for inclusion in the work by you, as defined in the 17 | Apache-2.0 license, shall be dual licensed as in the README, without any 18 | additional terms or conditions. 19 | 20 | ## Building 21 | 22 | To get started you will need a rust toolchain which can cross-compile to the 23 | `wasm32-wasi` target. We currently loosely track the toolchain <-> swc version 24 | that nextjs uses. This is kept in the `rust-toolchain` file and should be 25 | used automatically. 26 | 27 | ```sh 28 | ❯ rustup target add wasm32-wasi 29 | ``` 30 | 31 | From there you can run a cargo build 32 | 33 | ```sh 34 | ❯ cargo build --release --target wasm32-wasi 35 | ❯ file target/wasm32-wasi/release/stailwc.wasm 36 | target/wasm32-wasi/release/stailwc.wasm: WebAssembly (wasm) binary module version 0x1 (MVP) 37 | ``` 38 | 39 | ## Coding standards 40 | 41 | These are requirements we have that we have not yet lifted to the level of 42 | automatic enforcement. 43 | 44 | ### Import grouping 45 | 46 | In each file the imports should be grouped into at most 4 groups in the 47 | following order: 48 | 49 | 1. stdlib 50 | 2. non-repository local crates 51 | 3. repository local other crates 52 | 4. this crate 53 | 54 | Separate each group with a blank line, and rustfmt will sort into a canonical 55 | order. Any file that is not grouped like this can be rearranged whenever the 56 | file is touched - we're not precious about having it done in a separate commit, 57 | though that is helpful. 58 | 59 | ### Clippy lints 60 | 61 | We ask that contributors keep the clippy status clean. Minimally, run `cargo clippy` 62 | before submitting code. Clippy is also run in GitHub Actions. 63 | 64 | ### rustfmt 65 | 66 | It is expected that code is uniformly formatted. Before submitting code, make sure 67 | to run `cargo fmt` to make sure it conforms to the standard. 68 | 69 | ## Communication 70 | 71 | It is encouraged to open an issue before you create a PR as a place for pre-implementation 72 | discussion. If you're unsure about your contribution or simply want to ask a question about anything just open an issue and we'll chat. 73 | 74 | ## Architecture 75 | -------------------------------------------------------------------------------- /crates/swc-utils/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | description = "Some basic SWC utils" 3 | edition = "2021" 4 | license = "MIT OR Apache-2.0" 5 | name = "stailwc-swc-utils" 6 | repository = "https://github.com/arlyon/stailwc" 7 | version = "0.16.0" 8 | 9 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html 10 | 11 | [dependencies] 12 | swc_core = {version = "=0.79.59", features = ["common", "ecma_visit", "ecma_ast"]} 13 | -------------------------------------------------------------------------------- /crates/tailwind-config/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | description = "Type definitions for the tailwind config file" 3 | edition = "2021" 4 | license = "MIT OR Apache-2.0" 5 | name = "tailwind-config" 6 | repository = "https://github.com/arlyon/stailwc" 7 | version = "0.17.0" 8 | 9 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html 10 | 11 | [dependencies] 12 | serde = {version = "1.0.147", features = ["derive"]} 13 | -------------------------------------------------------------------------------- /crates/tailwind-parse-macro/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | description = "Procedural macro for tailwind-parse" 3 | edition = "2021" 4 | license = "MIT OR Apache-2.0" 5 | name = "tailwind-parse-macro" 6 | repository = "https://github.com/arlyon/stailwc" 7 | version = "0.17.0" 8 | 9 | [lib] 10 | proc_macro = true 11 | 12 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html 13 | 14 | [dependencies] 15 | convert_case = "0.6.0" 16 | proc-macro2 = "1.0.47" 17 | quote = "1.0.21" 18 | syn = {version = "1.0.103", features = ["full"]} 19 | -------------------------------------------------------------------------------- /crates/tailwind-parse/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | description = "Parses tailwind directives and yields user-friendly errors" 3 | edition = "2021" 4 | license = "MIT OR Apache-2.0" 5 | name = "tailwind-parse" 6 | repository = "https://github.com/arlyon/stailwc" 7 | version = "0.17.0" 8 | 9 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html 10 | 11 | [dependencies] 12 | eddie = "0.4.2" 13 | itertools = "0.10.5" 14 | nom = "7.1.1" 15 | nom_locate = "4.0.0" 16 | phf = {version = "0.11.1", features = ["macros"]} 17 | stailwc-swc-utils = {version = "0.16.0", path = "../swc-utils"} 18 | swc_core = {version = "=0.79.59", features = ["common", "ecma_ast"]} 19 | tailwind-config = {version = "0.17.0", path = "../tailwind-config"} 20 | tailwind-parse-macro = {version = "0.17.0", path = "../tailwind-parse-macro"} 21 | thiserror = "1.0.37" 22 | 23 | [dev-dependencies] 24 | anyhow = "1.0.66" 25 | pretty_assertions = "1.3.0" 26 | test-case = "2.2.2" 27 | -------------------------------------------------------------------------------- /crates/tailwind-parse/src/eval/mod.rs: -------------------------------------------------------------------------------- 1 | mod macros; 2 | pub mod plugin; 3 | pub mod prose; 4 | mod util; 5 | -------------------------------------------------------------------------------- /crates/test-generator/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | edition = "2021" 3 | name = "test-generator" 4 | version = "0.1.0" 5 | 6 | [dependencies] 7 | aho-corasick = "1.0.1" 8 | clap = { version = "4.3.0", features = ["derive"] } 9 | convert_case = "0.6.0" 10 | swc_common = { version = "0.31.10", features = ["tty-emitter"] } 11 | swc_ecma_ast = "0.104.3" 12 | swc_ecma_parser = { version = "0.134.6", features = ["typescript"] } 13 | swc_ecma_visit = "0.90.3" 14 | walkdir = "2.3.3" 15 | -------------------------------------------------------------------------------- /crates/test-generator/src/main.rs: -------------------------------------------------------------------------------- 1 | #![feature(path_file_prefix)] 2 | 3 | use clap::Parser as ClapParser; 4 | 5 | // clap derive with one path 6 | #[derive(ClapParser)] 7 | #[clap(name = "test-generator", version = "0.1.0", author = "")] 8 | struct Opts { 9 | /// Path to the twin.macro generated tests 10 | input: String, 11 | 12 | #[clap(default_value = "out")] 13 | output: String, 14 | } 15 | 16 | fn main() { 17 | let opts = Opts::parse(); 18 | test_generator::run(&opts.input, &opts.output); 19 | } 20 | -------------------------------------------------------------------------------- /examples/nextjs-emotion/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /examples/nextjs-emotion/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /examples/nextjs-emotion/next.config.js: -------------------------------------------------------------------------------- 1 | const stailwc = require("stailwc/install"); 2 | 3 | /** @type {import('next').NextConfig} */ 4 | const nextConfig = { 5 | reactStrictMode: true, 6 | swcMinify: true, 7 | experimental: { 8 | swcPlugins: [stailwc({ engine: "emotion" })], 9 | }, 10 | compiler: { 11 | emotion: true, 12 | }, 13 | }; 14 | 15 | module.exports = nextConfig; 16 | -------------------------------------------------------------------------------- /examples/nextjs-emotion/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stailwc-nextjs", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@emotion/react": "^11.10.5", 13 | "@emotion/styled": "^11.10.5", 14 | "@types/node": "18.11.9", 15 | "@types/react": "18.0.25", 16 | "@types/react-dom": "18.0.8", 17 | "next": "13.4.3", 18 | "react": "18.2.0", 19 | "react-dom": "18.2.0", 20 | "stailwc": "link:../../", 21 | "tailwindcss": "^3.2.2", 22 | "typescript": "4.8.4" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/nextjs-emotion/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import { TailwindStyle } from "stailwc"; 2 | 3 | export default function App({ Component, pageProps }) { 4 | return ( 5 | <> 6 | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /examples/nextjs-emotion/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arlyon/stailwc/4c40fbd58c29702e234295c00aac3a28be122874/examples/nextjs-emotion/public/favicon.ico -------------------------------------------------------------------------------- /examples/nextjs-emotion/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /examples/nextjs-emotion/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/nextjs-styled-components/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /examples/nextjs-styled-components/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /examples/nextjs-styled-components/next.config.js: -------------------------------------------------------------------------------- 1 | const stailwc = require("stailwc/install"); 2 | 3 | /** @type {import('next').NextConfig} */ 4 | const nextConfig = { 5 | reactStrictMode: true, 6 | swcMinify: true, 7 | experimental: { 8 | swcPlugins: [ 9 | stailwc({ 10 | engine: "styled-components", 11 | wasm: "/home/arlyon/Programming/stailwc/target/wasm32-wasi/release/stailwc.wasm", 12 | }), 13 | ], 14 | }, 15 | compiler: { 16 | styledComponents: true, 17 | }, 18 | }; 19 | 20 | module.exports = nextConfig; 21 | -------------------------------------------------------------------------------- /examples/nextjs-styled-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stailwc-nextjs", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@types/node": "18.11.9", 13 | "@types/react": "18.0.25", 14 | "@types/react-dom": "18.0.8", 15 | "next": "13.4.3", 16 | "react": "18.2.0", 17 | "react-dom": "18.2.0", 18 | "stailwc": "link:../../", 19 | "styled-components": "^5.3.6", 20 | "tailwindcss": "^3.2.2", 21 | "typescript": "4.8.4" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/nextjs-styled-components/pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import Document, { DocumentContext } from "next/document"; 2 | import { ServerStyleSheet } from "styled-components"; 3 | 4 | export default class MyDocument extends Document { 5 | static async getInitialProps(ctx: DocumentContext) { 6 | const sheet = new ServerStyleSheet(); 7 | const originalRenderPage = ctx.renderPage; 8 | 9 | try { 10 | ctx.renderPage = () => 11 | originalRenderPage({ 12 | enhanceApp: (App) => (props) => sheet.collectStyles(), 13 | }); 14 | 15 | const initialProps = await Document.getInitialProps(ctx); 16 | return { 17 | ...initialProps, 18 | styles: [initialProps.styles, sheet.getStyleElement()], 19 | }; 20 | } finally { 21 | sheet.seal(); 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/nextjs-styled-components/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arlyon/stailwc/4c40fbd58c29702e234295c00aac3a28be122874/examples/nextjs-styled-components/public/favicon.ico -------------------------------------------------------------------------------- /examples/nextjs-styled-components/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /examples/nextjs-styled-components/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/swc/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | .swc 3 | .swcrc 4 | index.js 5 | index.js.map -------------------------------------------------------------------------------- /examples/swc/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | -------------------------------------------------------------------------------- /examples/swc/index.tsx: -------------------------------------------------------------------------------- 1 | import { TailwindStyle } from "stailwc"; 2 | 3 | const Button = tw.button`content-[Hello World] px-4 py-2 bg-red-500 rounded-full text-white`; 4 | 5 | export const App = () => ( 6 |
7 | 8 |
10 | ); 11 | -------------------------------------------------------------------------------- /examples/swc/install.js: -------------------------------------------------------------------------------- 1 | const stailwc = require("stailwc/install"); 2 | 3 | console.log(JSON.stringify({ 4 | 5 | jsc: { 6 | parser: { 7 | "syntax": "ecmascript", 8 | "jsx": true, 9 | }, 10 | experimental: { 11 | plugins: [ 12 | stailwc({ 13 | engine: "emotion", 14 | strict: true, 15 | tailwindPath: "./examples/swc/tailwind.config.json", 16 | silent: true, 17 | }), 18 | ], 19 | }, 20 | }, 21 | })); 22 | -------------------------------------------------------------------------------- /examples/swc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "swc", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "build": "node ./install.js > .swcrc && swc index.tsx -o index.js" 8 | }, 9 | "devDependencies": { 10 | "@swc/cli": "^0.1.59", 11 | "@swc/core": "^1.3.24", 12 | "stailwc": "link:../../", 13 | "tailwindcss": "^3.2.4" 14 | }, 15 | "dependencies": { 16 | "@emotion/react": "^11.10.6", 17 | "react": "^18.2.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/swc/tailwind.config.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /examples/vite/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stailwc-vite", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@emotion/css": "^11.10.6", 13 | "@emotion/react": "^11.10.6", 14 | "@emotion/styled": "^11.10.6", 15 | "@swc/plugin-emotion": "^2.5.41", 16 | "react": "^18.2.0", 17 | "react-dom": "^18.2.0" 18 | }, 19 | "devDependencies": { 20 | "@types/react": "^18.0.27", 21 | "@types/react-dom": "^18.0.10", 22 | "@vitejs/plugin-react-swc": "^3.0.0", 23 | "stailwc": "link:../../", 24 | "typescript": "^4.9.3", 25 | "vite": "^4.1.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/vite/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/vite/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | import { TailwindStyle } from "stailwc"; 5 | 6 | // currently needed due to a swc bug 7 | // === 8 | import { css, Global } from "@emotion/react"; 9 | css; 10 | Global; 11 | // === 12 | 13 | ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( 14 | 15 | 16 | 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /examples/vite/src/stailwc.d.ts: -------------------------------------------------------------------------------- 1 | import type { CSSInterpolation } from '@emotion/serialize' 2 | 3 | export type TemplateFn = ( 4 | strings: Readonly, 5 | ...values: readonly string[] 6 | ) => R 7 | 8 | export type TwFn = TemplateFn 9 | 10 | export type TwComponentMap = { 11 | [K in keyof JSX.IntrinsicElements]: TemplateFn> 12 | } 13 | 14 | export type TwComponent = ( 15 | props: JSX.IntrinsicElements[K] 16 | ) => JSX.Element 17 | 18 | type TwComponentWrapper = >( 19 | component: T 20 | ) => TemplateFn 21 | 22 | declare module 'react' { 23 | interface DOMAttributes { 24 | tw?: string 25 | css?: CSSInterpolation 26 | } 27 | } 28 | 29 | declare global { 30 | const tw: TwFn & TwComponentMap & TwComponentWrapper 31 | 32 | namespace JSX { 33 | interface IntrinsicAttributes extends React.Attributes { 34 | tw?: string 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /examples/vite/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/vite/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /examples/vite/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/vite/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react-swc"; 3 | 4 | import stailwc from "stailwc/install"; 5 | 6 | export default defineConfig({ 7 | plugins: [ 8 | react({ 9 | jsxImportSource: "@emotion/react", 10 | plugins: [ 11 | stailwc({ 12 | engine: "emotion", 13 | }), 14 | ["@swc/plugin-emotion", {}], 15 | ], 16 | }), 17 | ], 18 | }); 19 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | import type { FC } from "react"; 2 | 3 | export const TailwindStyle: FC; 4 | -------------------------------------------------------------------------------- /install.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Install stailwc 3 | * 4 | * @param {{wasm?: string, tailwindPath?: string, silent?: boolean, strict?: boolean, engine: "emotion" | "styled-components"}} options 5 | * @returns A nextjs plugin configuration 6 | */ 7 | module.exports = (options = {}) => { 8 | const resolveConfig = require("tailwindcss/resolveConfig"); 9 | const defaultConfig = require("tailwindcss/defaultConfig"); 10 | 11 | if (options?.tailwindPath === undefined) { 12 | const { path } = require("app-root-path"); 13 | options.tailwindPath = `${path}/tailwind.config.js`; 14 | } 15 | 16 | let override = {}; 17 | try { 18 | !options?.silent && 19 | console.log( 20 | `\u001b[36minfo\u001b[0m - attempting to load tailwind config at ${options.tailwindPath}` 21 | ); 22 | override = require(options.tailwindPath); 23 | } catch (e) { 24 | !options?.silent && 25 | console.warn( 26 | `\u001b[33mwarn\u001b[0m - could not load tailwind config at ${options.tailwindPath}: ${e}` 27 | ); 28 | } 29 | 30 | const config = resolveConfig(override, defaultConfig); 31 | 32 | config.theme.colors = Object.entries(config.theme.colors) 33 | .flatMap(([k, v]) => { 34 | if (typeof v === "object") { 35 | const items = Object.entries(v).map(([k2, v2]) => [ 36 | k2 === "DEFAULT" ? k : k + "-" + k2, 37 | v2, 38 | ]); 39 | return items; 40 | } else { 41 | return [[k, v]]; 42 | } 43 | }) 44 | .reduce( 45 | (acc, [k, v]) => ({ 46 | ...acc, 47 | [k]: v, 48 | }), 49 | {} 50 | ); 51 | 52 | return [ 53 | options?.wasm ?? "stailwc", 54 | { config, strict: options?.strict ?? false, engine: options?.engine ?? "emotion" }, 55 | ]; 56 | }; 57 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stailwc", 3 | "version": "0.17.0", 4 | "description": "An experimental transpiler to bring tailwind macros to SWC rocket", 5 | "author": "arlyon@me.com", 6 | "license": "MIT", 7 | "keywords": [ 8 | "swc-plugin", 9 | "swc", 10 | "tailwind", 11 | "tailwindcss", 12 | "next", 13 | "nextjs" 14 | ], 15 | "main": "target/wasm32-wasi/release/stailwc.wasm", 16 | "types": "index.d.ts", 17 | "exports": { 18 | ".": "./target/wasm32-wasi/release/stailwc.wasm", 19 | "./install": "./install.js" 20 | }, 21 | "scripts": { 22 | "prepublishOnly": "cargo build-wasi --release" 23 | }, 24 | "files": [ 25 | "install.js", 26 | "index.d.ts" 27 | ], 28 | "dependencies": { 29 | "app-root-path": "^3.1.0" 30 | }, 31 | "devDependencies": { 32 | "@semantic-release/changelog": "^6.0.1", 33 | "@semantic-release/exec": "^6.0.3", 34 | "@semantic-release/git": "^10.0.1", 35 | "semantic-release": "^19.0.5", 36 | "tailwindcss": "^3.2.2" 37 | }, 38 | "peerDependencies": { 39 | "@emotion/serialize": "^1.1.1", 40 | "tailwindcss": "^3.1.8" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /rust-toolchain: -------------------------------------------------------------------------------- 1 | nightly-2023-07-21 -------------------------------------------------------------------------------- /split.js: -------------------------------------------------------------------------------- 1 | const snaps = require("./snapshots/snapshots"); 2 | const fs = require("fs"); 3 | 4 | const RE = /.+ (.+):.+\d/; 5 | 6 | for ([k, v] of Object.entries(snaps)) { 7 | const fileName = RE.exec(k)[1]; 8 | fs.writeFileSync(`snapshots/${fileName}`, v); 9 | } 10 | -------------------------------------------------------------------------------- /src/css.rs: -------------------------------------------------------------------------------- 1 | use std::borrow::Cow; 2 | 3 | pub fn format_css(forms: bool, fonts_sans: &[Cow], fonts_mono: &[Cow]) -> String { 4 | let reset = format!( 5 | include_str!("../data/reset.css"), 6 | fonts_sans.join(","), 7 | fonts_mono.join(",") 8 | ); 9 | if forms { 10 | format!("{}{}", reset, include_str!("../data/form.css")) 11 | } else { 12 | reset 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/depth_stack.rs: -------------------------------------------------------------------------------- 1 | /// A stack that only allows a single item to be pushed at a given depth. 2 | #[derive(Debug)] 3 | pub struct DepthStack { 4 | stack: Vec<(usize, T)>, 5 | depth: usize, 6 | } 7 | 8 | impl DepthStack { 9 | pub fn new() -> Self { 10 | Self { 11 | stack: Vec::new(), 12 | depth: 0, 13 | } 14 | } 15 | 16 | pub fn push(&mut self, item: T) -> Option { 17 | if self 18 | .stack 19 | .last() 20 | .filter(|(d, _)| *d == self.depth) 21 | .is_some() 22 | { 23 | return self.stack.pop().map(|(_, v)| v); 24 | } 25 | 26 | self.stack.push((self.depth, item)); 27 | None 28 | } 29 | 30 | pub fn pop(&mut self) -> Option { 31 | self.stack.pop().map(|(_, item)| item) 32 | } 33 | 34 | #[allow(dead_code)] 35 | pub fn peek(&self) -> Option<&T> { 36 | self.stack 37 | .last() 38 | .filter(|(d, _)| *d == self.depth) 39 | .map(|(_, item)| item) 40 | } 41 | 42 | #[allow(dead_code)] 43 | pub fn depth(&self) -> usize { 44 | self.depth 45 | } 46 | 47 | #[tracing::instrument(skip(self))] 48 | pub fn inc_depth(&mut self) { 49 | self.depth += 1; 50 | tracing::trace!(depth = self.depth); 51 | } 52 | 53 | #[tracing::instrument(skip(self))] 54 | pub fn dec_depth(&mut self) { 55 | self.depth -= 1; 56 | tracing::trace!(depth = self.depth); 57 | self.stack.retain(|(d, _)| *d <= self.depth); 58 | } 59 | } 60 | 61 | impl Default for DepthStack { 62 | fn default() -> Self { 63 | Self::new() 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/engine/emotion.rs: -------------------------------------------------------------------------------- 1 | use swc_core::{ 2 | common::Span, 3 | ecma::{ 4 | ast::{ 5 | Expr, Ident, JSXAttr, JSXAttrName, JSXAttrOrSpread, JSXAttrValue, JSXElementName, 6 | JSXExpr, JSXExprContainer, JSXOpeningElement, TaggedTpl, Tpl, TplElement, 7 | }, 8 | atoms::Atom, 9 | }, 10 | }; 11 | 12 | use crate::TransformVisitor; 13 | 14 | impl<'a> TransformVisitor<'a> { 15 | pub fn emotion_global( 16 | &mut self, 17 | mut jsx_ident_span: Span, 18 | jsx_opening_element: &mut JSXOpeningElement, 19 | atom: Atom, 20 | ) { 21 | if let Some(import_span) = self.tw_style_imported { 22 | jsx_ident_span.ctxt = import_span.ctxt; 23 | jsx_opening_element.name = 24 | JSXElementName::Ident(Ident::new("Global".into(), jsx_ident_span)); 25 | jsx_opening_element 26 | .attrs 27 | .push(JSXAttrOrSpread::JSXAttr(JSXAttr { 28 | span: jsx_opening_element.span, 29 | name: JSXAttrName::Ident(Ident::new("styles".into(), jsx_opening_element.span)), 30 | value: Some(JSXAttrValue::JSXExprContainer(JSXExprContainer { 31 | span: jsx_opening_element.span, 32 | expr: JSXExpr::Expr(Box::new(Expr::TaggedTpl(TaggedTpl { 33 | span: jsx_opening_element.span, 34 | tag: Box::new(Expr::Ident(Ident { 35 | span: jsx_opening_element.span, 36 | sym: "css".into(), 37 | optional: false, 38 | })), 39 | type_params: None, 40 | tpl: Box::new(Tpl { 41 | span: jsx_opening_element.span, 42 | exprs: vec![], 43 | quasis: vec![TplElement { 44 | cooked: Some(atom.clone()), 45 | raw: atom, 46 | span: jsx_opening_element.span, 47 | tail: true, 48 | }], 49 | }), 50 | }))), 51 | })), 52 | })); 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/engine/mod.rs: -------------------------------------------------------------------------------- 1 | pub mod emotion; 2 | pub mod styled_components; 3 | -------------------------------------------------------------------------------- /src/engine/styled_components.rs: -------------------------------------------------------------------------------- 1 | use swc_core::{ 2 | common::Span, 3 | ecma::ast::{Ident, JSXElementName, JSXOpeningElement}, 4 | }; 5 | 6 | use crate::TransformVisitor; 7 | 8 | impl<'a> TransformVisitor<'a> { 9 | pub fn styled_components_global( 10 | &mut self, 11 | mut jsx_ident_span: Span, 12 | n: &mut JSXOpeningElement, 13 | ) { 14 | if let Some(span) = self.tw_style_imported { 15 | jsx_ident_span.ctxt = span.ctxt; 16 | n.name = JSXElementName::Ident(Ident::new("Global".into(), jsx_ident_span)); 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/snapshot/arbitrary_properties_arbitrary_properties.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`[mask-image:linear-gradient(180deg,white, rgba(255,255,255,0))]`"#####, r#####"({ 4 | maskImage: "linear-gradient(180deg,white, rgba(255,255,255,0))", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`[-webkit-property:bg-black]`"#####, r#####"({ 8 | WebkitProperty: "bg-black", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`[--my-var:blue]`"#####, r#####"({ 12 | "--my-var": "blue", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`[color:var(--my-var)]`"#####, r#####"({ 16 | color: "var(--my-var)", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`bg-black md:[color:var(--my-var)]`"#####, r#####"({ 20 | "--tw-bg-opacity": "1", 21 | backgroundColor: "rgb(0 0 0 / var(--tw-bg-opacity))", 22 | "@media (min-width: 768px)": { 23 | color: "var(--my-var)", 24 | }, 25 | }) 26 | ;"##### ; "4")] 27 | #[test_case(r#####"tw`[margin:2px_4px_5px_1px]`"#####, r#####"({ 28 | margin: "2px 4px 5px 1px", 29 | }) 30 | ;"##### ; "5")] 31 | #[test_case(r#####"tw`[content:'—']`"#####, r#####"({ 32 | content: "'\\u2014'", 33 | })"##### ; "6")] 34 | fn test(input: &str, output: &str) { 35 | snapshot_inner(input, output) 36 | } 37 | -------------------------------------------------------------------------------- /src/snapshot/auto_css_prop_auto_css_prop.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"
4 | ;"#####, r#####"
5 | ;"##### ; "0")] 6 | #[test_case(r#####"
"#####, r#####"
"##### ; "1")] 7 | fn test(input: &str, output: &str) { 8 | snapshot_inner(input, output) 9 | } 10 | -------------------------------------------------------------------------------- /src/snapshot/config_ts_config_ts.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`text-purple`"#####, r#####"({ 4 | color: "custom", 5 | })"##### ; "0")] 6 | fn test(input: &str, output: &str) { 7 | snapshot_inner(input, output) 8 | } 9 | -------------------------------------------------------------------------------- /src/snapshot/content_content.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`content`"#####, r#####"({ 4 | none: "none", 5 | DEFAULT: ""default"", 6 | test: ""hi"", 7 | }) 8 | ;"##### ; "0")] 9 | #[test_case(r#####"tw`content`"#####, r#####"({ 10 | "--tw-content": ""default"", 11 | content: "var(--tw-content)", 12 | }) 13 | ;"##### ; "1")] 14 | #[test_case(r#####"tw`content-test`"#####, r#####"({ 15 | "--tw-content": ""hi"", 16 | content: "var(--tw-content)", 17 | }) 18 | ;"##### ; "2")] 19 | #[test_case(r#####"tw`content-['hello']`"#####, r#####"({ 20 | "--tw-content": "'hello'", 21 | content: "var(--tw-content)", 22 | }) 23 | ;"##### ; "3")] 24 | #[test_case(r#####"tw`content-[attr(content-before)]`"#####, r#####"({ 25 | "--tw-content": "attr(content-before)", 26 | content: "var(--tw-content)", 27 | }) 28 | ;"##### ; "4")] 29 | #[test_case(r#####"tw`content-['>']`"#####, r#####"({ 30 | "--tw-content": "'>'", 31 | content: "var(--tw-content)", 32 | }) 33 | ;"##### ; "5")] 34 | #[test_case(r#####"tw`content-['—']`"#####, r#####"({ 35 | "--tw-content": "'\\u2014'", 36 | content: "var(--tw-content)", 37 | }) 38 | ;"##### ; "6")] 39 | #[test_case(r#####"tw`before:content-['—']`"#####, r#####"({ 40 | "::before": { 41 | "--tw-content": "'\\u2014'", 42 | content: "var(--tw-content)", 43 | }, 44 | }) 45 | ;"##### ; "7")] 46 | #[test_case(r#####"tw`before:(content-['—'] block)`"#####, r#####"({ 47 | "::before": { 48 | content: "var(--tw-content)", 49 | display: "block", 50 | "--tw-content": "'\\u2014'", 51 | }, 52 | }) 53 | ;"##### ; "8")] 54 | #[test_case(r#####"tw`content-none`"#####, r#####"({ 55 | "--tw-content": "none", 56 | content: "var(--tw-content)", 57 | }) 58 | ;"##### ; "9")] 59 | #[test_case(r#####"tw`before:block`"#####, r#####"({ 60 | "::before": { 61 | content: "var(--tw-content)", 62 | display: "block", 63 | }, 64 | }) 65 | ;"##### ; "10")] 66 | #[test_case(r#####"tw`peer-focus:before:block`"#####, r#####"({ 67 | ".peer:focus ~ &::before": { 68 | content: "var(--tw-content)", 69 | display: "block", 70 | }, 71 | })"##### ; "11")] 72 | fn test(input: &str, output: &str) { 73 | snapshot_inner(input, output) 74 | } 75 | -------------------------------------------------------------------------------- /src/snapshot/css_prop_emotion_auto_css_prop.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"
4 | ;"#####, r#####"
5 | ;"##### ; "0")] 6 | #[test_case(r#####"
"#####, r#####"
"##### ; "1")] 7 | fn test(input: &str, output: &str) { 8 | snapshot_inner(input, output) 9 | } 10 | -------------------------------------------------------------------------------- /src/snapshot/css_prop_emotion_auto_css_prop_with_styled.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw.div`block` 4 | ;"#####, r#####"_styled.div({ 5 | display: "block", 6 | }) 7 | 8 | ;"##### ; "0")] 9 | #[test_case(r#####"
"#####, r#####"
"##### ; "1")] 14 | #[test_case(r#####"const Test = tw.div`` 15 | ;"#####, r#####"const Test = _styled.div({}) 16 | 17 | ;"##### ; "2")] 18 | #[test_case(r#####""#####, r#####""##### ; "3")] 23 | fn test(input: &str, output: &str) { 24 | snapshot_inner(input, output) 25 | } 26 | -------------------------------------------------------------------------------- /src/snapshot/css_prop_styled_components_auto_css_prop.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"
4 | ;"#####, r#####"
5 | ;"##### ; "0")] 6 | #[test_case(r#####"
"#####, r#####"
"##### ; "1")] 7 | fn test(input: &str, output: &str) { 8 | snapshot_inner(input, output) 9 | } 10 | -------------------------------------------------------------------------------- /src/snapshot/css_prop_styled_components_auto_css_prop_with_styled.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw.div`block` 4 | ;"#####, r#####"_styled.div({ 5 | display: "block", 6 | }) 7 | 8 | ;"##### ; "0")] 9 | #[test_case(r#####"
"#####, r#####"
"##### ; "1")] 14 | #[test_case(r#####"const Test = tw.div`` 15 | ;"#####, r#####"const Test = _styled.div({}) 16 | 17 | ;"##### ; "2")] 18 | #[test_case(r#####""#####, r#####""##### ; "3")] 23 | fn test(input: &str, output: &str) { 24 | snapshot_inner(input, output) 25 | } 26 | -------------------------------------------------------------------------------- /src/snapshot/dark_light_mode_array_dark_light_mode_array.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`dark:block`"#####, r#####"({ 4 | ":is(.test-dark &)": { 5 | display: "block", 6 | }, 7 | }) 8 | ;"##### ; "0")] 9 | #[test_case(r#####"tw`light:block`"#####, r#####"({ 10 | ".test-light &": { 11 | display: "block", 12 | }, 13 | })"##### ; "1")] 14 | fn test(input: &str, output: &str) { 15 | snapshot_inner(input, output) 16 | } 17 | -------------------------------------------------------------------------------- /src/snapshot/fixtures_general.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"const styles = tw`uppercase`"#####, r#####"const styles = { 4 | textTransform: "uppercase", 5 | }"##### ; "0")] 6 | #[test_case(r#####"const Box = tw.div`text-red-500`"#####, r#####"const Box = _styled.div({ 7 | "--tw-text-opacity": "1", 8 | color: "rgb(239 68 68 / var(--tw-text-opacity))", 9 | })"##### ; "1")] 10 | #[test_case(r#####"const BoxExtended = tw(Box)`bg-blue-500`"#####, r#####"const BoxExtended = _styled(Box)({ 11 | "--tw-bg-opacity": "1", 12 | backgroundColor: "rgb(59 130 246 / var(--tw-bg-opacity))", 13 | })"##### ; "2")] 14 | #[test_case(r#####"const MediaProperty = tw`lg:uppercase`"#####, r#####"const MediaProperty = { 15 | "@media (min-width: 1024px)": { 16 | textTransform: "uppercase", 17 | }, 18 | }"##### ; "3")] 19 | #[test_case(r#####"const MediaColorProperty = tw.div`lg:text-red-500`"#####, r#####"const MediaColorProperty = _styled.div({ 20 | "@media (min-width: 1024px)": { 21 | "--tw-text-opacity": "1", 22 | color: "rgb(239 68 68 / var(--tw-text-opacity))", 23 | }, 24 | })"##### ; "4")] 25 | #[test_case(r#####"const ElementMediaColorProperty = tw(Box)`lg:bg-blue-500`"#####, r#####"const ElementMediaColorProperty = _styled(Box)({ 26 | "@media (min-width: 1024px)": { 27 | "--tw-bg-opacity": "1", 28 | backgroundColor: "rgb(59 130 246 / var(--tw-bg-opacity))", 29 | }, 30 | })"##### ; "5")] 31 | #[test_case(r#####"const MediaPropertyDuplicates = tw`lg:bg-blue-500 lg:bg-black`"#####, r#####"const MediaPropertyDuplicates = { 32 | "@media (min-width: 1024px)": { 33 | "--tw-bg-opacity": "1", 34 | backgroundColor: "rgb(59 130 246 / var(--tw-bg-opacity))", 35 | }, 36 | }"##### ; "6")] 37 | #[test_case(r#####"const plainConditional = true && "red""#####, r#####"const plainConditional = true && "red""##### ; "7")] 38 | #[test_case(r#####"const plainVariable = `bg-${plainConditional}-500`"#####, r#####"const plainVariable = `bg-${plainConditional}-500` 39 | ;"##### ; "8")] 40 | #[test_case(r#####"tw`${plainVariable}`"#####, r#####"({ 41 | "--tw-bg-opacity": "1", 42 | backgroundColor: "rgb(239 68 68 / var(--tw-bg-opacity))", 43 | })"##### ; "9")] 44 | fn test(input: &str, output: &str) { 45 | snapshot_inner(input, output) 46 | } 47 | -------------------------------------------------------------------------------- /src/snapshot/fixtures_ordering.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw.div`xl:bg-red-500 lg:bg-blue-500 bg-green-500 fill-current md:bg-pink-500 sm:bg-green-500 sm:text-yellow-500 hidden`"#####, r#####"_styled.div({ 4 | display: "none", 5 | "--tw-bg-opacity": "1", 6 | backgroundColor: "rgb(34 197 94 / var(--tw-bg-opacity))", 7 | fill: "currentColor", 8 | "@media (min-width: 640px)": { 9 | "--tw-bg-opacity": "1", 10 | backgroundColor: "rgb(34 197 94 / var(--tw-bg-opacity))", 11 | "--tw-text-opacity": "1", 12 | color: "rgb(234 179 8 / var(--tw-text-opacity))", 13 | }, 14 | "@media (min-width: 768px)": { 15 | "--tw-bg-opacity": "1", 16 | backgroundColor: "rgb(236 72 153 / var(--tw-bg-opacity))", 17 | }, 18 | "@media (min-width: 1024px)": { 19 | "--tw-bg-opacity": "1", 20 | backgroundColor: "rgb(59 130 246 / var(--tw-bg-opacity))", 21 | }, 22 | "@media (min-width: 1280px)": { 23 | "--tw-bg-opacity": "1", 24 | backgroundColor: "rgb(239 68 68 / var(--tw-bg-opacity))", 25 | }, 26 | }) // Bg opacity should trump the default bg opacity 27 | 28 | ;"##### ; "0")] 29 | #[test_case(r#####"tw`bg-opacity-50 bg-red-500`"#####, r#####"({ 30 | "--tw-bg-opacity": "0.5", 31 | backgroundColor: "rgb(239 68 68 / var(--tw-bg-opacity))", 32 | })"##### ; "1")] 33 | fn test(input: &str, output: &str) { 34 | snapshot_inner(input, output) 35 | } 36 | -------------------------------------------------------------------------------- /src/snapshot/fluid_container_fluid_container.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`fluid-container ml-10`"#####, r#####"({ 4 | marginLeft: "2.5rem", 5 | marginRight: "auto", 6 | width: "100%", 7 | ":focus": { 8 | marginLeft: "10rem", 9 | marginRight: "11rem", 10 | width: "100%", 11 | }, 12 | "@media (min-width: 1440px)": { 13 | display: "block", 14 | width: "75%", 15 | backgroundColor: "black", 16 | }, 17 | "@media (min-width: 768px)": { 18 | ":hover": { 19 | width: "25%", 20 | }, 21 | ":focus": { 22 | marginLeft: "auto", 23 | marginRight: "auto", 24 | width: "100%", 25 | }, 26 | }, 27 | "@media only screen and (max-width: 540px)": { 28 | width: "33%", 29 | backgroundColor: "red", 30 | }, 31 | })"##### ; "0")] 32 | fn test(input: &str, output: &str) { 33 | snapshot_inner(input, output) 34 | } 35 | -------------------------------------------------------------------------------- /src/snapshot/line_clamp_line_clamp.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`line-clamp-1`"#####, r#####"({ 4 | overflow: "hidden", 5 | display: "-webkit-box", 6 | WebkitBoxOrient: "vertical", 7 | WebkitLineClamp: "1", 8 | }) 9 | ;"##### ; "0")] 10 | #[test_case(r#####"tw`line-clamp-2`"#####, r#####"({ 11 | overflow: "hidden", 12 | display: "-webkit-box", 13 | WebkitBoxOrient: "vertical", 14 | WebkitLineClamp: "2", 15 | }) 16 | ;"##### ; "1")] 17 | #[test_case(r#####"tw`line-clamp-3`"#####, r#####"({ 18 | overflow: "hidden", 19 | display: "-webkit-box", 20 | WebkitBoxOrient: "vertical", 21 | WebkitLineClamp: "3", 22 | }) 23 | ;"##### ; "2")] 24 | #[test_case(r#####"tw`line-clamp-4`"#####, r#####"({ 25 | overflow: "hidden", 26 | display: "-webkit-box", 27 | WebkitBoxOrient: "vertical", 28 | WebkitLineClamp: "4", 29 | }) 30 | ;"##### ; "3")] 31 | #[test_case(r#####"tw`line-clamp-5`"#####, r#####"({ 32 | overflow: "hidden", 33 | display: "-webkit-box", 34 | WebkitBoxOrient: "vertical", 35 | WebkitLineClamp: "5", 36 | }) 37 | ;"##### ; "4")] 38 | #[test_case(r#####"tw`line-clamp-6`"#####, r#####"({ 39 | overflow: "hidden", 40 | display: "-webkit-box", 41 | WebkitBoxOrient: "vertical", 42 | WebkitLineClamp: "6", 43 | }) 44 | ;"##### ; "5")] 45 | #[test_case(r#####"tw`line-clamp-none`"#####, r#####"({ 46 | overflow: "visible", 47 | display: "block", 48 | WebkitBoxOrient: "horizontal", 49 | WebkitLineClamp: "none", 50 | })"##### ; "6")] 51 | fn test(input: &str, output: &str) { 52 | snapshot_inner(input, output) 53 | } 54 | -------------------------------------------------------------------------------- /src/snapshot/negative_negative.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`-z-1`"#####, r#####"({ 4 | zIndex: "-1", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`-z-10`"#####, r#####"({ 8 | zIndex: "-10", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`-inset-10`"#####, r#####"({ 12 | inset: "-2.5rem", 13 | })"##### ; "2")] 14 | fn test(input: &str, output: &str) { 15 | snapshot_inner(input, output) 16 | } 17 | -------------------------------------------------------------------------------- /src/snapshot/plugin_user_parent_selector_plugin_user_parent_selector.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`my-class1`"#####, r#####"({ 4 | backgroundColor: "black", 5 | "& h2": { 6 | backgroundColor: "red", 7 | }, 8 | }) 9 | ;"##### ; "0")] 10 | #[test_case(r#####"tw`my-class2`"#####, r#####"({ 11 | backgroundColor: "green", 12 | "h2 &": { 13 | backgroundColor: "yellow", 14 | }, 15 | }) 16 | ;"##### ; "1")] 17 | #[test_case(r#####"tw`my-class3`"#####, r#####"({ 18 | backgroundColor: "green", 19 | ".dark &:hover": { 20 | backgroundColor: "yellow", 21 | }, 22 | }) 23 | ;"##### ; "2")] 24 | #[test_case(r#####"tw`my-class4`"#####, r#####"({ 25 | ".test & :hover": { 26 | backgroundColor: "orange", 27 | }, 28 | }) 29 | ;"##### ; "3")] 30 | #[test_case(r#####"tw`my-class5`"#####, r#####"({ 31 | backgroundColor: "brown", 32 | ":hover": { 33 | backgroundColor: "pink", 34 | }, 35 | }) 36 | ;"##### ; "4")] 37 | #[test_case(r#####"tw`my-class6`"#####, r#####"({ 38 | backgroundColor: "blue", 39 | "& :hover": { 40 | backgroundColor: "orange", 41 | }, 42 | })"##### ; "5")] 43 | fn test(input: &str, output: &str) { 44 | snapshot_inner(input, output) 45 | } 46 | -------------------------------------------------------------------------------- /src/snapshot/presets_presets.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`text-badass`"#####, r#####"({ 4 | "--tw-text-opacity": "1", 5 | color: "rgb(186 218 85 / var(--tw-text-opacity))", 6 | }) 7 | ;"##### ; "0")] 8 | #[test_case(r#####"tw`text-banana`"#####, r#####"({ 9 | "--tw-text-opacity": "1", 10 | color: "rgb(255 255 0 / var(--tw-text-opacity))", 11 | }) 12 | ;"##### ; "1")] 13 | #[test_case(r#####"tw`text-hamburger`"#####, r#####"({ 14 | "--tw-text-opacity": "1", 15 | color: "rgb(165 42 42 / var(--tw-text-opacity))", 16 | }) 17 | ;"##### ; "2")] 18 | #[test_case(r#####"tw`active:text-white`"#####, r#####"({ 19 | ":active": { 20 | "--tw-text-opacity": "1", 21 | color: "rgb(255 255 255 / var(--tw-text-opacity))", 22 | }, 23 | }) 24 | ;"##### ; "3")] 25 | #[test_case(r#####"tw`hocus:text-black`"#####, r#####"({ 26 | ":hover": { 27 | "--tw-text-opacity": "1", 28 | color: "rgb(0 0 0 / var(--tw-text-opacity))", 29 | }, 30 | ":focus": { 31 | "--tw-text-opacity": "1", 32 | color: "rgb(0 0 0 / var(--tw-text-opacity))", 33 | }, 34 | })"##### ; "4")] 35 | fn test(input: &str, output: &str) { 36 | snapshot_inner(input, output) 37 | } 38 | -------------------------------------------------------------------------------- /src/snapshot/sassy_pseudo_sassy_pseudo.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`hover:block first:mt-2 last-of-type:max-width[20px]`"#####, r#####"({ 4 | "&:first-child": { 5 | marginTop: "0.5rem", 6 | }, 7 | "&:last-of-type": { 8 | maxWidth: "20px", 9 | }, 10 | "&:hover": { 11 | display: "block", 12 | }, 13 | }) 14 | ;"##### ; "0")] 15 | #[test_case(r#####"tw`hover:block first:mt-2 last-of-type:[max-width:20px]`"#####, r#####"({ 16 | "&:first-child": { 17 | marginTop: "0.5rem", 18 | }, 19 | "&:last-of-type": { 20 | maxWidth: "20px", 21 | }, 22 | "&:hover": { 23 | display: "block", 24 | }, 25 | }) 26 | ;"##### ; "1")] 27 | #[test_case(r#####"tw`my-class1`"#####, r#####"({ 28 | "&:hover": { 29 | backgroundColor: "pink", 30 | }, 31 | }) 32 | ;"##### ; "2")] 33 | #[test_case(r#####"tw`my-class2`"#####, r#####"({ 34 | "& :hover": { 35 | backgroundColor: "orange", 36 | }, 37 | }) 38 | ;"##### ; "3")] 39 | #[test_case(r#####"tw`my-class3`"#####, r#####"({ 40 | ".test & :hover": { 41 | backgroundColor: "orange", 42 | }, 43 | })"##### ; "4")] 44 | fn test(input: &str, output: &str) { 45 | snapshot_inner(input, output) 46 | } 47 | -------------------------------------------------------------------------------- /src/snapshot/screens_screens.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`sm:block`"#####, r#####"({ 4 | "@media (min-width: 640px)": { 5 | display: "block", 6 | }, 7 | }) 8 | ;"##### ; "0")] 9 | #[test_case(r#####"tw`md:block`"#####, r#####"({ 10 | "@media (min-width: 768px)": { 11 | display: "block", 12 | }, 13 | }) 14 | ;"##### ; "1")] 15 | #[test_case(r#####"tw`lg:block`"#####, r#####"({ 16 | "@media (min-width: 1024px)": { 17 | display: "block", 18 | }, 19 | }) 20 | ;"##### ; "2")] 21 | #[test_case(r#####"tw`xl:block`"#####, r#####"({ 22 | "@media (min-width: 1280px)": { 23 | display: "block", 24 | }, 25 | }) 26 | ;"##### ; "3")] 27 | #[test_case(r#####"tw`2xl:block`"#####, r#####"({ 28 | "@media (min-width: 1536px)": { 29 | display: "block", 30 | }, 31 | }) 32 | ;"##### ; "4")] 33 | #[test_case(r#####"tw`:font-bold`"#####, r#####"({ 34 | "@media (max-width: 399px)": { 35 | textDecorationLine: "underline", 36 | }, 37 | "@media (min-width: 500px)": { 38 | fontWeight: "700", 39 | }, 40 | })"##### ; "5")] 41 | fn test(input: &str, output: &str) { 42 | snapshot_inner(input, output) 43 | } 44 | -------------------------------------------------------------------------------- /src/snapshot/separator_separator.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`[&[data-foo][data-bar]:not([data-baz])]__underline`"#####, r#####"({ 4 | "&[data-foo][data-bar]:not([data-baz])": { 5 | textDecorationLine: "underline", 6 | }, 7 | })"##### ; "0")] 8 | fn test(input: &str, output: &str) { 9 | snapshot_inner(input, output) 10 | } 11 | -------------------------------------------------------------------------------- /src/snapshot/stitches_stitches_dot_syntax.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw.div`block`"#####, r#####"_styled("div", { 4 | display: "block", 5 | })"##### ; "0")] 6 | #[test_case(r#####"styled.div(tw`block`)"#####, r#####"_styled("div", { 7 | display: "block", 8 | })"##### ; "1")] 9 | #[test_case(r#####"styled.div({ display: "block" })"#####, r#####"_styled("div", { 10 | display: "block", 11 | })"##### ; "2")] 12 | #[test_case(r#####"styled("div", tw`block`)"#####, r#####"_styled("div", { 13 | display: "block", 14 | })"##### ; "3")] 15 | fn test(input: &str, output: &str) { 16 | snapshot_inner(input, output) 17 | } 18 | -------------------------------------------------------------------------------- /src/snapshot/user_plugin_ordering_user_plugin_ordering.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`selector`"#####, r#####"({ 4 | "@media (min-width: 1px)": { 5 | content: "@media .selector", 6 | "& .selector3": { 7 | content: "@media .selector .selector3", 8 | }, 9 | ":hover .selector2": { 10 | content: "@media .selector:hover .selector2", 11 | }, 12 | ":hover.selector2": { 13 | content: "@media .selector:hover.selector2", 14 | }, 15 | }, 16 | content: ".selector", 17 | "& .selector2": { 18 | content: ".selector .selector2", 19 | }, 20 | ":hover": { 21 | content: ".selector:hover", 22 | }, 23 | ":hover .selector3": { 24 | content: ".selector:hover .selector3", 25 | }, 26 | margin: "1px", 27 | padding: "padding", 28 | display: "block", 29 | "@media (min-width: 2px)": { 30 | content: "@media .selector", 31 | }, 32 | })"##### ; "0")] 33 | fn test(input: &str, output: &str) { 34 | snapshot_inner(input, output) 35 | } 36 | -------------------------------------------------------------------------------- /src/snapshot/utilities_accessibility_screen_readers.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`sr-only`"#####, r#####"({ 4 | position: "absolute", 5 | width: "1px", 6 | height: "1px", 7 | padding: "0", 8 | margin: "-1px", 9 | overflow: "hidden", 10 | clip: "rect(0, 0, 0, 0)", 11 | whiteSpace: "nowrap", 12 | borderWidth: "0", 13 | }) 14 | ;"##### ; "0")] 15 | #[test_case(r#####"tw`not-sr-only`"#####, r#####"({ 16 | position: "static", 17 | width: "auto", 18 | height: "auto", 19 | padding: "0", 20 | margin: "0", 21 | overflow: "visible", 22 | clip: "auto", 23 | whiteSpace: "normal", 24 | })"##### ; "1")] 25 | fn test(input: &str, output: &str) { 26 | snapshot_inner(input, output) 27 | } 28 | -------------------------------------------------------------------------------- /src/snapshot/utilities_backgrounds_background_attachment.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`bg-fixed`"#####, r#####"({ 4 | backgroundAttachment: "fixed", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`bg-local`"#####, r#####"({ 8 | backgroundAttachment: "local", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`bg-scroll`"#####, r#####"({ 12 | backgroundAttachment: "scroll", 13 | })"##### ; "2")] 14 | fn test(input: &str, output: &str) { 15 | snapshot_inner(input, output) 16 | } 17 | -------------------------------------------------------------------------------- /src/snapshot/utilities_backgrounds_background_clip.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`bg-clip-border`"#####, r#####"({ 4 | backgroundClip: "border-box", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`bg-clip-padding`"#####, r#####"({ 8 | backgroundClip: "padding-box", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`bg-clip-content`"#####, r#####"({ 12 | backgroundClip: "content-box", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`bg-clip-text`"#####, r#####"({ 16 | WebkitBackgroundClip: "text", 17 | backgroundClip: "text", 18 | })"##### ; "3")] 19 | fn test(input: &str, output: &str) { 20 | snapshot_inner(input, output) 21 | } 22 | -------------------------------------------------------------------------------- /src/snapshot/utilities_backgrounds_background_image.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`backgroundImage`"#####, r#####"({ 4 | none: "none", 5 | "gradient-to-t": "linear-gradient(to top, var(--tw-gradient-stops))", 6 | "gradient-to-tr": "linear-gradient(to top right, var(--tw-gradient-stops))", 7 | "gradient-to-r": "linear-gradient(to right, var(--tw-gradient-stops))", 8 | "gradient-to-br": 9 | "linear-gradient(to bottom right, var(--tw-gradient-stops))", 10 | "gradient-to-b": "linear-gradient(to bottom, var(--tw-gradient-stops))", 11 | "gradient-to-bl": "linear-gradient(to bottom left, var(--tw-gradient-stops))", 12 | "gradient-to-l": "linear-gradient(to left, var(--tw-gradient-stops))", 13 | "gradient-to-tl": "linear-gradient(to top left, var(--tw-gradient-stops))", 14 | }) 15 | ;"##### ; "0")] 16 | #[test_case(r#####"tw`bg-none`"#####, r#####"({ 17 | backgroundImage: "none", 18 | }) 19 | ;"##### ; "1")] 20 | #[test_case(r#####"tw`bg-gradient-to-t`"#####, r#####"({ 21 | backgroundImage: "linear-gradient(to top, var(--tw-gradient-stops))", 22 | }) 23 | ;"##### ; "2")] 24 | #[test_case(r#####"tw`bg-gradient-to-tr`"#####, r#####"({ 25 | backgroundImage: "linear-gradient(to top right, var(--tw-gradient-stops))", 26 | }) 27 | ;"##### ; "3")] 28 | #[test_case(r#####"tw`bg-gradient-to-r`"#####, r#####"({ 29 | backgroundImage: "linear-gradient(to right, var(--tw-gradient-stops))", 30 | }) 31 | ;"##### ; "4")] 32 | #[test_case(r#####"tw`bg-gradient-to-br`"#####, r#####"({ 33 | backgroundImage: "linear-gradient(to bottom right, var(--tw-gradient-stops))", 34 | }) 35 | ;"##### ; "5")] 36 | #[test_case(r#####"tw`bg-gradient-to-b`"#####, r#####"({ 37 | backgroundImage: "linear-gradient(to bottom, var(--tw-gradient-stops))", 38 | }) 39 | ;"##### ; "6")] 40 | #[test_case(r#####"tw`bg-gradient-to-bl`"#####, r#####"({ 41 | backgroundImage: "linear-gradient(to bottom left, var(--tw-gradient-stops))", 42 | }) 43 | ;"##### ; "7")] 44 | #[test_case(r#####"tw`bg-gradient-to-l`"#####, r#####"({ 45 | backgroundImage: "linear-gradient(to left, var(--tw-gradient-stops))", 46 | }) 47 | ;"##### ; "8")] 48 | #[test_case(r#####"tw`bg-gradient-to-tl`"#####, r#####"({ 49 | backgroundImage: "linear-gradient(to top left, var(--tw-gradient-stops))", 50 | }) 51 | ;"##### ; "9")] 52 | #[test_case(r#####"tw`bg-[image:custom]`"#####, r#####"({ 53 | backgroundImage: "custom", 54 | })"##### ; "10")] 55 | fn test(input: &str, output: &str) { 56 | snapshot_inner(input, output) 57 | } 58 | -------------------------------------------------------------------------------- /src/snapshot/utilities_backgrounds_background_opacity.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`bg-sky-500/100`"#####, r#####"({ 4 | backgroundColor: "rgb(14 165 233 / 1)", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`bg-sky-500/75`"#####, r#####"({ 8 | backgroundColor: "rgb(14 165 233 / 0.75)", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`bg-sky-500/50`"#####, r#####"({ 12 | backgroundColor: "rgb(14 165 233 / 0.5)", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`bg-sky-500/[.06]`"#####, r#####"({ 16 | backgroundColor: "rgb(14 165 233 / .06)", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`bg-opacity-0`"#####, r#####"({ 20 | "--tw-bg-opacity": "0", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`bg-opacity-5`"#####, r#####"({ 24 | "--tw-bg-opacity": "0.05", 25 | }) 26 | ;"##### ; "5")] 27 | #[test_case(r#####"tw`bg-opacity-10`"#####, r#####"({ 28 | "--tw-bg-opacity": "0.1", 29 | }) 30 | ;"##### ; "6")] 31 | #[test_case(r#####"tw`bg-opacity-20`"#####, r#####"({ 32 | "--tw-bg-opacity": "0.2", 33 | }) 34 | ;"##### ; "7")] 35 | #[test_case(r#####"tw`bg-opacity-25`"#####, r#####"({ 36 | "--tw-bg-opacity": "0.25", 37 | }) 38 | ;"##### ; "8")] 39 | #[test_case(r#####"tw`bg-opacity-30`"#####, r#####"({ 40 | "--tw-bg-opacity": "0.3", 41 | }) 42 | ;"##### ; "9")] 43 | #[test_case(r#####"tw`bg-opacity-40`"#####, r#####"({ 44 | "--tw-bg-opacity": "0.4", 45 | }) 46 | ;"##### ; "10")] 47 | #[test_case(r#####"tw`bg-opacity-50`"#####, r#####"({ 48 | "--tw-bg-opacity": "0.5", 49 | }) 50 | ;"##### ; "11")] 51 | #[test_case(r#####"tw`bg-opacity-60`"#####, r#####"({ 52 | "--tw-bg-opacity": "0.6", 53 | }) 54 | ;"##### ; "12")] 55 | #[test_case(r#####"tw`bg-opacity-70`"#####, r#####"({ 56 | "--tw-bg-opacity": "0.7", 57 | }) 58 | ;"##### ; "13")] 59 | #[test_case(r#####"tw`bg-opacity-75`"#####, r#####"({ 60 | "--tw-bg-opacity": "0.75", 61 | }) 62 | ;"##### ; "14")] 63 | #[test_case(r#####"tw`bg-opacity-80`"#####, r#####"({ 64 | "--tw-bg-opacity": "0.8", 65 | }) 66 | ;"##### ; "15")] 67 | #[test_case(r#####"tw`bg-opacity-90`"#####, r#####"({ 68 | "--tw-bg-opacity": "0.9", 69 | }) 70 | ;"##### ; "16")] 71 | #[test_case(r#####"tw`bg-opacity-95`"#####, r#####"({ 72 | "--tw-bg-opacity": "0.95", 73 | }) 74 | ;"##### ; "17")] 75 | #[test_case(r#####"tw`bg-opacity-100`"#####, r#####"({ 76 | "--tw-bg-opacity": "1", 77 | }) 78 | ;"##### ; "18")] 79 | #[test_case(r#####"tw`bg-opacity-[0.11]`"#####, r#####"({ 80 | "--tw-bg-opacity": "0.11", 81 | }) 82 | ;"##### ; "19")] 83 | #[test_case(r#####"tw`bg-opacity-[var(--value)]`"#####, r#####"({ 84 | "--tw-bg-opacity": "var(--value)", 85 | })"##### ; "20")] 86 | fn test(input: &str, output: &str) { 87 | snapshot_inner(input, output) 88 | } 89 | -------------------------------------------------------------------------------- /src/snapshot/utilities_backgrounds_background_origin.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`bg-origin-border`"#####, r#####"({ 4 | backgroundOrigin: "border-box", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`bg-origin-padding`"#####, r#####"({ 8 | backgroundOrigin: "padding-box", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`bg-origin-content`"#####, r#####"({ 12 | backgroundOrigin: "content-box", 13 | })"##### ; "2")] 14 | fn test(input: &str, output: &str) { 15 | snapshot_inner(input, output) 16 | } 17 | -------------------------------------------------------------------------------- /src/snapshot/utilities_backgrounds_background_position.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`bg-bottom`"#####, r#####"({ 4 | backgroundPosition: "bottom", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`bg-center`"#####, r#####"({ 8 | backgroundPosition: "center", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`bg-left`"#####, r#####"({ 12 | backgroundPosition: "left", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`bg-left-bottom`"#####, r#####"({ 16 | backgroundPosition: "left bottom", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`bg-left-top`"#####, r#####"({ 20 | backgroundPosition: "left top", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`bg-right`"#####, r#####"({ 24 | backgroundPosition: "right", 25 | }) 26 | ;"##### ; "5")] 27 | #[test_case(r#####"tw`bg-right-bottom`"#####, r#####"({ 28 | backgroundPosition: "right bottom", 29 | }) 30 | ;"##### ; "6")] 31 | #[test_case(r#####"tw`bg-right-top`"#####, r#####"({ 32 | backgroundPosition: "right top", 33 | }) 34 | ;"##### ; "7")] 35 | #[test_case(r#####"tw`bg-top`"#####, r#####"({ 36 | backgroundPosition: "top", 37 | }) 38 | ;"##### ; "8")] 39 | #[test_case(r#####"tw`bg-[position:200px 100px]`"#####, r#####"({ 40 | backgroundPosition: "200px 100px", 41 | }) 42 | ;"##### ; "9")] 43 | #[test_case(r#####"tw`bg-[position:var(--value)]`"#####, r#####"({ 44 | backgroundPosition: "var(--value)", 45 | }) 46 | ;"##### ; "10")] 47 | #[test_case(r#####"tw`bg-[center top 1rem]`"#####, r#####"({ 48 | backgroundPosition: "center top 1rem", 49 | })"##### ; "11")] 50 | fn test(input: &str, output: &str) { 51 | snapshot_inner(input, output) 52 | } 53 | -------------------------------------------------------------------------------- /src/snapshot/utilities_backgrounds_background_repeat.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`backgroundPosition`"#####, r#####"({ 4 | bottom: "bottom", 5 | center: "center", 6 | left: "left", 7 | "left-bottom": "left bottom", 8 | "left-top": "left top", 9 | right: "right", 10 | "right-bottom": "right bottom", 11 | "right-top": "right top", 12 | top: "top", 13 | }) 14 | ;"##### ; "0")] 15 | #[test_case(r#####"tw`bg-repeat`"#####, r#####"({ 16 | backgroundRepeat: "repeat", 17 | }) 18 | ;"##### ; "1")] 19 | #[test_case(r#####"tw`bg-no-repeat`"#####, r#####"({ 20 | backgroundRepeat: "no-repeat", 21 | }) 22 | ;"##### ; "2")] 23 | #[test_case(r#####"tw`bg-repeat-x`"#####, r#####"({ 24 | backgroundRepeat: "repeat-x", 25 | }) 26 | ;"##### ; "3")] 27 | #[test_case(r#####"tw`bg-repeat-y`"#####, r#####"({ 28 | backgroundRepeat: "repeat-y", 29 | }) 30 | ;"##### ; "4")] 31 | #[test_case(r#####"tw`bg-repeat-round`"#####, r#####"({ 32 | backgroundRepeat: "round", 33 | }) 34 | ;"##### ; "5")] 35 | #[test_case(r#####"tw`bg-repeat-space`"#####, r#####"({ 36 | backgroundRepeat: "space", 37 | })"##### ; "6")] 38 | fn test(input: &str, output: &str) { 39 | snapshot_inner(input, output) 40 | } 41 | -------------------------------------------------------------------------------- /src/snapshot/utilities_backgrounds_background_size.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`backgroundSize`"#####, r#####"({ 4 | auto: "auto", 5 | cover: "cover", 6 | contain: "contain", 7 | }) 8 | ;"##### ; "0")] 9 | #[test_case(r#####"tw`bg-auto`"#####, r#####"({ 10 | backgroundSize: "auto", 11 | }) 12 | ;"##### ; "1")] 13 | #[test_case(r#####"tw`bg-cover`"#####, r#####"({ 14 | backgroundSize: "cover", 15 | }) 16 | ;"##### ; "2")] 17 | #[test_case(r#####"tw`bg-contain`"#####, r#####"({ 18 | backgroundSize: "contain", 19 | }) 20 | ;"##### ; "3")] 21 | #[test_case(r#####"tw`bg-[length:var(--value)]`"#####, r#####"({ 22 | backgroundSize: "var(--value)", 23 | })"##### ; "4")] 24 | fn test(input: &str, output: &str) { 25 | snapshot_inner(input, output) 26 | } 27 | -------------------------------------------------------------------------------- /src/snapshot/utilities_borders_border_opacity.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`border-opacity-0`"#####, r#####"({ 4 | "--tw-border-opacity": "0", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`border-opacity-5`"#####, r#####"({ 8 | "--tw-border-opacity": "0.05", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`border-opacity-10`"#####, r#####"({ 12 | "--tw-border-opacity": "0.1", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`border-opacity-20`"#####, r#####"({ 16 | "--tw-border-opacity": "0.2", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`border-opacity-25`"#####, r#####"({ 20 | "--tw-border-opacity": "0.25", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`border-opacity-30`"#####, r#####"({ 24 | "--tw-border-opacity": "0.3", 25 | }) 26 | ;"##### ; "5")] 27 | #[test_case(r#####"tw`border-opacity-40`"#####, r#####"({ 28 | "--tw-border-opacity": "0.4", 29 | }) 30 | ;"##### ; "6")] 31 | #[test_case(r#####"tw`border-opacity-50`"#####, r#####"({ 32 | "--tw-border-opacity": "0.5", 33 | }) 34 | ;"##### ; "7")] 35 | #[test_case(r#####"tw`border-opacity-60`"#####, r#####"({ 36 | "--tw-border-opacity": "0.6", 37 | }) 38 | ;"##### ; "8")] 39 | #[test_case(r#####"tw`border-opacity-70`"#####, r#####"({ 40 | "--tw-border-opacity": "0.7", 41 | }) 42 | ;"##### ; "9")] 43 | #[test_case(r#####"tw`border-opacity-75`"#####, r#####"({ 44 | "--tw-border-opacity": "0.75", 45 | }) 46 | ;"##### ; "10")] 47 | #[test_case(r#####"tw`border-opacity-80`"#####, r#####"({ 48 | "--tw-border-opacity": "0.8", 49 | }) 50 | ;"##### ; "11")] 51 | #[test_case(r#####"tw`border-opacity-90`"#####, r#####"({ 52 | "--tw-border-opacity": "0.9", 53 | }) 54 | ;"##### ; "12")] 55 | #[test_case(r#####"tw`border-opacity-95`"#####, r#####"({ 56 | "--tw-border-opacity": "0.95", 57 | }) 58 | ;"##### ; "13")] 59 | #[test_case(r#####"tw`border-opacity-100`"#####, r#####"({ 60 | "--tw-border-opacity": "1", 61 | })"##### ; "14")] 62 | fn test(input: &str, output: &str) { 63 | snapshot_inner(input, output) 64 | } 65 | -------------------------------------------------------------------------------- /src/snapshot/utilities_borders_border_style.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`border-solid`"#####, r#####"({ 4 | borderStyle: "solid", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`border-dashed`"#####, r#####"({ 8 | borderStyle: "dashed", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`border-dotted`"#####, r#####"({ 12 | borderStyle: "dotted", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`border-double`"#####, r#####"({ 16 | borderStyle: "double", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`border-hidden`"#####, r#####"({ 20 | borderStyle: "hidden", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`border-none`"#####, r#####"({ 24 | borderStyle: "none", 25 | })"##### ; "5")] 26 | fn test(input: &str, output: &str) { 27 | snapshot_inner(input, output) 28 | } 29 | -------------------------------------------------------------------------------- /src/snapshot/utilities_borders_divide_style.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`divide-solid`"#####, r#####"({ 4 | "> :not([hidden]) ~ :not([hidden])": { 5 | borderStyle: "solid", 6 | }, 7 | }) 8 | ;"##### ; "0")] 9 | #[test_case(r#####"tw`divide-dashed`"#####, r#####"({ 10 | "> :not([hidden]) ~ :not([hidden])": { 11 | borderStyle: "dashed", 12 | }, 13 | }) 14 | ;"##### ; "1")] 15 | #[test_case(r#####"tw`divide-dotted`"#####, r#####"({ 16 | "> :not([hidden]) ~ :not([hidden])": { 17 | borderStyle: "dotted", 18 | }, 19 | }) 20 | ;"##### ; "2")] 21 | #[test_case(r#####"tw`divide-double`"#####, r#####"({ 22 | "> :not([hidden]) ~ :not([hidden])": { 23 | borderStyle: "double", 24 | }, 25 | }) 26 | ;"##### ; "3")] 27 | #[test_case(r#####"tw`divide-none`"#####, r#####"({ 28 | "> :not([hidden]) ~ :not([hidden])": { 29 | borderStyle: "none", 30 | }, 31 | })"##### ; "4")] 32 | fn test(input: &str, output: &str) { 33 | snapshot_inner(input, output) 34 | } 35 | -------------------------------------------------------------------------------- /src/snapshot/utilities_borders_outline_offset.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`outlineOffset`"#####, r#####"({ 4 | 0: "0px", 5 | 1: "1px", 6 | 2: "2px", 7 | 4: "4px", 8 | 8: "8px", 9 | }) 10 | ;"##### ; "0")] 11 | #[test_case(r#####"tw`outline-offset-0`"#####, r#####"({ 12 | outlineOffset: "0px", 13 | }) 14 | ;"##### ; "1")] 15 | #[test_case(r#####"tw`outline-offset-1`"#####, r#####"({ 16 | outlineOffset: "1px", 17 | }) 18 | ;"##### ; "2")] 19 | #[test_case(r#####"tw`outline-offset-2`"#####, r#####"({ 20 | outlineOffset: "2px", 21 | }) 22 | ;"##### ; "3")] 23 | #[test_case(r#####"tw`outline-offset-4`"#####, r#####"({ 24 | outlineOffset: "4px", 25 | }) 26 | ;"##### ; "4")] 27 | #[test_case(r#####"tw`outline-offset-8`"#####, r#####"({ 28 | outlineOffset: "8px", 29 | }) 30 | ;"##### ; "5")] 31 | #[test_case(r#####"tw`-outline-offset-1`"#####, r#####"({ 32 | outlineOffset: "-1px", 33 | }) 34 | ;"##### ; "6")] 35 | #[test_case(r#####"tw`outline-offset-[3px]`"#####, r#####"({ 36 | outlineOffset: "3px", 37 | })"##### ; "7")] 38 | fn test(input: &str, output: &str) { 39 | snapshot_inner(input, output) 40 | } 41 | -------------------------------------------------------------------------------- /src/snapshot/utilities_borders_outline_style.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`outline`"#####, r#####"({ 4 | outlineStyle: "solid", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`outline-none`"#####, r#####"({ 8 | outline: "2px solid transparent", 9 | outlineOffset: "2px", 10 | }) 11 | ;"##### ; "1")] 12 | #[test_case(r#####"tw`outline-dashed`"#####, r#####"({ 13 | outlineStyle: "dashed", 14 | }) 15 | ;"##### ; "2")] 16 | #[test_case(r#####"tw`outline-dotted`"#####, r#####"({ 17 | outlineStyle: "dotted", 18 | }) 19 | ;"##### ; "3")] 20 | #[test_case(r#####"tw`outline-double`"#####, r#####"({ 21 | outlineStyle: "double", 22 | })"##### ; "4")] 23 | fn test(input: &str, output: &str) { 24 | snapshot_inner(input, output) 25 | } 26 | -------------------------------------------------------------------------------- /src/snapshot/utilities_borders_outline_width.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`outlineWidth`"#####, r#####"({ 4 | 0: "0px", 5 | 1: "1px", 6 | 2: "2px", 7 | 4: "4px", 8 | 8: "8px", 9 | }) 10 | ;"##### ; "0")] 11 | #[test_case(r#####"tw`outline-0`"#####, r#####"({ 12 | outlineWidth: "0px", 13 | }) 14 | ;"##### ; "1")] 15 | #[test_case(r#####"tw`outline-1`"#####, r#####"({ 16 | outlineWidth: "1px", 17 | }) 18 | ;"##### ; "2")] 19 | #[test_case(r#####"tw`outline-2`"#####, r#####"({ 20 | outlineWidth: "2px", 21 | }) 22 | ;"##### ; "3")] 23 | #[test_case(r#####"tw`outline-4`"#####, r#####"({ 24 | outlineWidth: "4px", 25 | }) 26 | ;"##### ; "4")] 27 | #[test_case(r#####"tw`outline-8`"#####, r#####"({ 28 | outlineWidth: "8px", 29 | }) 30 | ;"##### ; "5")] 31 | #[test_case(r#####"tw`outline outline-offset-2 outline-1`"#####, r#####"({ 32 | outlineStyle: "solid", 33 | outlineWidth: "1px", 34 | outlineOffset: "2px", 35 | }) 36 | ;"##### ; "6")] 37 | #[test_case(r#####"tw`outline-[5px]`"#####, r#####"({ 38 | outlineWidth: "5px", 39 | })"##### ; "7")] 40 | fn test(input: &str, output: &str) { 41 | snapshot_inner(input, output) 42 | } 43 | -------------------------------------------------------------------------------- /src/snapshot/utilities_borders_ring_offset_width.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`ringOffsetWidth`"#####, r#####"({ 4 | 0: "0px", 5 | 1: "1px", 6 | 2: "2px", 7 | 4: "4px", 8 | 8: "8px", 9 | }) 10 | ;"##### ; "0")] 11 | #[test_case(r#####"tw`ring-offset-0`"#####, r#####"({ 12 | "--tw-ring-offset-width": "0px", 13 | }) 14 | ;"##### ; "1")] 15 | #[test_case(r#####"tw`ring-offset-1`"#####, r#####"({ 16 | "--tw-ring-offset-width": "1px", 17 | }) 18 | ;"##### ; "2")] 19 | #[test_case(r#####"tw`ring-offset-2`"#####, r#####"({ 20 | "--tw-ring-offset-width": "2px", 21 | }) 22 | ;"##### ; "3")] 23 | #[test_case(r#####"tw`ring-offset-4`"#####, r#####"({ 24 | "--tw-ring-offset-width": "4px", 25 | }) 26 | ;"##### ; "4")] 27 | #[test_case(r#####"tw`ring-offset-8`"#####, r#####"({ 28 | "--tw-ring-offset-width": "8px", 29 | }) 30 | ;"##### ; "5")] 31 | #[test_case(r#####"tw`ring-offset-[3px]`"#####, r#####"({ 32 | "--tw-ring-offset-width": "3px", 33 | }) 34 | ;"##### ; "6")] 35 | #[test_case(r#####"tw`ring-offset-[19rem]`"#####, r#####"({ 36 | "--tw-ring-offset-width": "19rem", 37 | }) 38 | ;"##### ; "7")] 39 | #[test_case(r#####"tw`ring-offset-[#76ad65]`"#####, r#####"({ 40 | "--tw-ring-offset-color": "#76ad65", 41 | })"##### ; "8")] 42 | fn test(input: &str, output: &str) { 43 | snapshot_inner(input, output) 44 | } 45 | -------------------------------------------------------------------------------- /src/snapshot/utilities_borders_ring_opacity.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`ring-opacity-0`"#####, r#####"({ 4 | "--tw-ring-opacity": "0", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`ring-opacity-5`"#####, r#####"({ 8 | "--tw-ring-opacity": "0.05", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`ring-opacity-10`"#####, r#####"({ 12 | "--tw-ring-opacity": "0.1", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`ring-opacity-20`"#####, r#####"({ 16 | "--tw-ring-opacity": "0.2", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`ring-opacity-25`"#####, r#####"({ 20 | "--tw-ring-opacity": "0.25", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`ring-opacity-30`"#####, r#####"({ 24 | "--tw-ring-opacity": "0.3", 25 | }) 26 | ;"##### ; "5")] 27 | #[test_case(r#####"tw`ring-opacity-40`"#####, r#####"({ 28 | "--tw-ring-opacity": "0.4", 29 | }) 30 | ;"##### ; "6")] 31 | #[test_case(r#####"tw`ring-opacity-50`"#####, r#####"({ 32 | "--tw-ring-opacity": "0.5", 33 | }) 34 | ;"##### ; "7")] 35 | #[test_case(r#####"tw`ring-opacity-60`"#####, r#####"({ 36 | "--tw-ring-opacity": "0.6", 37 | }) 38 | ;"##### ; "8")] 39 | #[test_case(r#####"tw`ring-opacity-70`"#####, r#####"({ 40 | "--tw-ring-opacity": "0.7", 41 | }) 42 | ;"##### ; "9")] 43 | #[test_case(r#####"tw`ring-opacity-75`"#####, r#####"({ 44 | "--tw-ring-opacity": "0.75", 45 | }) 46 | ;"##### ; "10")] 47 | #[test_case(r#####"tw`ring-opacity-80`"#####, r#####"({ 48 | "--tw-ring-opacity": "0.8", 49 | }) 50 | ;"##### ; "11")] 51 | #[test_case(r#####"tw`ring-opacity-90`"#####, r#####"({ 52 | "--tw-ring-opacity": "0.9", 53 | }) 54 | ;"##### ; "12")] 55 | #[test_case(r#####"tw`ring-opacity-95`"#####, r#####"({ 56 | "--tw-ring-opacity": "0.95", 57 | }) 58 | ;"##### ; "13")] 59 | #[test_case(r#####"tw`ring-opacity-100`"#####, r#####"({ 60 | "--tw-ring-opacity": "1", 61 | }) 62 | ;"##### ; "14")] 63 | #[test_case(r#####"tw`ring-opacity-[var(--ring-opacity)]`"#####, r#####"({ 64 | "--tw-ring-opacity": "var(--ring-opacity)", 65 | })"##### ; "15")] 66 | fn test(input: &str, output: &str) { 67 | snapshot_inner(input, output) 68 | } 69 | -------------------------------------------------------------------------------- /src/snapshot/utilities_effects_background_blend_mode.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`bg-blend-normal`"#####, r#####"({ 4 | backgroundBlendMode: "normal", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`bg-blend-multiply`"#####, r#####"({ 8 | backgroundBlendMode: "multiply", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`bg-blend-screen`"#####, r#####"({ 12 | backgroundBlendMode: "screen", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`bg-blend-overlay`"#####, r#####"({ 16 | backgroundBlendMode: "overlay", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`bg-blend-darken`"#####, r#####"({ 20 | backgroundBlendMode: "darken", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`bg-blend-lighten`"#####, r#####"({ 24 | backgroundBlendMode: "lighten", 25 | }) 26 | ;"##### ; "5")] 27 | #[test_case(r#####"tw`bg-blend-color-dodge`"#####, r#####"({ 28 | backgroundBlendMode: "color-dodge", 29 | }) 30 | ;"##### ; "6")] 31 | #[test_case(r#####"tw`bg-blend-color-burn`"#####, r#####"({ 32 | backgroundBlendMode: "color-burn", 33 | }) 34 | ;"##### ; "7")] 35 | #[test_case(r#####"tw`bg-blend-hard-light`"#####, r#####"({ 36 | backgroundBlendMode: "hard-light", 37 | }) 38 | ;"##### ; "8")] 39 | #[test_case(r#####"tw`bg-blend-soft-light`"#####, r#####"({ 40 | backgroundBlendMode: "soft-light", 41 | }) 42 | ;"##### ; "9")] 43 | #[test_case(r#####"tw`bg-blend-difference`"#####, r#####"({ 44 | backgroundBlendMode: "difference", 45 | }) 46 | ;"##### ; "10")] 47 | #[test_case(r#####"tw`bg-blend-exclusion`"#####, r#####"({ 48 | backgroundBlendMode: "exclusion", 49 | }) 50 | ;"##### ; "11")] 51 | #[test_case(r#####"tw`bg-blend-hue`"#####, r#####"({ 52 | backgroundBlendMode: "hue", 53 | }) 54 | ;"##### ; "12")] 55 | #[test_case(r#####"tw`bg-blend-saturation`"#####, r#####"({ 56 | backgroundBlendMode: "saturation", 57 | }) 58 | ;"##### ; "13")] 59 | #[test_case(r#####"tw`bg-blend-color`"#####, r#####"({ 60 | backgroundBlendMode: "color", 61 | }) 62 | ;"##### ; "14")] 63 | #[test_case(r#####"tw`bg-blend-luminosity`"#####, r#####"({ 64 | backgroundBlendMode: "luminosity", 65 | })"##### ; "15")] 66 | fn test(input: &str, output: &str) { 67 | snapshot_inner(input, output) 68 | } 69 | -------------------------------------------------------------------------------- /src/snapshot/utilities_effects_mix_blend_mode.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`mix-blend-normal`"#####, r#####"({ 4 | mixBlendMode: "normal", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`mix-blend-multiply`"#####, r#####"({ 8 | mixBlendMode: "multiply", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`mix-blend-screen`"#####, r#####"({ 12 | mixBlendMode: "screen", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`mix-blend-overlay`"#####, r#####"({ 16 | mixBlendMode: "overlay", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`mix-blend-darken`"#####, r#####"({ 20 | mixBlendMode: "darken", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`mix-blend-lighten`"#####, r#####"({ 24 | mixBlendMode: "lighten", 25 | }) 26 | ;"##### ; "5")] 27 | #[test_case(r#####"tw`mix-blend-color-dodge`"#####, r#####"({ 28 | mixBlendMode: "color-dodge", 29 | }) 30 | ;"##### ; "6")] 31 | #[test_case(r#####"tw`mix-blend-color-burn`"#####, r#####"({ 32 | mixBlendMode: "color-burn", 33 | }) 34 | ;"##### ; "7")] 35 | #[test_case(r#####"tw`mix-blend-hard-light`"#####, r#####"({ 36 | mixBlendMode: "hard-light", 37 | }) 38 | ;"##### ; "8")] 39 | #[test_case(r#####"tw`mix-blend-soft-light`"#####, r#####"({ 40 | mixBlendMode: "soft-light", 41 | }) 42 | ;"##### ; "9")] 43 | #[test_case(r#####"tw`mix-blend-difference`"#####, r#####"({ 44 | mixBlendMode: "difference", 45 | }) 46 | ;"##### ; "10")] 47 | #[test_case(r#####"tw`mix-blend-exclusion`"#####, r#####"({ 48 | mixBlendMode: "exclusion", 49 | }) 50 | ;"##### ; "11")] 51 | #[test_case(r#####"tw`mix-blend-hue`"#####, r#####"({ 52 | mixBlendMode: "hue", 53 | }) 54 | ;"##### ; "12")] 55 | #[test_case(r#####"tw`mix-blend-saturation`"#####, r#####"({ 56 | mixBlendMode: "saturation", 57 | }) 58 | ;"##### ; "13")] 59 | #[test_case(r#####"tw`mix-blend-color`"#####, r#####"({ 60 | mixBlendMode: "color", 61 | }) 62 | ;"##### ; "14")] 63 | #[test_case(r#####"tw`mix-blend-luminosity`"#####, r#####"({ 64 | mixBlendMode: "luminosity", 65 | }) 66 | ;"##### ; "15")] 67 | #[test_case(r#####"tw`mix-blend-plus-lighter`"#####, r#####"({ 68 | mixBlendMode: "plus-lighter", 69 | })"##### ; "16")] 70 | fn test(input: &str, output: &str) { 71 | snapshot_inner(input, output) 72 | } 73 | -------------------------------------------------------------------------------- /src/snapshot/utilities_effects_opacity.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`opacity`"#####, r#####"({ 4 | 0: "0", 5 | 5: "0.05", 6 | 10: "0.1", 7 | 20: "0.2", 8 | 25: "0.25", 9 | 30: "0.3", 10 | 40: "0.4", 11 | 50: "0.5", 12 | 60: "0.6", 13 | 70: "0.7", 14 | 75: "0.75", 15 | 80: "0.8", 16 | 90: "0.9", 17 | 95: "0.95", 18 | 100: "1", 19 | }) 20 | ;"##### ; "0")] 21 | #[test_case(r#####"tw`opacity-0`"#####, r#####"({ 22 | opacity: "0", 23 | }) 24 | ;"##### ; "1")] 25 | #[test_case(r#####"tw`opacity-5`"#####, r#####"({ 26 | opacity: "0.05", 27 | }) 28 | ;"##### ; "2")] 29 | #[test_case(r#####"tw`opacity-10`"#####, r#####"({ 30 | opacity: "0.1", 31 | }) 32 | ;"##### ; "3")] 33 | #[test_case(r#####"tw`opacity-20`"#####, r#####"({ 34 | opacity: "0.2", 35 | }) 36 | ;"##### ; "4")] 37 | #[test_case(r#####"tw`opacity-25`"#####, r#####"({ 38 | opacity: "0.25", 39 | }) 40 | ;"##### ; "5")] 41 | #[test_case(r#####"tw`opacity-30`"#####, r#####"({ 42 | opacity: "0.3", 43 | }) 44 | ;"##### ; "6")] 45 | #[test_case(r#####"tw`opacity-40`"#####, r#####"({ 46 | opacity: "0.4", 47 | }) 48 | ;"##### ; "7")] 49 | #[test_case(r#####"tw`opacity-50`"#####, r#####"({ 50 | opacity: "0.5", 51 | }) 52 | ;"##### ; "8")] 53 | #[test_case(r#####"tw`opacity-60`"#####, r#####"({ 54 | opacity: "0.6", 55 | }) 56 | ;"##### ; "9")] 57 | #[test_case(r#####"tw`opacity-70`"#####, r#####"({ 58 | opacity: "0.7", 59 | }) 60 | ;"##### ; "10")] 61 | #[test_case(r#####"tw`opacity-75`"#####, r#####"({ 62 | opacity: "0.75", 63 | }) 64 | ;"##### ; "11")] 65 | #[test_case(r#####"tw`opacity-80`"#####, r#####"({ 66 | opacity: "0.8", 67 | }) 68 | ;"##### ; "12")] 69 | #[test_case(r#####"tw`opacity-90`"#####, r#####"({ 70 | opacity: "0.9", 71 | }) 72 | ;"##### ; "13")] 73 | #[test_case(r#####"tw`opacity-95`"#####, r#####"({ 74 | opacity: "0.95", 75 | }) 76 | ;"##### ; "14")] 77 | #[test_case(r#####"tw`opacity-100`"#####, r#####"({ 78 | opacity: "1", 79 | }) 80 | ;"##### ; "15")] 81 | #[test_case(r#####"tw`opacity-[.1]`"#####, r#####"({ 82 | opacity: ".1", 83 | }) 84 | ;"##### ; "16")] 85 | #[test_case(r#####"tw`opacity-[var(--opacity)]`"#####, r#####"({ 86 | opacity: "var(--opacity)", 87 | })"##### ; "17")] 88 | fn test(input: &str, output: &str) { 89 | snapshot_inner(input, output) 90 | } 91 | -------------------------------------------------------------------------------- /src/snapshot/utilities_filters_backdrop_grayscale.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`backdropGrayscale.`"#####, r#####"({ 4 | 0: "0", 5 | DEFAULT: "100%", 6 | }) 7 | ;"##### ; "0")] 8 | #[test_case(r#####"tw`backdrop-grayscale-0`"#####, r#####"({ 9 | "--tw-backdrop-grayscale": "grayscale(0)", 10 | backdropFilter: 11 | "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)", 12 | }) 13 | ;"##### ; "1")] 14 | #[test_case(r#####"tw`backdrop-grayscale`"#####, r#####"({ 15 | "--tw-backdrop-grayscale": "grayscale(100%)", 16 | backdropFilter: 17 | "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)", 18 | }) 19 | ;"##### ; "2")] 20 | #[test_case(r#####"tw`backdrop-grayscale-[.5]`"#####, r#####"({ 21 | "--tw-backdrop-grayscale": "grayscale(.5)", 22 | backdropFilter: 23 | "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)", 24 | })"##### ; "3")] 25 | fn test(input: &str, output: &str) { 26 | snapshot_inner(input, output) 27 | } 28 | -------------------------------------------------------------------------------- /src/snapshot/utilities_filters_backdrop_invert.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`backdropInvert.`"#####, r#####"({ 4 | 0: "0", 5 | DEFAULT: "100%", 6 | }) 7 | ;"##### ; "0")] 8 | #[test_case(r#####"tw`backdrop-invert-0`"#####, r#####"({ 9 | "--tw-backdrop-invert": "invert(0)", 10 | backdropFilter: 11 | "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)", 12 | }) 13 | ;"##### ; "1")] 14 | #[test_case(r#####"tw`backdrop-invert`"#####, r#####"({ 15 | "--tw-backdrop-invert": "invert(100%)", 16 | backdropFilter: 17 | "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)", 18 | }) 19 | ;"##### ; "2")] 20 | #[test_case(r#####"tw`backdrop-invert-[.25]`"#####, r#####"({ 21 | "--tw-backdrop-invert": "invert(.25)", 22 | backdropFilter: 23 | "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)", 24 | })"##### ; "3")] 25 | fn test(input: &str, output: &str) { 26 | snapshot_inner(input, output) 27 | } 28 | -------------------------------------------------------------------------------- /src/snapshot/utilities_filters_backdrop_saturate.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`backdropSaturate`"#####, r#####"({ 4 | 0: "0", 5 | 50: ".5", 6 | 100: "1", 7 | 150: "1.5", 8 | 200: "2", 9 | }) 10 | ;"##### ; "0")] 11 | #[test_case(r#####"tw`backdrop-saturate-0`"#####, r#####"({ 12 | "--tw-backdrop-saturate": "saturate(0)", 13 | backdropFilter: 14 | "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)", 15 | }) 16 | ;"##### ; "1")] 17 | #[test_case(r#####"tw`backdrop-saturate-50`"#####, r#####"({ 18 | "--tw-backdrop-saturate": "saturate(.5)", 19 | backdropFilter: 20 | "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)", 21 | }) 22 | ;"##### ; "2")] 23 | #[test_case(r#####"tw`backdrop-saturate-100`"#####, r#####"({ 24 | "--tw-backdrop-saturate": "saturate(1)", 25 | backdropFilter: 26 | "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)", 27 | }) 28 | ;"##### ; "3")] 29 | #[test_case(r#####"tw`backdrop-saturate-150`"#####, r#####"({ 30 | "--tw-backdrop-saturate": "saturate(1.5)", 31 | backdropFilter: 32 | "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)", 33 | }) 34 | ;"##### ; "4")] 35 | #[test_case(r#####"tw`backdrop-saturate-200`"#####, r#####"({ 36 | "--tw-backdrop-saturate": "saturate(2)", 37 | backdropFilter: 38 | "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)", 39 | }) 40 | ;"##### ; "5")] 41 | #[test_case(r#####"tw`backdrop-saturate-[.25]`"#####, r#####"({ 42 | "--tw-backdrop-saturate": "saturate(.25)", 43 | backdropFilter: 44 | "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)", 45 | })"##### ; "6")] 46 | fn test(input: &str, output: &str) { 47 | snapshot_inner(input, output) 48 | } 49 | -------------------------------------------------------------------------------- /src/snapshot/utilities_filters_backdrop_sepia.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`backdropSepia.`"#####, r#####"({ 4 | 0: "0", 5 | DEFAULT: "100%", 6 | }) 7 | ;"##### ; "0")] 8 | #[test_case(r#####"tw`backdrop-sepia-0`"#####, r#####"({ 9 | "--tw-backdrop-sepia": "sepia(0)", 10 | backdropFilter: 11 | "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)", 12 | }) 13 | ;"##### ; "1")] 14 | #[test_case(r#####"tw`backdrop-sepia`"#####, r#####"({ 15 | "--tw-backdrop-sepia": "sepia(100%)", 16 | backdropFilter: 17 | "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)", 18 | }) 19 | ;"##### ; "2")] 20 | #[test_case(r#####"tw`backdrop-sepia-[.25]`"#####, r#####"({ 21 | "--tw-backdrop-sepia": "sepia(.25)", 22 | backdropFilter: 23 | "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)", 24 | })"##### ; "3")] 25 | fn test(input: &str, output: &str) { 26 | snapshot_inner(input, output) 27 | } 28 | -------------------------------------------------------------------------------- /src/snapshot/utilities_filters_grayscale.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`grayscale.`"#####, r#####"({ 4 | 0: "0", 5 | DEFAULT: "100%", 6 | }) 7 | ;"##### ; "0")] 8 | #[test_case(r#####"tw`grayscale-0`"#####, r#####"({ 9 | "--tw-grayscale": "grayscale(0)", 10 | filter: 11 | "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", 12 | }) 13 | ;"##### ; "1")] 14 | #[test_case(r#####"tw`grayscale`"#####, r#####"({ 15 | "--tw-grayscale": "grayscale(100%)", 16 | filter: 17 | "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", 18 | }) 19 | ;"##### ; "2")] 20 | #[test_case(r#####"tw`grayscale-[50%]`"#####, r#####"({ 21 | "--tw-grayscale": "grayscale(50%)", 22 | filter: 23 | "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", 24 | })"##### ; "3")] 25 | fn test(input: &str, output: &str) { 26 | snapshot_inner(input, output) 27 | } 28 | -------------------------------------------------------------------------------- /src/snapshot/utilities_filters_invert.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`invert.`"#####, r#####"({ 4 | 0: "0", 5 | DEFAULT: "100%", 6 | }) 7 | ;"##### ; "0")] 8 | #[test_case(r#####"tw`invert-0`"#####, r#####"({ 9 | "--tw-invert": "invert(0)", 10 | filter: 11 | "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", 12 | }) 13 | ;"##### ; "1")] 14 | #[test_case(r#####"tw`invert`"#####, r#####"({ 15 | "--tw-invert": "invert(100%)", 16 | filter: 17 | "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", 18 | }) 19 | ;"##### ; "2")] 20 | #[test_case(r#####"tw`invert-[.25]`"#####, r#####"({ 21 | "--tw-invert": "invert(.25)", 22 | filter: 23 | "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", 24 | })"##### ; "3")] 25 | fn test(input: &str, output: &str) { 26 | snapshot_inner(input, output) 27 | } 28 | -------------------------------------------------------------------------------- /src/snapshot/utilities_filters_misc.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`filter-none`"#####, r#####"({ 4 | filter: "none", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`filter`"#####, r#####"({ 8 | filter: 9 | "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", 10 | }) // Deprecated 11 | // https://tailwindcss.com/docs/backdrop-filter 12 | 13 | ;"##### ; "1")] 14 | #[test_case(r#####"tw`backdrop-filter`"#####, r#####"({ 15 | backdropFilter: 16 | "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)", 17 | }) // Deprecated 18 | 19 | ;"##### ; "2")] 20 | #[test_case(r#####"tw`backdrop-filter-none`"#####, r#####"({ 21 | backdropFilter: "none", 22 | }) // All 23 | 24 | ;"##### ; "3")] 25 | #[test_case(r#####"tw`filter blur-2xl brightness-50 contrast-50 grayscale hue-rotate-180 invert saturate-50 sepia drop-shadow-2xl`"#####, r#####"({ 26 | "--tw-blur": "blur(40px)", 27 | filter: 28 | "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", 29 | "--tw-brightness": "brightness(.5)", 30 | "--tw-contrast": "contrast(.5)", 31 | "--tw-drop-shadow": "drop-shadow(0 25px 25px rgb(0 0 0 / 0.15))", 32 | "--tw-grayscale": "grayscale(100%)", 33 | "--tw-hue-rotate": "hue-rotate(180deg)", 34 | "--tw-invert": "invert(100%)", 35 | "--tw-saturate": "saturate(.5)", 36 | "--tw-sepia": "sepia(100%)", 37 | }) // All 38 | 39 | ;"##### ; "4")] 40 | #[test_case(r#####"tw`backdrop-filter backdrop-blur-2xl backdrop-brightness-50 backdrop-contrast-50 backdrop-grayscale backdrop-hue-rotate-180 backdrop-invert backdrop-opacity-50 backdrop-saturate-50 backdrop-sepia`"#####, r#####"({ 41 | "--tw-backdrop-blur": "blur(40px)", 42 | backdropFilter: 43 | "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)", 44 | "--tw-backdrop-brightness": "brightness(.5)", 45 | "--tw-backdrop-contrast": "contrast(.5)", 46 | "--tw-backdrop-grayscale": "grayscale(100%)", 47 | "--tw-backdrop-hue-rotate": "hue-rotate(180deg)", 48 | "--tw-backdrop-invert": "invert(100%)", 49 | "--tw-backdrop-opacity": "opacity(0.5)", 50 | "--tw-backdrop-saturate": "saturate(.5)", 51 | "--tw-backdrop-sepia": "sepia(100%)", 52 | })"##### ; "5")] 53 | fn test(input: &str, output: &str) { 54 | snapshot_inner(input, output) 55 | } 56 | -------------------------------------------------------------------------------- /src/snapshot/utilities_filters_saturate.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`saturate`"#####, r#####"({ 4 | 0: "0", 5 | 50: ".5", 6 | 100: "1", 7 | 150: "1.5", 8 | 200: "2", 9 | }) 10 | ;"##### ; "0")] 11 | #[test_case(r#####"tw`saturate-0`"#####, r#####"({ 12 | "--tw-saturate": "saturate(0)", 13 | filter: 14 | "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", 15 | }) 16 | ;"##### ; "1")] 17 | #[test_case(r#####"tw`saturate-50`"#####, r#####"({ 18 | "--tw-saturate": "saturate(.5)", 19 | filter: 20 | "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", 21 | }) 22 | ;"##### ; "2")] 23 | #[test_case(r#####"tw`saturate-100`"#####, r#####"({ 24 | "--tw-saturate": "saturate(1)", 25 | filter: 26 | "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", 27 | }) 28 | ;"##### ; "3")] 29 | #[test_case(r#####"tw`saturate-150`"#####, r#####"({ 30 | "--tw-saturate": "saturate(1.5)", 31 | filter: 32 | "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", 33 | }) 34 | ;"##### ; "4")] 35 | #[test_case(r#####"tw`saturate-200`"#####, r#####"({ 36 | "--tw-saturate": "saturate(2)", 37 | filter: 38 | "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", 39 | }) 40 | ;"##### ; "5")] 41 | #[test_case(r#####"tw`saturate-[.25]`"#####, r#####"({ 42 | "--tw-saturate": "saturate(.25)", 43 | filter: 44 | "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", 45 | })"##### ; "6")] 46 | fn test(input: &str, output: &str) { 47 | snapshot_inner(input, output) 48 | } 49 | -------------------------------------------------------------------------------- /src/snapshot/utilities_filters_sepia.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`sepia.`"#####, r#####"({ 4 | 0: "0", 5 | DEFAULT: "100%", 6 | }) 7 | ;"##### ; "0")] 8 | #[test_case(r#####"tw`sepia-0`"#####, r#####"({ 9 | "--tw-sepia": "sepia(0)", 10 | filter: 11 | "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", 12 | }) 13 | ;"##### ; "1")] 14 | #[test_case(r#####"tw`sepia`"#####, r#####"({ 15 | "--tw-sepia": "sepia(100%)", 16 | filter: 17 | "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", 18 | }) 19 | ;"##### ; "2")] 20 | #[test_case(r#####"tw`sepia-[.25]`"#####, r#####"({ 21 | "--tw-sepia": "sepia(.25)", 22 | filter: 23 | "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", 24 | })"##### ; "3")] 25 | fn test(input: &str, output: &str) { 26 | snapshot_inner(input, output) 27 | } 28 | -------------------------------------------------------------------------------- /src/snapshot/utilities_layout_aspect_ratio.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`aspectRatio`"#####, r#####"({ 4 | auto: "auto", 5 | square: "1 / 1", 6 | video: "16 / 9", 7 | }) 8 | ;"##### ; "0")] 9 | #[test_case(r#####"tw`aspect-auto`"#####, r#####"({ 10 | aspectRatio: "auto", 11 | }) 12 | ;"##### ; "1")] 13 | #[test_case(r#####"tw`aspect-square`"#####, r#####"({ 14 | aspectRatio: "1 / 1", 15 | }) 16 | ;"##### ; "2")] 17 | #[test_case(r#####"tw`aspect-video`"#####, r#####"({ 18 | aspectRatio: "16 / 9", 19 | }) 20 | ;"##### ; "3")] 21 | #[test_case(r#####"tw`aspect-[4/3]`"#####, r#####"({ 22 | aspectRatio: "4/3", 23 | })"##### ; "4")] 24 | fn test(input: &str, output: &str) { 25 | snapshot_inner(input, output) 26 | } 27 | -------------------------------------------------------------------------------- /src/snapshot/utilities_layout_box_decoration_break.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`decoration-clone`"#####, r#####"({ 4 | boxDecorationBreak: "clone", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`decoration-slice`"#####, r#####"({ 8 | boxDecorationBreak: "slice", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`box-decoration-clone`"#####, r#####"({ 12 | boxDecorationBreak: "clone", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`box-decoration-slice`"#####, r#####"({ 16 | boxDecorationBreak: "slice", 17 | })"##### ; "3")] 18 | fn test(input: &str, output: &str) { 19 | snapshot_inner(input, output) 20 | } 21 | -------------------------------------------------------------------------------- /src/snapshot/utilities_layout_box_sizing.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`box-border`"#####, r#####"({ 4 | boxSizing: "border-box", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`box-content`"#####, r#####"({ 8 | boxSizing: "content-box", 9 | })"##### ; "1")] 10 | fn test(input: &str, output: &str) { 11 | snapshot_inner(input, output) 12 | } 13 | -------------------------------------------------------------------------------- /src/snapshot/utilities_layout_break_after.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`break-after-auto`"#####, r#####"({ 4 | breakAfter: "auto", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`break-after-avoid`"#####, r#####"({ 8 | breakAfter: "avoid", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`break-after-all`"#####, r#####"({ 12 | breakAfter: "all", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`break-after-avoid-page`"#####, r#####"({ 16 | breakAfter: "avoid-page", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`break-after-page`"#####, r#####"({ 20 | breakAfter: "page", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`break-after-left`"#####, r#####"({ 24 | breakAfter: "left", 25 | }) 26 | ;"##### ; "5")] 27 | #[test_case(r#####"tw`break-after-right`"#####, r#####"({ 28 | breakAfter: "right", 29 | }) 30 | ;"##### ; "6")] 31 | #[test_case(r#####"tw`break-after-column`"#####, r#####"({ 32 | breakAfter: "column", 33 | })"##### ; "7")] 34 | fn test(input: &str, output: &str) { 35 | snapshot_inner(input, output) 36 | } 37 | -------------------------------------------------------------------------------- /src/snapshot/utilities_layout_break_before.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`break-before-auto`"#####, r#####"({ 4 | breakBefore: "auto", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`break-before-avoid`"#####, r#####"({ 8 | breakBefore: "avoid", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`break-before-all`"#####, r#####"({ 12 | breakBefore: "all", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`break-before-avoid-page`"#####, r#####"({ 16 | breakBefore: "avoid-page", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`break-before-page`"#####, r#####"({ 20 | breakBefore: "page", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`break-before-left`"#####, r#####"({ 24 | breakBefore: "left", 25 | }) 26 | ;"##### ; "5")] 27 | #[test_case(r#####"tw`break-before-right`"#####, r#####"({ 28 | breakBefore: "right", 29 | }) 30 | ;"##### ; "6")] 31 | #[test_case(r#####"tw`break-before-column`"#####, r#####"({ 32 | breakBefore: "column", 33 | })"##### ; "7")] 34 | fn test(input: &str, output: &str) { 35 | snapshot_inner(input, output) 36 | } 37 | -------------------------------------------------------------------------------- /src/snapshot/utilities_layout_break_inside.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`break-inside-auto`"#####, r#####"({ 4 | breakInside: "auto", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`break-inside-avoid`"#####, r#####"({ 8 | breakInside: "avoid", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`break-inside-avoid-page`"#####, r#####"({ 12 | breakInside: "avoid-page", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`break-inside-avoid-column`"#####, r#####"({ 16 | breakInside: "avoid-column", 17 | })"##### ; "3")] 18 | fn test(input: &str, output: &str) { 19 | snapshot_inner(input, output) 20 | } 21 | -------------------------------------------------------------------------------- /src/snapshot/utilities_layout_clear.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`clear-left`"#####, r#####"({ 4 | clear: "left", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`clear-right`"#####, r#####"({ 8 | clear: "right", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`clear-both`"#####, r#####"({ 12 | clear: "both", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`clear-none`"#####, r#####"({ 16 | clear: "none", 17 | })"##### ; "3")] 18 | fn test(input: &str, output: &str) { 19 | snapshot_inner(input, output) 20 | } 21 | -------------------------------------------------------------------------------- /src/snapshot/utilities_layout_display.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`block`"#####, r#####"({ 4 | display: "block", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`inline-block`"#####, r#####"({ 8 | display: "inline-block", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`inline`"#####, r#####"({ 12 | display: "inline", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`flex`"#####, r#####"({ 16 | display: "flex", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`inline-flex`"#####, r#####"({ 20 | display: "inline-flex", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`table`"#####, r#####"({ 24 | display: "table", 25 | }) 26 | ;"##### ; "5")] 27 | #[test_case(r#####"tw`table-caption`"#####, r#####"({ 28 | display: "table-caption", 29 | }) 30 | ;"##### ; "6")] 31 | #[test_case(r#####"tw`table-cell`"#####, r#####"({ 32 | display: "table-cell", 33 | }) 34 | ;"##### ; "7")] 35 | #[test_case(r#####"tw`table-column`"#####, r#####"({ 36 | display: "table-column", 37 | }) 38 | ;"##### ; "8")] 39 | #[test_case(r#####"tw`table-column-group`"#####, r#####"({ 40 | display: "table-column-group", 41 | }) 42 | ;"##### ; "9")] 43 | #[test_case(r#####"tw`table-footer-group`"#####, r#####"({ 44 | display: "table-footer-group", 45 | }) 46 | ;"##### ; "10")] 47 | #[test_case(r#####"tw`table-header-group`"#####, r#####"({ 48 | display: "table-header-group", 49 | }) 50 | ;"##### ; "11")] 51 | #[test_case(r#####"tw`table-row-group`"#####, r#####"({ 52 | display: "table-row-group", 53 | }) 54 | ;"##### ; "12")] 55 | #[test_case(r#####"tw`table-row`"#####, r#####"({ 56 | display: "table-row", 57 | }) 58 | ;"##### ; "13")] 59 | #[test_case(r#####"tw`flow-root`"#####, r#####"({ 60 | display: "flow-root", 61 | }) 62 | ;"##### ; "14")] 63 | #[test_case(r#####"tw`grid`"#####, r#####"({ 64 | display: "grid", 65 | }) 66 | ;"##### ; "15")] 67 | #[test_case(r#####"tw`inline-grid`"#####, r#####"({ 68 | display: "inline-grid", 69 | }) 70 | ;"##### ; "16")] 71 | #[test_case(r#####"tw`contents`"#####, r#####"({ 72 | display: "contents", 73 | }) 74 | ;"##### ; "17")] 75 | #[test_case(r#####"tw`list-item`"#####, r#####"({ 76 | display: "list-item", 77 | }) 78 | ;"##### ; "18")] 79 | #[test_case(r#####"tw`hidden`"#####, r#####"({ 80 | display: "none", 81 | })"##### ; "19")] 82 | fn test(input: &str, output: &str) { 83 | snapshot_inner(input, output) 84 | } 85 | -------------------------------------------------------------------------------- /src/snapshot/utilities_layout_float.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`float-right`"#####, r#####"({ 4 | float: "right", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`float-left`"#####, r#####"({ 8 | float: "left", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`float-none`"#####, r#####"({ 12 | float: "none", 13 | })"##### ; "2")] 14 | fn test(input: &str, output: &str) { 15 | snapshot_inner(input, output) 16 | } 17 | -------------------------------------------------------------------------------- /src/snapshot/utilities_layout_isolation.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`isolate`"#####, r#####"({ 4 | isolation: "isolate", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`isolation-auto`"#####, r#####"({ 8 | isolation: "auto", 9 | })"##### ; "1")] 10 | fn test(input: &str, output: &str) { 11 | snapshot_inner(input, output) 12 | } 13 | -------------------------------------------------------------------------------- /src/snapshot/utilities_layout_object_fit.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`object-contain`"#####, r#####"({ 4 | objectFit: "contain", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`object-cover`"#####, r#####"({ 8 | objectFit: "cover", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`object-fill`"#####, r#####"({ 12 | objectFit: "fill", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`object-none`"#####, r#####"({ 16 | objectFit: "none", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`object-scale-down`"#####, r#####"({ 20 | objectFit: "scale-down", 21 | })"##### ; "4")] 22 | fn test(input: &str, output: &str) { 23 | snapshot_inner(input, output) 24 | } 25 | -------------------------------------------------------------------------------- /src/snapshot/utilities_layout_object_position.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`objectPosition`"#####, r#####"({ 4 | bottom: "bottom", 5 | center: "center", 6 | left: "left", 7 | "left-bottom": "left bottom", 8 | "left-top": "left top", 9 | right: "right", 10 | "right-bottom": "right bottom", 11 | "right-top": "right top", 12 | top: "top", 13 | }) 14 | ;"##### ; "0")] 15 | #[test_case(r#####"tw`object-bottom`"#####, r#####"({ 16 | objectPosition: "bottom", 17 | }) 18 | ;"##### ; "1")] 19 | #[test_case(r#####"tw`object-center`"#####, r#####"({ 20 | objectPosition: "center", 21 | }) 22 | ;"##### ; "2")] 23 | #[test_case(r#####"tw`object-left`"#####, r#####"({ 24 | objectPosition: "left", 25 | }) 26 | ;"##### ; "3")] 27 | #[test_case(r#####"tw`object-left-bottom`"#####, r#####"({ 28 | objectPosition: "left bottom", 29 | }) 30 | ;"##### ; "4")] 31 | #[test_case(r#####"tw`object-left-top`"#####, r#####"({ 32 | objectPosition: "left top", 33 | }) 34 | ;"##### ; "5")] 35 | #[test_case(r#####"tw`object-right`"#####, r#####"({ 36 | objectPosition: "right", 37 | }) 38 | ;"##### ; "6")] 39 | #[test_case(r#####"tw`object-right-bottom`"#####, r#####"({ 40 | objectPosition: "right bottom", 41 | }) 42 | ;"##### ; "7")] 43 | #[test_case(r#####"tw`object-right-top`"#####, r#####"({ 44 | objectPosition: "right top", 45 | }) 46 | ;"##### ; "8")] 47 | #[test_case(r#####"tw`object-top`"#####, r#####"({ 48 | objectPosition: "top", 49 | }) 50 | ;"##### ; "9")] 51 | #[test_case(r#####"tw`object-[center bottom]`"#####, r#####"({ 52 | objectPosition: "center bottom", 53 | }) 54 | ;"##### ; "10")] 55 | #[test_case(r#####"tw`object-[var(--position)]`"#####, r#####"({ 56 | objectPosition: "var(--position)", 57 | })"##### ; "11")] 58 | fn test(input: &str, output: &str) { 59 | snapshot_inner(input, output) 60 | } 61 | -------------------------------------------------------------------------------- /src/snapshot/utilities_layout_overflow.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`overflow-auto`"#####, r#####"({ 4 | overflow: "auto", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`overflow-hidden`"#####, r#####"({ 8 | overflow: "hidden", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`overflow-clip`"#####, r#####"({ 12 | overflow: "clip", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`overflow-x-clip`"#####, r#####"({ 16 | overflowX: "clip", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`overflow-y-clip`"#####, r#####"({ 20 | overflowY: "clip", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`overflow-visible`"#####, r#####"({ 24 | overflow: "visible", 25 | }) 26 | ;"##### ; "5")] 27 | #[test_case(r#####"tw`overflow-scroll`"#####, r#####"({ 28 | overflow: "scroll", 29 | }) 30 | ;"##### ; "6")] 31 | #[test_case(r#####"tw`overflow-x-auto`"#####, r#####"({ 32 | overflowX: "auto", 33 | }) 34 | ;"##### ; "7")] 35 | #[test_case(r#####"tw`overflow-y-auto`"#####, r#####"({ 36 | overflowY: "auto", 37 | }) 38 | ;"##### ; "8")] 39 | #[test_case(r#####"tw`overflow-x-hidden`"#####, r#####"({ 40 | overflowX: "hidden", 41 | }) 42 | ;"##### ; "9")] 43 | #[test_case(r#####"tw`overflow-y-hidden`"#####, r#####"({ 44 | overflowY: "hidden", 45 | }) 46 | ;"##### ; "10")] 47 | #[test_case(r#####"tw`overflow-x-visible`"#####, r#####"({ 48 | overflowX: "visible", 49 | }) 50 | ;"##### ; "11")] 51 | #[test_case(r#####"tw`overflow-y-visible`"#####, r#####"({ 52 | overflowY: "visible", 53 | }) 54 | ;"##### ; "12")] 55 | #[test_case(r#####"tw`overflow-x-scroll`"#####, r#####"({ 56 | overflowX: "scroll", 57 | }) 58 | ;"##### ; "13")] 59 | #[test_case(r#####"tw`overflow-y-scroll`"#####, r#####"({ 60 | overflowY: "scroll", 61 | })"##### ; "14")] 62 | fn test(input: &str, output: &str) { 63 | snapshot_inner(input, output) 64 | } 65 | -------------------------------------------------------------------------------- /src/snapshot/utilities_layout_overscroll_behavior.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`overscroll-auto`"#####, r#####"({ 4 | overscrollBehavior: "auto", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`overscroll-contain`"#####, r#####"({ 8 | overscrollBehavior: "contain", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`overscroll-none`"#####, r#####"({ 12 | overscrollBehavior: "none", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`overscroll-y-auto`"#####, r#####"({ 16 | overscrollBehaviorY: "auto", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`overscroll-y-contain`"#####, r#####"({ 20 | overscrollBehaviorY: "contain", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`overscroll-y-none`"#####, r#####"({ 24 | overscrollBehaviorY: "none", 25 | }) 26 | ;"##### ; "5")] 27 | #[test_case(r#####"tw`overscroll-x-auto`"#####, r#####"({ 28 | overscrollBehaviorX: "auto", 29 | }) 30 | ;"##### ; "6")] 31 | #[test_case(r#####"tw`overscroll-x-contain`"#####, r#####"({ 32 | overscrollBehaviorX: "contain", 33 | }) 34 | ;"##### ; "7")] 35 | #[test_case(r#####"tw`overscroll-x-none`"#####, r#####"({ 36 | overscrollBehaviorX: "none", 37 | })"##### ; "8")] 38 | fn test(input: &str, output: &str) { 39 | snapshot_inner(input, output) 40 | } 41 | -------------------------------------------------------------------------------- /src/snapshot/utilities_layout_position.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`static`"#####, r#####"({ 4 | position: "static", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`fixed`"#####, r#####"({ 8 | position: "fixed", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`absolute`"#####, r#####"({ 12 | position: "absolute", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`relative`"#####, r#####"({ 16 | position: "relative", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`sticky`"#####, r#####"({ 20 | position: "sticky", 21 | })"##### ; "4")] 22 | fn test(input: &str, output: &str) { 23 | snapshot_inner(input, output) 24 | } 25 | -------------------------------------------------------------------------------- /src/snapshot/utilities_layout_visibility.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`visible`"#####, r#####"({ 4 | visibility: "visible", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`invisible`"#####, r#####"({ 8 | visibility: "hidden", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`collapse`"#####, r#####"({ 12 | visibility: "collapse", 13 | })"##### ; "2")] 14 | fn test(input: &str, output: &str) { 15 | snapshot_inner(input, output) 16 | } 17 | -------------------------------------------------------------------------------- /src/snapshot/utilities_layout_z_index.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`zIndex`"#####, r#####"({ 4 | 0: "0", 5 | 1: "1", 6 | 10: "10", 7 | 20: "20", 8 | 30: "30", 9 | 40: "40", 10 | 50: "50", 11 | auto: "auto", 12 | }) 13 | ;"##### ; "0")] 14 | #[test_case(r#####"tw`z-0`"#####, r#####"({ 15 | zIndex: "0", 16 | }) 17 | ;"##### ; "1")] 18 | #[test_case(r#####"tw`-z-0`"#####, r#####"({ 19 | zIndex: "0", 20 | }) 21 | ;"##### ; "2")] 22 | #[test_case(r#####"tw`z-10`"#####, r#####"({ 23 | zIndex: "10", 24 | }) 25 | ;"##### ; "3")] 26 | #[test_case(r#####"tw`-z-10`"#####, r#####"({ 27 | zIndex: "-10", 28 | }) 29 | ;"##### ; "4")] 30 | #[test_case(r#####"tw`z-20`"#####, r#####"({ 31 | zIndex: "20", 32 | }) 33 | ;"##### ; "5")] 34 | #[test_case(r#####"tw`-z-20`"#####, r#####"({ 35 | zIndex: "-20", 36 | }) 37 | ;"##### ; "6")] 38 | #[test_case(r#####"tw`z-30`"#####, r#####"({ 39 | zIndex: "30", 40 | }) 41 | ;"##### ; "7")] 42 | #[test_case(r#####"tw`-z-30`"#####, r#####"({ 43 | zIndex: "-30", 44 | }) 45 | ;"##### ; "8")] 46 | #[test_case(r#####"tw`z-40`"#####, r#####"({ 47 | zIndex: "40", 48 | }) 49 | ;"##### ; "9")] 50 | #[test_case(r#####"tw`-z-40`"#####, r#####"({ 51 | zIndex: "-40", 52 | }) 53 | ;"##### ; "10")] 54 | #[test_case(r#####"tw`z-50`"#####, r#####"({ 55 | zIndex: "50", 56 | }) 57 | ;"##### ; "11")] 58 | #[test_case(r#####"tw`-z-50`"#####, r#####"({ 59 | zIndex: "-50", 60 | }) 61 | ;"##### ; "12")] 62 | #[test_case(r#####"tw`z-auto`"#####, r#####"({ 63 | zIndex: "auto", 64 | }) 65 | ;"##### ; "13")] 66 | #[test_case(r#####"tw`z-[100]`"#####, r#####"({ 67 | zIndex: "100", 68 | }) 69 | ;"##### ; "14")] 70 | #[test_case(r#####"tw`z-[-100]`"#####, r#####"({ 71 | zIndex: "-100", 72 | }) 73 | ;"##### ; "15")] 74 | #[test_case(r#####"tw`-z-[100]`"#####, r#####"({ 75 | zIndex: "-100", 76 | }) 77 | ;"##### ; "16")] 78 | #[test_case(r#####"tw`-z-[-100]`"#####, r#####"({ 79 | zIndex: "100", 80 | })"##### ; "17")] 81 | fn test(input: &str, output: &str) { 82 | snapshot_inner(input, output) 83 | } 84 | -------------------------------------------------------------------------------- /src/snapshot/utilities_svg_stroke_width.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`strokeWidth`"#####, r#####"({ 4 | 0: "0", 5 | 1: "1", 6 | 2: "2", 7 | }) 8 | ;"##### ; "0")] 9 | #[test_case(r#####"tw`stroke-0`"#####, r#####"({ 10 | strokeWidth: "0", 11 | }) 12 | ;"##### ; "1")] 13 | #[test_case(r#####"tw`stroke-1`"#####, r#####"({ 14 | strokeWidth: "1", 15 | }) 16 | ;"##### ; "2")] 17 | #[test_case(r#####"tw`stroke-2`"#####, r#####"({ 18 | strokeWidth: "2", 19 | }) 20 | ;"##### ; "3")] 21 | #[test_case(r#####"tw`stroke-[2px]`"#####, r#####"({ 22 | strokeWidth: "2px", 23 | }) 24 | ;"##### ; "4")] 25 | #[test_case(r#####"tw`stroke-[color:red]`"#####, r#####"({ 26 | stroke: "red", 27 | }) 28 | ;"##### ; "5")] 29 | #[test_case(r#####"tw`stroke-[length:2px]`"#####, r#####"({ 30 | strokeWidth: "2px", 31 | }) 32 | ;"##### ; "6")] 33 | #[test_case(r#####"tw`stroke-[number:10]`"#####, r#####"({ 34 | strokeWidth: "10", 35 | }) 36 | ;"##### ; "7")] 37 | #[test_case(r#####"tw`stroke-[percentage:10%]`"#####, r#####"({ 38 | strokeWidth: "10%", 39 | }) 40 | ;"##### ; "8")] 41 | #[test_case(r#####"tw`stroke-[url:url(hand.cur)_2_2, pointer]`"#####, r#####"({ 42 | stroke: "url(hand.cur) 2 2, pointer", 43 | })"##### ; "9")] 44 | fn test(input: &str, output: &str) { 45 | snapshot_inner(input, output) 46 | } 47 | -------------------------------------------------------------------------------- /src/snapshot/utilities_transforms_misc.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`filter-none`"#####, r#####"({ 4 | filter: "none", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`filter`"#####, r#####"({ 8 | filter: 9 | "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", 10 | }) // Deprecated 11 | // https://tailwindcss.com/docs/backdrop-filter 12 | 13 | ;"##### ; "1")] 14 | #[test_case(r#####"tw`backdrop-filter`"#####, r#####"({ 15 | backdropFilter: 16 | "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)", 17 | }) // Deprecated 18 | 19 | ;"##### ; "2")] 20 | #[test_case(r#####"tw`backdrop-filter-none`"#####, r#####"({ 21 | backdropFilter: "none", 22 | }) // All 23 | 24 | ;"##### ; "3")] 25 | #[test_case(r#####"tw`filter blur-2xl brightness-50 contrast-50 grayscale hue-rotate-180 invert saturate-50 sepia drop-shadow-2xl`"#####, r#####"({ 26 | "--tw-blur": "blur(40px)", 27 | filter: 28 | "var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)", 29 | "--tw-brightness": "brightness(.5)", 30 | "--tw-contrast": "contrast(.5)", 31 | "--tw-drop-shadow": "drop-shadow(0 25px 25px rgb(0 0 0 / 0.15))", 32 | "--tw-grayscale": "grayscale(100%)", 33 | "--tw-hue-rotate": "hue-rotate(180deg)", 34 | "--tw-invert": "invert(100%)", 35 | "--tw-saturate": "saturate(.5)", 36 | "--tw-sepia": "sepia(100%)", 37 | }) // All 38 | 39 | ;"##### ; "4")] 40 | #[test_case(r#####"tw`backdrop-filter backdrop-blur-2xl backdrop-brightness-50 backdrop-contrast-50 backdrop-grayscale backdrop-hue-rotate-180 backdrop-invert backdrop-opacity-50 backdrop-saturate-50 backdrop-sepia`"#####, r#####"({ 41 | "--tw-backdrop-blur": "blur(40px)", 42 | backdropFilter: 43 | "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)", 44 | "--tw-backdrop-brightness": "brightness(.5)", 45 | "--tw-backdrop-contrast": "contrast(.5)", 46 | "--tw-backdrop-grayscale": "grayscale(100%)", 47 | "--tw-backdrop-hue-rotate": "hue-rotate(180deg)", 48 | "--tw-backdrop-invert": "invert(100%)", 49 | "--tw-backdrop-opacity": "opacity(0.5)", 50 | "--tw-backdrop-saturate": "saturate(.5)", 51 | "--tw-backdrop-sepia": "sepia(100%)", 52 | })"##### ; "5")] 53 | fn test(input: &str, output: &str) { 54 | snapshot_inner(input, output) 55 | } 56 | -------------------------------------------------------------------------------- /src/snapshot/utilities_transforms_transform_origin.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`transformOrigin`"#####, r#####"({ 4 | center: "center", 5 | top: "top", 6 | "top-right": "top right", 7 | right: "right", 8 | "bottom-right": "bottom right", 9 | bottom: "bottom", 10 | "bottom-left": "bottom left", 11 | left: "left", 12 | "top-left": "top left", 13 | }) 14 | ;"##### ; "0")] 15 | #[test_case(r#####"tw`origin-center`"#####, r#####"({ 16 | transformOrigin: "center", 17 | }) 18 | ;"##### ; "1")] 19 | #[test_case(r#####"tw`origin-top`"#####, r#####"({ 20 | transformOrigin: "top", 21 | }) 22 | ;"##### ; "2")] 23 | #[test_case(r#####"tw`origin-top-right`"#####, r#####"({ 24 | transformOrigin: "top right", 25 | }) 26 | ;"##### ; "3")] 27 | #[test_case(r#####"tw`origin-right`"#####, r#####"({ 28 | transformOrigin: "right", 29 | }) 30 | ;"##### ; "4")] 31 | #[test_case(r#####"tw`origin-bottom-right`"#####, r#####"({ 32 | transformOrigin: "bottom right", 33 | }) 34 | ;"##### ; "5")] 35 | #[test_case(r#####"tw`origin-bottom`"#####, r#####"({ 36 | transformOrigin: "bottom", 37 | }) 38 | ;"##### ; "6")] 39 | #[test_case(r#####"tw`origin-bottom-left`"#####, r#####"({ 40 | transformOrigin: "bottom left", 41 | }) 42 | ;"##### ; "7")] 43 | #[test_case(r#####"tw`origin-left`"#####, r#####"({ 44 | transformOrigin: "left", 45 | }) 46 | ;"##### ; "8")] 47 | #[test_case(r#####"tw`origin-top-left`"#####, r#####"({ 48 | transformOrigin: "top left", 49 | }) 50 | ;"##### ; "9")] 51 | #[test_case(r#####"tw`origin-[33% 75%]`"#####, r#####"({ 52 | transformOrigin: "33% 75%", 53 | })"##### ; "10")] 54 | fn test(input: &str, output: &str) { 55 | snapshot_inner(input, output) 56 | } 57 | -------------------------------------------------------------------------------- /src/snapshot/utilities_transitions_animation_animation.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`animation`"#####, r#####"({ 4 | none: "none", 5 | spin: "spin 1s linear infinite", 6 | ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite", 7 | pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite", 8 | bounce: "bounce 1s infinite", 9 | }) 10 | ;"##### ; "0")] 11 | #[test_case(r#####"tw`animate-none`"#####, r#####"({ 12 | animation: "none", 13 | }) 14 | ;"##### ; "1")] 15 | #[test_case(r#####"tw`animate-spin`"#####, r#####"({ 16 | "@keyframes spin": { 17 | to: { 18 | transform: "rotate(360deg)", 19 | }, 20 | }, 21 | animation: "spin 1s linear infinite", 22 | }) 23 | ;"##### ; "2")] 24 | #[test_case(r#####"tw`animate-ping`"#####, r#####"({ 25 | "@keyframes ping": { 26 | "75%, 100%": { 27 | transform: "scale(2)", 28 | opacity: "0", 29 | }, 30 | }, 31 | animation: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite", 32 | }) 33 | ;"##### ; "3")] 34 | #[test_case(r#####"tw`animate-pulse`"#####, r#####"({ 35 | "@keyframes pulse": { 36 | "50%": { 37 | opacity: ".5", 38 | }, 39 | }, 40 | animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite", 41 | }) 42 | ;"##### ; "4")] 43 | #[test_case(r#####"tw`animate-bounce`"#####, r#####"({ 44 | "@keyframes bounce": { 45 | "0%, 100%": { 46 | transform: "translateY(-25%)", 47 | animationTimingFunction: "cubic-bezier(0.8,0,1,1)", 48 | }, 49 | "50%": { 50 | transform: "none", 51 | animationTimingFunction: "cubic-bezier(0,0,0.2,1)", 52 | }, 53 | }, 54 | animation: "bounce 1s infinite", 55 | }) 56 | ;"##### ; "5")] 57 | #[test_case(r#####"tw`animate-[wiggle 1s ease-in-out infinite]`"#####, r#####"({ 58 | animation: "wiggle 1s ease-in-out infinite", 59 | })"##### ; "6")] 60 | fn test(input: &str, output: &str) { 61 | snapshot_inner(input, output) 62 | } 63 | -------------------------------------------------------------------------------- /src/snapshot/utilities_transitions_animation_transition_delay.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`transitionDelay`"#####, r#####"({ 4 | 0: "0s", 5 | 75: "75ms", 6 | 100: "100ms", 7 | 150: "150ms", 8 | 200: "200ms", 9 | 300: "300ms", 10 | 500: "500ms", 11 | 700: "700ms", 12 | 1000: "1000ms", 13 | }) 14 | ;"##### ; "0")] 15 | #[test_case(r#####"tw`delay-75`"#####, r#####"({ 16 | transitionDelay: "75ms", 17 | }) 18 | ;"##### ; "1")] 19 | #[test_case(r#####"tw`delay-100`"#####, r#####"({ 20 | transitionDelay: "100ms", 21 | }) 22 | ;"##### ; "2")] 23 | #[test_case(r#####"tw`delay-150`"#####, r#####"({ 24 | transitionDelay: "150ms", 25 | }) 26 | ;"##### ; "3")] 27 | #[test_case(r#####"tw`delay-200`"#####, r#####"({ 28 | transitionDelay: "200ms", 29 | }) 30 | ;"##### ; "4")] 31 | #[test_case(r#####"tw`delay-300`"#####, r#####"({ 32 | transitionDelay: "300ms", 33 | }) 34 | ;"##### ; "5")] 35 | #[test_case(r#####"tw`delay-500`"#####, r#####"({ 36 | transitionDelay: "500ms", 37 | }) 38 | ;"##### ; "6")] 39 | #[test_case(r#####"tw`delay-700`"#####, r#####"({ 40 | transitionDelay: "700ms", 41 | }) 42 | ;"##### ; "7")] 43 | #[test_case(r#####"tw`delay-1000`"#####, r#####"({ 44 | transitionDelay: "1000ms", 45 | }) 46 | ;"##### ; "8")] 47 | #[test_case(r#####"tw`delay-[2000ms]`"#####, r#####"({ 48 | transitionDelay: "2000ms", 49 | }) 50 | ;"##### ; "9")] 51 | #[test_case(r#####"tw`delay-[var(--delay)]`"#####, r#####"({ 52 | transitionDelay: "var(--delay)", 53 | })"##### ; "10")] 54 | fn test(input: &str, output: &str) { 55 | snapshot_inner(input, output) 56 | } 57 | -------------------------------------------------------------------------------- /src/snapshot/utilities_transitions_animation_transition_duration.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`transitionDuration.`"#####, r#####"({ 4 | 0: "0s", 5 | 75: "75ms", 6 | 100: "100ms", 7 | 150: "150ms", 8 | 200: "200ms", 9 | 300: "300ms", 10 | 500: "500ms", 11 | 700: "700ms", 12 | 1000: "1000ms", 13 | DEFAULT: "150ms", 14 | }) 15 | ;"##### ; "0")] 16 | #[test_case(r#####"tw`duration-75`"#####, r#####"({ 17 | transitionDuration: "75ms", 18 | }) 19 | ;"##### ; "1")] 20 | #[test_case(r#####"tw`duration-100`"#####, r#####"({ 21 | transitionDuration: "100ms", 22 | }) 23 | ;"##### ; "2")] 24 | #[test_case(r#####"tw`duration-150`"#####, r#####"({ 25 | transitionDuration: "150ms", 26 | }) 27 | ;"##### ; "3")] 28 | #[test_case(r#####"tw`duration-200`"#####, r#####"({ 29 | transitionDuration: "200ms", 30 | }) 31 | ;"##### ; "4")] 32 | #[test_case(r#####"tw`duration-300`"#####, r#####"({ 33 | transitionDuration: "300ms", 34 | }) 35 | ;"##### ; "5")] 36 | #[test_case(r#####"tw`duration-500`"#####, r#####"({ 37 | transitionDuration: "500ms", 38 | }) 39 | ;"##### ; "6")] 40 | #[test_case(r#####"tw`duration-700`"#####, r#####"({ 41 | transitionDuration: "700ms", 42 | }) 43 | ;"##### ; "7")] 44 | #[test_case(r#####"tw`duration-1000`"#####, r#####"({ 45 | transitionDuration: "1000ms", 46 | }) 47 | ;"##### ; "8")] 48 | #[test_case(r#####"tw`duration-[2000ms]`"#####, r#####"({ 49 | transitionDuration: "2000ms", 50 | }) 51 | ;"##### ; "9")] 52 | #[test_case(r#####"tw`duration-[2s]`"#####, r#####"({ 53 | transitionDuration: "2s", 54 | }) 55 | ;"##### ; "10")] 56 | #[test_case(r#####"tw`duration-[var(--app-duration)]`"#####, r#####"({ 57 | transitionDuration: "var(--app-duration)", 58 | })"##### ; "11")] 59 | fn test(input: &str, output: &str) { 60 | snapshot_inner(input, output) 61 | } 62 | -------------------------------------------------------------------------------- /src/snapshot/utilities_transitions_animation_transition_property.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`transitionProperty.`"#####, r#####"({ 4 | none: "none", 5 | all: "all", 6 | DEFAULT: 7 | "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter", 8 | colors: 9 | "color, background-color, border-color, text-decoration-color, fill, stroke", 10 | opacity: "opacity", 11 | shadow: "box-shadow", 12 | transform: "transform", 13 | }) 14 | ;"##### ; "0")] 15 | #[test_case(r#####"tw`transition-none`"#####, r#####"({ 16 | transitionProperty: "none", 17 | }) 18 | ;"##### ; "1")] 19 | #[test_case(r#####"tw`transition-all`"#####, r#####"({ 20 | transitionProperty: "all", 21 | transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)", 22 | transitionDuration: "150ms", 23 | }) 24 | ;"##### ; "2")] 25 | #[test_case(r#####"tw`transition`"#####, r#####"({ 26 | transitionProperty: 27 | "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter", 28 | transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)", 29 | transitionDuration: "150ms", 30 | }) 31 | ;"##### ; "3")] 32 | #[test_case(r#####"tw`transition-colors`"#####, r#####"({ 33 | transitionProperty: 34 | "color, background-color, border-color, text-decoration-color, fill, stroke", 35 | transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)", 36 | transitionDuration: "150ms", 37 | }) 38 | ;"##### ; "4")] 39 | #[test_case(r#####"tw`transition-opacity`"#####, r#####"({ 40 | transitionProperty: "opacity", 41 | transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)", 42 | transitionDuration: "150ms", 43 | }) 44 | ;"##### ; "5")] 45 | #[test_case(r#####"tw`transition-shadow`"#####, r#####"({ 46 | transitionProperty: "box-shadow", 47 | transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)", 48 | transitionDuration: "150ms", 49 | }) 50 | ;"##### ; "6")] 51 | #[test_case(r#####"tw`transition-transform`"#####, r#####"({ 52 | transitionProperty: "transform", 53 | transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)", 54 | transitionDuration: "150ms", 55 | }) 56 | ;"##### ; "7")] 57 | #[test_case(r#####"tw`transition-[height]`"#####, r#####"({ 58 | transitionProperty: "height", 59 | transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)", 60 | transitionDuration: "150ms", 61 | }) 62 | ;"##### ; "8")] 63 | #[test_case(r#####"tw`transition-[lookup:green]`"#####, r#####"({ 64 | transitionProperty: "green", 65 | transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)", 66 | transitionDuration: "150ms", 67 | })"##### ; "9")] 68 | fn test(input: &str, output: &str) { 69 | snapshot_inner(input, output) 70 | } 71 | -------------------------------------------------------------------------------- /src/snapshot/utilities_transitions_animation_transition_timing_function.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`transitionTimingFunction.`"#####, r#####"({ 4 | DEFAULT: "cubic-bezier(0.4, 0, 0.2, 1)", 5 | linear: "linear", 6 | in: "cubic-bezier(0.4, 0, 1, 1)", 7 | out: "cubic-bezier(0, 0, 0.2, 1)", 8 | "in-out": "cubic-bezier(0.4, 0, 0.2, 1)", 9 | }) 10 | ;"##### ; "0")] 11 | #[test_case(r#####"tw`ease-linear`"#####, r#####"({ 12 | transitionTimingFunction: "linear", 13 | }) 14 | ;"##### ; "1")] 15 | #[test_case(r#####"tw`ease-in`"#####, r#####"({ 16 | transitionTimingFunction: "cubic-bezier(0.4, 0, 1, 1)", 17 | }) 18 | ;"##### ; "2")] 19 | #[test_case(r#####"tw`ease-out`"#####, r#####"({ 20 | transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)", 21 | }) 22 | ;"##### ; "3")] 23 | #[test_case(r#####"tw`ease-in-out`"#####, r#####"({ 24 | transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)", 25 | }) 26 | ;"##### ; "4")] 27 | #[test_case(r#####"tw`ease-[cubic-bezier(0.95, 0.05, 0.795, 0.035)]`"#####, r#####"({ 28 | transitionTimingFunction: "cubic-bezier(0.95, 0.05, 0.795, 0.035)", 29 | })"##### ; "5")] 30 | fn test(input: &str, output: &str) { 31 | snapshot_inner(input, output) 32 | } 33 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_align_content.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`content-center`"#####, r#####"({ 4 | alignContent: "center", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`content-start`"#####, r#####"({ 8 | alignContent: "flex-start", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`content-end`"#####, r#####"({ 12 | alignContent: "flex-end", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`content-between`"#####, r#####"({ 16 | alignContent: "space-between", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`content-around`"#####, r#####"({ 20 | alignContent: "space-around", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`content-evenly`"#####, r#####"({ 24 | alignContent: "space-evenly", 25 | }) 26 | ;"##### ; "5")] 27 | #[test_case(r#####"tw`content-baseline`"#####, r#####"({ 28 | alignContent: "baseline", 29 | })"##### ; "6")] 30 | fn test(input: &str, output: &str) { 31 | snapshot_inner(input, output) 32 | } 33 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_align_items.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`items-start`"#####, r#####"({ 4 | alignItems: "flex-start", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`items-end`"#####, r#####"({ 8 | alignItems: "flex-end", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`items-center`"#####, r#####"({ 12 | alignItems: "center", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`items-baseline`"#####, r#####"({ 16 | alignItems: "baseline", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`items-stretch`"#####, r#####"({ 20 | alignItems: "stretch", 21 | })"##### ; "4")] 22 | fn test(input: &str, output: &str) { 23 | snapshot_inner(input, output) 24 | } 25 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_align_self.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`self-auto`"#####, r#####"({ 4 | alignSelf: "auto", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`self-start`"#####, r#####"({ 8 | alignSelf: "flex-start", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`self-end`"#####, r#####"({ 12 | alignSelf: "flex-end", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`self-center`"#####, r#####"({ 16 | alignSelf: "center", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`self-stretch`"#####, r#####"({ 20 | alignSelf: "stretch", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`self-baseline`"#####, r#####"({ 24 | alignSelf: "baseline", 25 | })"##### ; "5")] 26 | fn test(input: &str, output: &str) { 27 | snapshot_inner(input, output) 28 | } 29 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_flex.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`flex`"#####, r#####"({ 4 | 1: "1 1 0%", 5 | auto: "1 1 auto", 6 | initial: "0 1 auto", 7 | none: "none", 8 | }) 9 | ;"##### ; "0")] 10 | #[test_case(r#####"tw`flex-1`"#####, r#####"({ 11 | flex: "1 1 0%", 12 | }) 13 | ;"##### ; "1")] 14 | #[test_case(r#####"tw`flex-auto`"#####, r#####"({ 15 | flex: "1 1 auto", 16 | }) 17 | ;"##### ; "2")] 18 | #[test_case(r#####"tw`flex-initial`"#####, r#####"({ 19 | flex: "0 1 auto", 20 | }) 21 | ;"##### ; "3")] 22 | #[test_case(r#####"tw`flex-none`"#####, r#####"({ 23 | flex: "none", 24 | }) 25 | ;"##### ; "4")] 26 | #[test_case(r#####"tw`flex-[2 2 0%]`"#####, r#####"({ 27 | flex: "2 2 0%", 28 | }) 29 | ;"##### ; "5")] 30 | #[test_case(r#####"tw`flex-[var(--flex)]`"#####, r#####"({ 31 | flex: "var(--flex)", 32 | })"##### ; "6")] 33 | fn test(input: &str, output: &str) { 34 | snapshot_inner(input, output) 35 | } 36 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_flex_direction.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`flex-row`"#####, r#####"({ 4 | flexDirection: "row", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`flex-row-reverse`"#####, r#####"({ 8 | flexDirection: "row-reverse", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`flex-col`"#####, r#####"({ 12 | flexDirection: "column", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`flex-col-reverse`"#####, r#####"({ 16 | flexDirection: "column-reverse", 17 | })"##### ; "3")] 18 | fn test(input: &str, output: &str) { 19 | snapshot_inner(input, output) 20 | } 21 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_flex_grow.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`flexGrow.`"#####, r#####"({ 4 | 0: "0", 5 | DEFAULT: "1", 6 | }) 7 | ;"##### ; "0")] 8 | #[test_case(r#####"tw`grow-0`"#####, r#####"({ 9 | flexGrow: "0", 10 | }) 11 | ;"##### ; "1")] 12 | #[test_case(r#####"tw`grow`"#####, r#####"({ 13 | flexGrow: "1", 14 | }) 15 | ;"##### ; "2")] 16 | #[test_case(r#####"tw`flex-grow-0`"#####, r#####"({ 17 | flexGrow: "0", 18 | }) // Deprecated 19 | 20 | ;"##### ; "3")] 21 | #[test_case(r#####"tw`flex-grow`"#####, r#####"({ 22 | flexGrow: "1", 23 | }) // Deprecated 24 | 25 | ;"##### ; "4")] 26 | #[test_case(r#####"tw`grow-[2]`"#####, r#####"({ 27 | flexGrow: "2", 28 | }) 29 | ;"##### ; "5")] 30 | #[test_case(r#####"tw`flex-grow-[var(--grow)]`"#####, r#####"({ 31 | flexGrow: "var(--grow)", 32 | })"##### ; "6")] 33 | fn test(input: &str, output: &str) { 34 | snapshot_inner(input, output) 35 | } 36 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_flex_shrink.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`flexShrink.`"#####, r#####"({ 4 | 0: "0", 5 | DEFAULT: "1", 6 | }) 7 | ;"##### ; "0")] 8 | #[test_case(r#####"tw`shrink-0`"#####, r#####"({ 9 | flexShrink: "0", 10 | }) 11 | ;"##### ; "1")] 12 | #[test_case(r#####"tw`shrink`"#####, r#####"({ 13 | flexShrink: "1", 14 | }) 15 | ;"##### ; "2")] 16 | #[test_case(r#####"tw`flex-shrink-0`"#####, r#####"({ 17 | flexShrink: "0", 18 | }) // Deprecated 19 | 20 | ;"##### ; "3")] 21 | #[test_case(r#####"tw`flex-shrink`"#####, r#####"({ 22 | flexShrink: "1", 23 | }) // Deprecated 24 | 25 | ;"##### ; "4")] 26 | #[test_case(r#####"tw`flex-shrink-[var(--shrink)]`"#####, r#####"({ 27 | flexShrink: "var(--shrink)", 28 | }) // Deprecated 29 | 30 | ;"##### ; "5")] 31 | #[test_case(r#####"tw`shrink-[var(--shrink)]`"#####, r#####"({ 32 | flexShrink: "var(--shrink)", 33 | })"##### ; "6")] 34 | fn test(input: &str, output: &str) { 35 | snapshot_inner(input, output) 36 | } 37 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_flex_wrap.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`flex-wrap`"#####, r#####"({ 4 | flexWrap: "wrap", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`flex-wrap-reverse`"#####, r#####"({ 8 | flexWrap: "wrap-reverse", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`flex-nowrap`"#####, r#####"({ 12 | flexWrap: "nowrap", 13 | })"##### ; "2")] 14 | fn test(input: &str, output: &str) { 15 | snapshot_inner(input, output) 16 | } 17 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_grid_auto_columns.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`gridAutoColumns`"#####, r#####"({ 4 | auto: "auto", 5 | min: "min-content", 6 | max: "max-content", 7 | fr: "minmax(0, 1fr)", 8 | }) 9 | ;"##### ; "0")] 10 | #[test_case(r#####"tw`auto-cols-auto`"#####, r#####"({ 11 | gridAutoColumns: "auto", 12 | }) 13 | ;"##### ; "1")] 14 | #[test_case(r#####"tw`auto-cols-min`"#####, r#####"({ 15 | gridAutoColumns: "min-content", 16 | }) 17 | ;"##### ; "2")] 18 | #[test_case(r#####"tw`auto-cols-max`"#####, r#####"({ 19 | gridAutoColumns: "max-content", 20 | }) 21 | ;"##### ; "3")] 22 | #[test_case(r#####"tw`auto-cols-fr`"#####, r#####"({ 23 | gridAutoColumns: "minmax(0, 1fr)", 24 | }) 25 | ;"##### ; "4")] 26 | #[test_case(r#####"tw`auto-cols-[minmax(0, 2fr)]`"#####, r#####"({ 27 | gridAutoColumns: "minmax(0, 2fr)", 28 | }) 29 | ;"##### ; "5")] 30 | #[test_case(r#####"tw`grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]`"#####, r#####"({ 31 | gridTemplateColumns: "200px repeat(auto-fill,minmax(15%,100px)) 300px", 32 | }) 33 | ;"##### ; "6")] 34 | #[test_case(r#####"tw`lg:grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]`"#####, r#####"({ 35 | "@media (min-width: 1024px)": { 36 | gridTemplateColumns: "200px repeat(auto-fill,minmax(15%,100px)) 300px", 37 | }, 38 | })"##### ; "7")] 39 | fn test(input: &str, output: &str) { 40 | snapshot_inner(input, output) 41 | } 42 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_grid_auto_flow.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`grid-flow-row`"#####, r#####"({ 4 | gridAutoFlow: "row", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`grid-flow-col`"#####, r#####"({ 8 | gridAutoFlow: "column", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`grid-flow-row-dense`"#####, r#####"({ 12 | gridAutoFlow: "row dense", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`grid-flow-col-dense`"#####, r#####"({ 16 | gridAutoFlow: "column dense", 17 | })"##### ; "3")] 18 | fn test(input: &str, output: &str) { 19 | snapshot_inner(input, output) 20 | } 21 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_grid_auto_rows.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`gridAutoRows`"#####, r#####"({ 4 | auto: "auto", 5 | min: "min-content", 6 | max: "max-content", 7 | fr: "minmax(0, 1fr)", 8 | }) 9 | ;"##### ; "0")] 10 | #[test_case(r#####"tw`auto-rows-auto`"#####, r#####"({ 11 | gridAutoRows: "auto", 12 | }) 13 | ;"##### ; "1")] 14 | #[test_case(r#####"tw`auto-rows-min`"#####, r#####"({ 15 | gridAutoRows: "min-content", 16 | }) 17 | ;"##### ; "2")] 18 | #[test_case(r#####"tw`auto-rows-max`"#####, r#####"({ 19 | gridAutoRows: "max-content", 20 | }) 21 | ;"##### ; "3")] 22 | #[test_case(r#####"tw`auto-rows-fr`"#####, r#####"({ 23 | gridAutoRows: "minmax(0, 1fr)", 24 | }) 25 | ;"##### ; "4")] 26 | #[test_case(r#####"tw`grid-rows-[200px, repeat(auto-fill, minmax(15%, 100px)), 300px]`"#####, r#####"({ 27 | gridTemplateRows: "200px repeat(auto-fill, minmax(15%, 100px)) 300px", 28 | })"##### ; "5")] 29 | fn test(input: &str, output: &str) { 30 | snapshot_inner(input, output) 31 | } 32 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_grid_template_columns.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`gridTemplateColumns`"#####, r#####"({ 4 | 1: "repeat(1, minmax(0, 1fr))", 5 | 2: "repeat(2, minmax(0, 1fr))", 6 | 3: "repeat(3, minmax(0, 1fr))", 7 | 4: "repeat(4, minmax(0, 1fr))", 8 | 5: "repeat(5, minmax(0, 1fr))", 9 | 6: "repeat(6, minmax(0, 1fr))", 10 | 7: "repeat(7, minmax(0, 1fr))", 11 | 8: "repeat(8, minmax(0, 1fr))", 12 | 9: "repeat(9, minmax(0, 1fr))", 13 | 10: "repeat(10, minmax(0, 1fr))", 14 | 11: "repeat(11, minmax(0, 1fr))", 15 | 12: "repeat(12, minmax(0, 1fr))", 16 | none: "none", 17 | }) 18 | ;"##### ; "0")] 19 | #[test_case(r#####"tw`grid-cols-1`"#####, r#####"({ 20 | gridTemplateColumns: "repeat(1, minmax(0, 1fr))", 21 | }) 22 | ;"##### ; "1")] 23 | #[test_case(r#####"tw`grid-cols-2`"#####, r#####"({ 24 | gridTemplateColumns: "repeat(2, minmax(0, 1fr))", 25 | }) 26 | ;"##### ; "2")] 27 | #[test_case(r#####"tw`grid-cols-3`"#####, r#####"({ 28 | gridTemplateColumns: "repeat(3, minmax(0, 1fr))", 29 | }) 30 | ;"##### ; "3")] 31 | #[test_case(r#####"tw`grid-cols-4`"#####, r#####"({ 32 | gridTemplateColumns: "repeat(4, minmax(0, 1fr))", 33 | }) 34 | ;"##### ; "4")] 35 | #[test_case(r#####"tw`grid-cols-5`"#####, r#####"({ 36 | gridTemplateColumns: "repeat(5, minmax(0, 1fr))", 37 | }) 38 | ;"##### ; "5")] 39 | #[test_case(r#####"tw`grid-cols-6`"#####, r#####"({ 40 | gridTemplateColumns: "repeat(6, minmax(0, 1fr))", 41 | }) 42 | ;"##### ; "6")] 43 | #[test_case(r#####"tw`grid-cols-7`"#####, r#####"({ 44 | gridTemplateColumns: "repeat(7, minmax(0, 1fr))", 45 | }) 46 | ;"##### ; "7")] 47 | #[test_case(r#####"tw`grid-cols-8`"#####, r#####"({ 48 | gridTemplateColumns: "repeat(8, minmax(0, 1fr))", 49 | }) 50 | ;"##### ; "8")] 51 | #[test_case(r#####"tw`grid-cols-9`"#####, r#####"({ 52 | gridTemplateColumns: "repeat(9, minmax(0, 1fr))", 53 | }) 54 | ;"##### ; "9")] 55 | #[test_case(r#####"tw`grid-cols-10`"#####, r#####"({ 56 | gridTemplateColumns: "repeat(10, minmax(0, 1fr))", 57 | }) 58 | ;"##### ; "10")] 59 | #[test_case(r#####"tw`grid-cols-11`"#####, r#####"({ 60 | gridTemplateColumns: "repeat(11, minmax(0, 1fr))", 61 | }) 62 | ;"##### ; "11")] 63 | #[test_case(r#####"tw`grid-cols-12`"#####, r#####"({ 64 | gridTemplateColumns: "repeat(12, minmax(0, 1fr))", 65 | }) 66 | ;"##### ; "12")] 67 | #[test_case(r#####"tw`grid-cols-none`"#####, r#####"({ 68 | gridTemplateColumns: "none", 69 | }) 70 | ;"##### ; "13")] 71 | #[test_case(r#####"tw`grid-cols-[200px minmax(900px, 1fr) 100px]`"#####, r#####"({ 72 | gridTemplateColumns: "200px minmax(900px, 1fr) 100px", 73 | })"##### ; "14")] 74 | fn test(input: &str, output: &str) { 75 | snapshot_inner(input, output) 76 | } 77 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_grid_template_rows.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`gridTemplateRows`"#####, r#####"({ 4 | 1: "repeat(1, minmax(0, 1fr))", 5 | 2: "repeat(2, minmax(0, 1fr))", 6 | 3: "repeat(3, minmax(0, 1fr))", 7 | 4: "repeat(4, minmax(0, 1fr))", 8 | 5: "repeat(5, minmax(0, 1fr))", 9 | 6: "repeat(6, minmax(0, 1fr))", 10 | none: "none", 11 | }) 12 | ;"##### ; "0")] 13 | #[test_case(r#####"tw`grid-rows-1`"#####, r#####"({ 14 | gridTemplateRows: "repeat(1, minmax(0, 1fr))", 15 | }) 16 | ;"##### ; "1")] 17 | #[test_case(r#####"tw`grid-rows-2`"#####, r#####"({ 18 | gridTemplateRows: "repeat(2, minmax(0, 1fr))", 19 | }) 20 | ;"##### ; "2")] 21 | #[test_case(r#####"tw`grid-rows-3`"#####, r#####"({ 22 | gridTemplateRows: "repeat(3, minmax(0, 1fr))", 23 | }) 24 | ;"##### ; "3")] 25 | #[test_case(r#####"tw`grid-rows-4`"#####, r#####"({ 26 | gridTemplateRows: "repeat(4, minmax(0, 1fr))", 27 | }) 28 | ;"##### ; "4")] 29 | #[test_case(r#####"tw`grid-rows-5`"#####, r#####"({ 30 | gridTemplateRows: "repeat(5, minmax(0, 1fr))", 31 | }) 32 | ;"##### ; "5")] 33 | #[test_case(r#####"tw`grid-rows-6`"#####, r#####"({ 34 | gridTemplateRows: "repeat(6, minmax(0, 1fr))", 35 | }) 36 | ;"##### ; "6")] 37 | #[test_case(r#####"tw`grid-rows-none`"#####, r#####"({ 38 | gridTemplateRows: "none", 39 | }) 40 | ;"##### ; "7")] 41 | #[test_case(r#####"tw`grid-rows-[200px minmax(900px, 1fr) 100px]`"#####, r#####"({ 42 | gridTemplateRows: "200px minmax(900px, 1fr) 100px", 43 | })"##### ; "8")] 44 | fn test(input: &str, output: &str) { 45 | snapshot_inner(input, output) 46 | } 47 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_justify_content.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`justify-start`"#####, r#####"({ 4 | justifyContent: "flex-start", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`justify-end`"#####, r#####"({ 8 | justifyContent: "flex-end", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`justify-center`"#####, r#####"({ 12 | justifyContent: "center", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`justify-between`"#####, r#####"({ 16 | justifyContent: "space-between", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`justify-around`"#####, r#####"({ 20 | justifyContent: "space-around", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`justify-evenly`"#####, r#####"({ 24 | justifyContent: "space-evenly", 25 | })"##### ; "5")] 26 | fn test(input: &str, output: &str) { 27 | snapshot_inner(input, output) 28 | } 29 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_justify_items.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`justify-items-start`"#####, r#####"({ 4 | justifyItems: "start", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`justify-items-end`"#####, r#####"({ 8 | justifyItems: "end", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`justify-items-center`"#####, r#####"({ 12 | justifyItems: "center", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`justify-items-stretch`"#####, r#####"({ 16 | justifyItems: "stretch", 17 | })"##### ; "3")] 18 | fn test(input: &str, output: &str) { 19 | snapshot_inner(input, output) 20 | } 21 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_justify_self.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`justify-self-auto`"#####, r#####"({ 4 | justifySelf: "auto", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`justify-self-start`"#####, r#####"({ 8 | justifySelf: "start", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`justify-self-end`"#####, r#####"({ 12 | justifySelf: "end", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`justify-self-center`"#####, r#####"({ 16 | justifySelf: "center", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`justify-self-stretch`"#####, r#####"({ 20 | justifySelf: "stretch", 21 | })"##### ; "4")] 22 | fn test(input: &str, output: &str) { 23 | snapshot_inner(input, output) 24 | } 25 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_order.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`order`"#####, r#####"({ 4 | 1: "1", 5 | 2: "2", 6 | 3: "3", 7 | 4: "4", 8 | 5: "5", 9 | 6: "6", 10 | 7: "7", 11 | 8: "8", 12 | 9: "9", 13 | 10: "10", 14 | 11: "11", 15 | 12: "12", 16 | first: "-9999", 17 | last: "9999", 18 | none: "0", 19 | }) 20 | ;"##### ; "0")] 21 | #[test_case(r#####"tw`order-1`"#####, r#####"({ 22 | order: "1", 23 | }) 24 | ;"##### ; "1")] 25 | #[test_case(r#####"tw`order-2`"#####, r#####"({ 26 | order: "2", 27 | }) 28 | ;"##### ; "2")] 29 | #[test_case(r#####"tw`order-3`"#####, r#####"({ 30 | order: "3", 31 | }) 32 | ;"##### ; "3")] 33 | #[test_case(r#####"tw`order-4`"#####, r#####"({ 34 | order: "4", 35 | }) 36 | ;"##### ; "4")] 37 | #[test_case(r#####"tw`order-5`"#####, r#####"({ 38 | order: "5", 39 | }) 40 | ;"##### ; "5")] 41 | #[test_case(r#####"tw`order-6`"#####, r#####"({ 42 | order: "6", 43 | }) 44 | ;"##### ; "6")] 45 | #[test_case(r#####"tw`order-7`"#####, r#####"({ 46 | order: "7", 47 | }) 48 | ;"##### ; "7")] 49 | #[test_case(r#####"tw`order-8`"#####, r#####"({ 50 | order: "8", 51 | }) 52 | ;"##### ; "8")] 53 | #[test_case(r#####"tw`order-9`"#####, r#####"({ 54 | order: "9", 55 | }) 56 | ;"##### ; "9")] 57 | #[test_case(r#####"tw`order-10`"#####, r#####"({ 58 | order: "10", 59 | }) 60 | ;"##### ; "10")] 61 | #[test_case(r#####"tw`order-11`"#####, r#####"({ 62 | order: "11", 63 | }) 64 | ;"##### ; "11")] 65 | #[test_case(r#####"tw`order-12`"#####, r#####"({ 66 | order: "12", 67 | }) 68 | ;"##### ; "12")] 69 | #[test_case(r#####"tw`order-first`"#####, r#####"({ 70 | order: "-9999", 71 | }) 72 | ;"##### ; "13")] 73 | #[test_case(r#####"tw`order-last`"#####, r#####"({ 74 | order: "9999", 75 | }) 76 | ;"##### ; "14")] 77 | #[test_case(r#####"tw`order-none`"#####, r#####"({ 78 | order: "0", 79 | }) 80 | ;"##### ; "15")] 81 | #[test_case(r#####"tw`order-[13]`"#####, r#####"({ 82 | order: "13", 83 | })"##### ; "16")] 84 | fn test(input: &str, output: &str) { 85 | snapshot_inner(input, output) 86 | } 87 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_place_content.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`place-content-center`"#####, r#####"({ 4 | placeContent: "center", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`place-content-start`"#####, r#####"({ 8 | placeContent: "start", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`place-content-end`"#####, r#####"({ 12 | placeContent: "end", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`place-content-between`"#####, r#####"({ 16 | placeContent: "space-between", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`place-content-around`"#####, r#####"({ 20 | placeContent: "space-around", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`place-content-evenly`"#####, r#####"({ 24 | placeContent: "space-evenly", 25 | }) 26 | ;"##### ; "5")] 27 | #[test_case(r#####"tw`place-content-stretch`"#####, r#####"({ 28 | placeContent: "stretch", 29 | }) 30 | ;"##### ; "6")] 31 | #[test_case(r#####"tw`place-content-baseline`"#####, r#####"({ 32 | placeContent: "baseline", 33 | })"##### ; "7")] 34 | fn test(input: &str, output: &str) { 35 | snapshot_inner(input, output) 36 | } 37 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_place_items.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`place-items-start`"#####, r#####"({ 4 | placeItems: "start", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`place-items-end`"#####, r#####"({ 8 | placeItems: "end", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`place-items-center`"#####, r#####"({ 12 | placeItems: "center", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`place-items-stretch`"#####, r#####"({ 16 | placeItems: "stretch", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`place-items-baseline`"#####, r#####"({ 20 | placeItems: "baseline", 21 | })"##### ; "4")] 22 | fn test(input: &str, output: &str) { 23 | snapshot_inner(input, output) 24 | } 25 | -------------------------------------------------------------------------------- /src/snapshot/utilties_flexbox_grid_place_self.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`place-self-auto`"#####, r#####"({ 4 | placeSelf: "auto", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`place-self-start`"#####, r#####"({ 8 | placeSelf: "start", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`place-self-end`"#####, r#####"({ 12 | placeSelf: "end", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`place-self-center`"#####, r#####"({ 16 | placeSelf: "center", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`place-self-stretch`"#####, r#####"({ 20 | placeSelf: "stretch", 21 | })"##### ; "4")] 22 | fn test(input: &str, output: &str) { 23 | snapshot_inner(input, output) 24 | } 25 | -------------------------------------------------------------------------------- /src/snapshot/utilties_interactivity_appearance.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`appearance-none`"#####, r#####"({ 4 | appearance: "none", 5 | })"##### ; "0")] 6 | fn test(input: &str, output: &str) { 7 | snapshot_inner(input, output) 8 | } 9 | -------------------------------------------------------------------------------- /src/snapshot/utilties_interactivity_pointer_events.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`pointer-events-none`"#####, r#####"({ 4 | pointerEvents: "none", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`pointer-events-auto`"#####, r#####"({ 8 | pointerEvents: "auto", 9 | })"##### ; "1")] 10 | fn test(input: &str, output: &str) { 11 | snapshot_inner(input, output) 12 | } 13 | -------------------------------------------------------------------------------- /src/snapshot/utilties_interactivity_resize.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`resize-none`"#####, r#####"({ 4 | resize: "none", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`resize-y`"#####, r#####"({ 8 | resize: "vertical", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`resize-x`"#####, r#####"({ 12 | resize: "horizontal", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`resize`"#####, r#####"({ 16 | resize: "both", 17 | })"##### ; "3")] 18 | fn test(input: &str, output: &str) { 19 | snapshot_inner(input, output) 20 | } 21 | -------------------------------------------------------------------------------- /src/snapshot/utilties_interactivity_scroll_behavior.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`scroll-auto`"#####, r#####"({ 4 | scrollBehavior: "auto", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`scroll-smooth`"#####, r#####"({ 8 | scrollBehavior: "smooth", 9 | })"##### ; "1")] 10 | fn test(input: &str, output: &str) { 11 | snapshot_inner(input, output) 12 | } 13 | -------------------------------------------------------------------------------- /src/snapshot/utilties_interactivity_scroll_snap_align.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`snap-start`"#####, r#####"({ 4 | scrollSnapAlign: "start", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`snap-end`"#####, r#####"({ 8 | scrollSnapAlign: "end", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`snap-center`"#####, r#####"({ 12 | scrollSnapAlign: "center", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`snap-align-none`"#####, r#####"({ 16 | scrollSnapAlign: "none", 17 | })"##### ; "3")] 18 | fn test(input: &str, output: &str) { 19 | snapshot_inner(input, output) 20 | } 21 | -------------------------------------------------------------------------------- /src/snapshot/utilties_interactivity_scroll_snap_stop.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`snap-normal`"#####, r#####"({ 4 | scrollSnapStop: "normal", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`snap-always`"#####, r#####"({ 8 | scrollSnapStop: "always", 9 | })"##### ; "1")] 10 | fn test(input: &str, output: &str) { 11 | snapshot_inner(input, output) 12 | } 13 | -------------------------------------------------------------------------------- /src/snapshot/utilties_interactivity_scroll_snap_type.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`snap-none`"#####, r#####"({ 4 | scrollSnapType: "none", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`snap-x`"#####, r#####"({ 8 | scrollSnapType: "x var(--tw-scroll-snap-strictness)", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`snap-y`"#####, r#####"({ 12 | scrollSnapType: "y var(--tw-scroll-snap-strictness)", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`snap-both`"#####, r#####"({ 16 | scrollSnapType: "both var(--tw-scroll-snap-strictness)", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`snap-mandatory`"#####, r#####"({ 20 | "--tw-scroll-snap-strictness": "mandatory", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`snap-proximity`"#####, r#####"({ 24 | "--tw-scroll-snap-strictness": "proximity", 25 | })"##### ; "5")] 26 | fn test(input: &str, output: &str) { 27 | snapshot_inner(input, output) 28 | } 29 | -------------------------------------------------------------------------------- /src/snapshot/utilties_interactivity_touch_action.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`touch-auto`"#####, r#####"({ 4 | touchAction: "auto", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`touch-none`"#####, r#####"({ 8 | touchAction: "none", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`touch-pan-x`"#####, r#####"({ 12 | "--tw-pan-x": "pan-x", 13 | touchAction: "var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)", 14 | }) 15 | ;"##### ; "2")] 16 | #[test_case(r#####"tw`touch-pan-left`"#####, r#####"({ 17 | "--tw-pan-x": "pan-left", 18 | touchAction: "var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)", 19 | }) 20 | ;"##### ; "3")] 21 | #[test_case(r#####"tw`touch-pan-right`"#####, r#####"({ 22 | "--tw-pan-x": "pan-right", 23 | touchAction: "var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)", 24 | }) 25 | ;"##### ; "4")] 26 | #[test_case(r#####"tw`touch-pan-y`"#####, r#####"({ 27 | "--tw-pan-y": "pan-y", 28 | touchAction: "var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)", 29 | }) 30 | ;"##### ; "5")] 31 | #[test_case(r#####"tw`touch-pan-up`"#####, r#####"({ 32 | "--tw-pan-y": "pan-up", 33 | touchAction: "var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)", 34 | }) 35 | ;"##### ; "6")] 36 | #[test_case(r#####"tw`touch-pan-down`"#####, r#####"({ 37 | "--tw-pan-y": "pan-down", 38 | touchAction: "var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)", 39 | }) 40 | ;"##### ; "7")] 41 | #[test_case(r#####"tw`touch-pinch-zoom`"#####, r#####"({ 42 | "--tw-pinch-zoom": "pinch-zoom", 43 | touchAction: "var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)", 44 | }) 45 | ;"##### ; "8")] 46 | #[test_case(r#####"tw`touch-manipulation`"#####, r#####"({ 47 | touchAction: "manipulation", 48 | })"##### ; "9")] 49 | fn test(input: &str, output: &str) { 50 | snapshot_inner(input, output) 51 | } 52 | -------------------------------------------------------------------------------- /src/snapshot/utilties_interactivity_user_select.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`select-none`"#####, r#####"({ 4 | userSelect: "none", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`select-text`"#####, r#####"({ 8 | userSelect: "text", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`select-all`"#####, r#####"({ 12 | userSelect: "all", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`select-auto`"#####, r#####"({ 16 | userSelect: "auto", 17 | })"##### ; "3")] 18 | fn test(input: &str, output: &str) { 19 | snapshot_inner(input, output) 20 | } 21 | -------------------------------------------------------------------------------- /src/snapshot/utilties_interactivity_will_change.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`willChange`"#####, r#####"({ 4 | auto: "auto", 5 | scroll: "scroll-position", 6 | contents: "contents", 7 | transform: "transform", 8 | }) 9 | ;"##### ; "0")] 10 | #[test_case(r#####"tw`will-change-auto`"#####, r#####"({ 11 | willChange: "auto", 12 | }) 13 | ;"##### ; "1")] 14 | #[test_case(r#####"tw`will-change-scroll`"#####, r#####"({ 15 | willChange: "scroll-position", 16 | }) 17 | ;"##### ; "2")] 18 | #[test_case(r#####"tw`will-change-contents`"#####, r#####"({ 19 | willChange: "contents", 20 | }) 21 | ;"##### ; "3")] 22 | #[test_case(r#####"tw`will-change-transform`"#####, r#####"({ 23 | willChange: "transform", 24 | }) 25 | ;"##### ; "4")] 26 | #[test_case(r#####"tw`will-change-[top, left]`"#####, r#####"({ 27 | willChange: "top, left", 28 | })"##### ; "5")] 29 | fn test(input: &str, output: &str) { 30 | snapshot_inner(input, output) 31 | } 32 | -------------------------------------------------------------------------------- /src/snapshot/utilties_sizing_min_height.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`minHeight`"#####, r#####"({ 4 | 0: "0px", 5 | full: "100%", 6 | screen: "100vh", 7 | min: "min-content", 8 | max: "max-content", 9 | fit: "fit-content", 10 | }) 11 | ;"##### ; "0")] 12 | #[test_case(r#####"tw`min-h-0`"#####, r#####"({ 13 | minHeight: "0px", 14 | }) 15 | ;"##### ; "1")] 16 | #[test_case(r#####"tw`min-h-full`"#####, r#####"({ 17 | minHeight: "100%", 18 | }) 19 | ;"##### ; "2")] 20 | #[test_case(r#####"tw`min-h-screen`"#####, r#####"({ 21 | minHeight: "100vh", 22 | }) 23 | ;"##### ; "3")] 24 | #[test_case(r#####"tw`min-h-min`"#####, r#####"({ 25 | minHeight: "min-content", 26 | }) 27 | ;"##### ; "4")] 28 | #[test_case(r#####"tw`min-h-max`"#####, r#####"({ 29 | minHeight: "max-content", 30 | }) 31 | ;"##### ; "5")] 32 | #[test_case(r#####"tw`min-h-fit`"#####, r#####"({ 33 | minHeight: "fit-content", 34 | }) 35 | ;"##### ; "6")] 36 | #[test_case(r#####"tw`min-h-[3.23rem]`"#####, r#####"({ 37 | minHeight: "3.23rem", 38 | }) 39 | ;"##### ; "7")] 40 | #[test_case(r#####"tw`min-h-[calc(100%+1rem)]`"#####, r#####"({ 41 | minHeight: "calc(100% + 1rem)", 42 | }) 43 | ;"##### ; "8")] 44 | #[test_case(r#####"tw`min-h-[var(--height)]`"#####, r#####"({ 45 | minHeight: "var(--height)", 46 | }) 47 | ;"##### ; "9")] 48 | #[test_case(r#####"tw`max-h-[3.23rem]`"#####, r#####"({ 49 | maxHeight: "3.23rem", 50 | }) 51 | ;"##### ; "10")] 52 | #[test_case(r#####"tw`max-h-[calc(100%+1rem)]`"#####, r#####"({ 53 | maxHeight: "calc(100% + 1rem)", 54 | }) 55 | ;"##### ; "11")] 56 | #[test_case(r#####"tw`max-h-[var(--height)]`"#####, r#####"({ 57 | maxHeight: "var(--height)", 58 | })"##### ; "12")] 59 | fn test(input: &str, output: &str) { 60 | snapshot_inner(input, output) 61 | } 62 | -------------------------------------------------------------------------------- /src/snapshot/utilties_sizing_min_width.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`minWidth`"#####, r#####"({ 4 | 0: "0px", 5 | full: "100%", 6 | min: "min-content", 7 | max: "max-content", 8 | fit: "fit-content", 9 | }) 10 | ;"##### ; "0")] 11 | #[test_case(r#####"tw`min-w-0`"#####, r#####"({ 12 | minWidth: "0px", 13 | }) 14 | ;"##### ; "1")] 15 | #[test_case(r#####"tw`min-w-full`"#####, r#####"({ 16 | minWidth: "100%", 17 | }) 18 | ;"##### ; "2")] 19 | #[test_case(r#####"tw`min-w-min`"#####, r#####"({ 20 | minWidth: "min-content", 21 | }) 22 | ;"##### ; "3")] 23 | #[test_case(r#####"tw`min-w-max`"#####, r#####"({ 24 | minWidth: "max-content", 25 | }) 26 | ;"##### ; "4")] 27 | #[test_case(r#####"tw`min-w-fit`"#####, r#####"({ 28 | minWidth: "fit-content", 29 | }) 30 | ;"##### ; "5")] 31 | #[test_case(r#####"tw`min-w-[3.23rem]`"#####, r#####"({ 32 | minWidth: "3.23rem", 33 | }) 34 | ;"##### ; "6")] 35 | #[test_case(r#####"tw`min-w-[calc(100%+1rem)]`"#####, r#####"({ 36 | minWidth: "calc(100% + 1rem)", 37 | }) 38 | ;"##### ; "7")] 39 | #[test_case(r#####"tw`min-w-[var(--width)]`"#####, r#####"({ 40 | minWidth: "var(--width)", 41 | }) 42 | ;"##### ; "8")] 43 | #[test_case(r#####"tw`max-w-[3.23rem]`"#####, r#####"({ 44 | maxWidth: "3.23rem", 45 | }) 46 | ;"##### ; "9")] 47 | #[test_case(r#####"tw`max-w-[calc(100%+1rem)]`"#####, r#####"({ 48 | maxWidth: "calc(100% + 1rem)", 49 | }) 50 | ;"##### ; "10")] 51 | #[test_case(r#####"tw`max-w-[var(--width)]`"#####, r#####"({ 52 | maxWidth: "var(--width)", 53 | })"##### ; "11")] 54 | fn test(input: &str, output: &str) { 55 | snapshot_inner(input, output) 56 | } 57 | -------------------------------------------------------------------------------- /src/snapshot/utilties_tables_border_collapse.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`border-collapse`"#####, r#####"({ 4 | borderCollapse: "collapse", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`border-separate`"#####, r#####"({ 8 | borderCollapse: "separate", 9 | })"##### ; "1")] 10 | fn test(input: &str, output: &str) { 11 | snapshot_inner(input, output) 12 | } 13 | -------------------------------------------------------------------------------- /src/snapshot/utilties_tables_caption_side.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`caption-top`"#####, r#####"({ 4 | captionSide: "top", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`caption-bottom`"#####, r#####"({ 8 | captionSide: "bottom", 9 | })"##### ; "1")] 10 | fn test(input: &str, output: &str) { 11 | snapshot_inner(input, output) 12 | } 13 | -------------------------------------------------------------------------------- /src/snapshot/utilties_tables_table_layout.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`table-auto`"#####, r#####"({ 4 | tableLayout: "auto", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`table-fixed`"#####, r#####"({ 8 | tableLayout: "fixed", 9 | })"##### ; "1")] 10 | fn test(input: &str, output: &str) { 11 | snapshot_inner(input, output) 12 | } 13 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_font_family.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`font-sans`"#####, r#####"({ 4 | fontFamily: 5 | "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"", 6 | }) 7 | ;"##### ; "0")] 8 | #[test_case(r#####"tw`font-serif`"#####, r#####"({ 9 | fontFamily: "ui-serif, Georgia, Cambria, "Times New Roman", Times, serif", 10 | }) 11 | ;"##### ; "1")] 12 | #[test_case(r#####"tw`font-mono`"#####, r#####"({ 13 | fontFamily: 14 | "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace", 15 | }) 16 | ;"##### ; "2")] 17 | #[test_case(r#####"tw`font-custom`"#####, r#####"({ 18 | fontFamily: "Inter var, sans-serif", 19 | fontFeatureSettings: ""cv11", "ss01"", 20 | fontVariationSettings: ""opsz" 32", 21 | }) 22 | ;"##### ; "3")] 23 | #[test_case(r#####"tw`font-['Open Sans']`"#####, r#####"({ 24 | fontFamily: "'Open Sans'", 25 | }) 26 | ;"##### ; "4")] 27 | #[test_case(r#####"tw`font-[generic-name:fantasy]`"#####, r#####"({ 28 | fontFamily: "fantasy", 29 | }) 30 | ;"##### ; "5")] 31 | #[test_case(r#####"tw`font-[family-name:'this and that', this]`"#####, r#####"({ 32 | fontFamily: "'this and that', this", 33 | })"##### ; "6")] 34 | fn test(input: &str, output: &str) { 35 | snapshot_inner(input, output) 36 | } 37 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_font_smoothing.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`antialiased`"#####, r#####"({ 4 | WebkitFontSmoothing: "antialiased", 5 | MozOsxFontSmoothing: "grayscale", 6 | }) 7 | ;"##### ; "0")] 8 | #[test_case(r#####"tw`subpixel-antialiased`"#####, r#####"({ 9 | WebkitFontSmoothing: "auto", 10 | MozOsxFontSmoothing: "auto", 11 | })"##### ; "1")] 12 | fn test(input: &str, output: &str) { 13 | snapshot_inner(input, output) 14 | } 15 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_font_style.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`italic`"#####, r#####"({ 4 | fontStyle: "italic", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`not-italic`"#####, r#####"({ 8 | fontStyle: "normal", 9 | })"##### ; "1")] 10 | fn test(input: &str, output: &str) { 11 | snapshot_inner(input, output) 12 | } 13 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_font_variant_numeric.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`normal-nums`"#####, r#####"({ 4 | fontVariantNumeric: "normal", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`ordinal`"#####, r#####"({ 8 | "--tw-ordinal": "ordinal", 9 | fontVariantNumeric: 10 | "var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)", 11 | }) 12 | ;"##### ; "1")] 13 | #[test_case(r#####"tw`slashed-zero`"#####, r#####"({ 14 | "--tw-slashed-zero": "slashed-zero", 15 | fontVariantNumeric: 16 | "var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)", 17 | }) 18 | ;"##### ; "2")] 19 | #[test_case(r#####"tw`lining-nums`"#####, r#####"({ 20 | "--tw-numeric-figure": "lining-nums", 21 | fontVariantNumeric: 22 | "var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)", 23 | }) 24 | ;"##### ; "3")] 25 | #[test_case(r#####"tw`oldstyle-nums`"#####, r#####"({ 26 | "--tw-numeric-figure": "oldstyle-nums", 27 | fontVariantNumeric: 28 | "var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)", 29 | }) 30 | ;"##### ; "4")] 31 | #[test_case(r#####"tw`proportional-nums`"#####, r#####"({ 32 | "--tw-numeric-spacing": "proportional-nums", 33 | fontVariantNumeric: 34 | "var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)", 35 | }) 36 | ;"##### ; "5")] 37 | #[test_case(r#####"tw`tabular-nums`"#####, r#####"({ 38 | "--tw-numeric-spacing": "tabular-nums", 39 | fontVariantNumeric: 40 | "var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)", 41 | }) 42 | ;"##### ; "6")] 43 | #[test_case(r#####"tw`diagonal-fractions`"#####, r#####"({ 44 | "--tw-numeric-fraction": "diagonal-fractions", 45 | fontVariantNumeric: 46 | "var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)", 47 | }) 48 | ;"##### ; "7")] 49 | #[test_case(r#####"tw`stacked-fractions`"#####, r#####"({ 50 | "--tw-numeric-fraction": "stacked-fractions", 51 | fontVariantNumeric: 52 | "var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)", 53 | })"##### ; "8")] 54 | fn test(input: &str, output: &str) { 55 | snapshot_inner(input, output) 56 | } 57 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_font_weight.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`font-thin`"#####, r#####"({ 4 | fontWeight: "100", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`font-extralight`"#####, r#####"({ 8 | fontWeight: "200", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`font-light`"#####, r#####"({ 12 | fontWeight: "300", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`font-normal`"#####, r#####"({ 16 | fontWeight: "400", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`font-medium`"#####, r#####"({ 20 | fontWeight: "500", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`font-semibold`"#####, r#####"({ 24 | fontWeight: "600", 25 | }) 26 | ;"##### ; "5")] 27 | #[test_case(r#####"tw`font-bold`"#####, r#####"({ 28 | fontWeight: "700", 29 | }) 30 | ;"##### ; "6")] 31 | #[test_case(r#####"tw`font-extrabold`"#####, r#####"({ 32 | fontWeight: "800", 33 | }) 34 | ;"##### ; "7")] 35 | #[test_case(r#####"tw`font-black`"#####, r#####"({ 36 | fontWeight: "900", 37 | }) 38 | ;"##### ; "8")] 39 | #[test_case(r#####"tw`font-[300]`"#####, r#####"({ 40 | fontWeight: "300", 41 | }) 42 | ;"##### ; "9")] 43 | #[test_case(r#####"tw`font-[number:medium]`"#####, r#####"({ 44 | fontWeight: "medium", 45 | })"##### ; "10")] 46 | fn test(input: &str, output: &str) { 47 | snapshot_inner(input, output) 48 | } 49 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_hyphens.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`hyphens-none`"#####, r#####"({ 4 | hyphens: "none", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`hyphens-manual`"#####, r#####"({ 8 | hyphens: "manual", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`hyphens-auto`"#####, r#####"({ 12 | hyphens: "auto", 13 | })"##### ; "2")] 14 | fn test(input: &str, output: &str) { 15 | snapshot_inner(input, output) 16 | } 17 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_letter_spacing.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`letterSpacing`"#####, r#####"({ 4 | tighter: "-0.05em", 5 | tight: "-0.025em", 6 | normal: "0em", 7 | wide: "0.025em", 8 | wider: "0.05em", 9 | widest: "0.1em", 10 | }) 11 | ;"##### ; "0")] 12 | #[test_case(r#####"tw`tracking-tighter`"#####, r#####"({ 13 | letterSpacing: "-0.05em", 14 | }) 15 | ;"##### ; "1")] 16 | #[test_case(r#####"tw`tracking-tight`"#####, r#####"({ 17 | letterSpacing: "-0.025em", 18 | }) 19 | ;"##### ; "2")] 20 | #[test_case(r#####"tw`tracking-normal`"#####, r#####"({ 21 | letterSpacing: "0em", 22 | }) 23 | ;"##### ; "3")] 24 | #[test_case(r#####"tw`tracking-wide`"#####, r#####"({ 25 | letterSpacing: "0.025em", 26 | }) 27 | ;"##### ; "4")] 28 | #[test_case(r#####"tw`tracking-wider`"#####, r#####"({ 29 | letterSpacing: "0.05em", 30 | }) 31 | ;"##### ; "5")] 32 | #[test_case(r#####"tw`tracking-widest`"#####, r#####"({ 33 | letterSpacing: "0.1em", 34 | }) 35 | ;"##### ; "6")] 36 | #[test_case(r#####"tw`-tracking-tighter`"#####, r#####"({ 37 | letterSpacing: "0.05em", 38 | }) 39 | ;"##### ; "7")] 40 | #[test_case(r#####"tw`-tracking-tight`"#####, r#####"({ 41 | letterSpacing: "0.025em", 42 | }) 43 | ;"##### ; "8")] 44 | #[test_case(r#####"tw`-tracking-normal`"#####, r#####"({ 45 | letterSpacing: "-0em", 46 | }) 47 | ;"##### ; "9")] 48 | #[test_case(r#####"tw`-tracking-wide`"#####, r#####"({ 49 | letterSpacing: "-0.025em", 50 | }) 51 | ;"##### ; "10")] 52 | #[test_case(r#####"tw`-tracking-wider`"#####, r#####"({ 53 | letterSpacing: "-0.05em", 54 | }) 55 | ;"##### ; "11")] 56 | #[test_case(r#####"tw`-tracking-widest`"#####, r#####"({ 57 | letterSpacing: "-0.1em", 58 | }) 59 | ;"##### ; "12")] 60 | #[test_case(r#####"tw`-tracking-[var(--tracking)]`"#####, r#####"({ 61 | letterSpacing: "calc(var(--tracking) * -1)", 62 | }) 63 | ;"##### ; "13")] 64 | #[test_case(r#####"tw`tracking-[var(--tracking)]`"#####, r#####"({ 65 | letterSpacing: "var(--tracking)", 66 | }) 67 | ;"##### ; "14")] 68 | #[test_case(r#####"tw`-tracking-[2em]`"#####, r#####"({ 69 | letterSpacing: "-2em", 70 | }) 71 | ;"##### ; "15")] 72 | #[test_case(r#####"tw`tracking-[.25em]`"#####, r#####"({ 73 | letterSpacing: ".25em", 74 | })"##### ; "16")] 75 | fn test(input: &str, output: &str) { 76 | snapshot_inner(input, output) 77 | } 78 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_line_height.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`lineHeight`"#####, r#####"({ 4 | 3: ".75rem", 5 | 4: "1rem", 6 | 5: "1.25rem", 7 | 6: "1.5rem", 8 | 7: "1.75rem", 9 | 8: "2rem", 10 | 9: "2.25rem", 11 | 10: "2.5rem", 12 | none: "1", 13 | tight: "1.25", 14 | snug: "1.375", 15 | normal: "1.5", 16 | relaxed: "1.625", 17 | loose: "2", 18 | }) 19 | ;"##### ; "0")] 20 | #[test_case(r#####"tw`leading-3`"#####, r#####"({ 21 | lineHeight: ".75rem", 22 | }) 23 | ;"##### ; "1")] 24 | #[test_case(r#####"tw`leading-4`"#####, r#####"({ 25 | lineHeight: "1rem", 26 | }) 27 | ;"##### ; "2")] 28 | #[test_case(r#####"tw`leading-5`"#####, r#####"({ 29 | lineHeight: "1.25rem", 30 | }) 31 | ;"##### ; "3")] 32 | #[test_case(r#####"tw`leading-6`"#####, r#####"({ 33 | lineHeight: "1.5rem", 34 | }) 35 | ;"##### ; "4")] 36 | #[test_case(r#####"tw`leading-7`"#####, r#####"({ 37 | lineHeight: "1.75rem", 38 | }) 39 | ;"##### ; "5")] 40 | #[test_case(r#####"tw`leading-8`"#####, r#####"({ 41 | lineHeight: "2rem", 42 | }) 43 | ;"##### ; "6")] 44 | #[test_case(r#####"tw`leading-9`"#####, r#####"({ 45 | lineHeight: "2.25rem", 46 | }) 47 | ;"##### ; "7")] 48 | #[test_case(r#####"tw`leading-10`"#####, r#####"({ 49 | lineHeight: "2.5rem", 50 | }) 51 | ;"##### ; "8")] 52 | #[test_case(r#####"tw`leading-none`"#####, r#####"({ 53 | lineHeight: "1", 54 | }) 55 | ;"##### ; "9")] 56 | #[test_case(r#####"tw`leading-tight`"#####, r#####"({ 57 | lineHeight: "1.25", 58 | }) 59 | ;"##### ; "10")] 60 | #[test_case(r#####"tw`leading-snug`"#####, r#####"({ 61 | lineHeight: "1.375", 62 | }) 63 | ;"##### ; "11")] 64 | #[test_case(r#####"tw`leading-normal`"#####, r#####"({ 65 | lineHeight: "1.5", 66 | }) 67 | ;"##### ; "12")] 68 | #[test_case(r#####"tw`leading-relaxed`"#####, r#####"({ 69 | lineHeight: "1.625", 70 | }) 71 | ;"##### ; "13")] 72 | #[test_case(r#####"tw`leading-loose`"#####, r#####"({ 73 | lineHeight: "2", 74 | }) 75 | ;"##### ; "14")] 76 | #[test_case(r#####"tw`leading-[3rem]`"#####, r#####"({ 77 | lineHeight: "3rem", 78 | }) 79 | ;"##### ; "15")] 80 | #[test_case(r#####"tw`leading-[var(--leading)]`"#####, r#####"({ 81 | lineHeight: "var(--leading)", 82 | })"##### ; "16")] 83 | fn test(input: &str, output: &str) { 84 | snapshot_inner(input, output) 85 | } 86 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_list_style_image.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`list-image-none`"#####, r#####"({ 4 | listStyleImage: "none", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`list-image-[url(checkmark.png)]`"#####, r#####"({ 8 | listStyleImage: "url(checkmark.png)", 9 | })"##### ; "1")] 10 | fn test(input: &str, output: &str) { 11 | snapshot_inner(input, output) 12 | } 13 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_list_style_position.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`list-inside`"#####, r#####"({ 4 | listStylePosition: "inside", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`list-outside`"#####, r#####"({ 8 | listStylePosition: "outside", 9 | })"##### ; "1")] 10 | fn test(input: &str, output: &str) { 11 | snapshot_inner(input, output) 12 | } 13 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_list_style_type.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`listStyleType`"#####, r#####"({ 4 | none: "none", 5 | disc: "disc", 6 | decimal: "decimal", 7 | }) 8 | ;"##### ; "0")] 9 | #[test_case(r#####"tw`list-none`"#####, r#####"({ 10 | listStyleType: "none", 11 | }) 12 | ;"##### ; "1")] 13 | #[test_case(r#####"tw`list-disc`"#####, r#####"({ 14 | listStyleType: "disc", 15 | }) 16 | ;"##### ; "2")] 17 | #[test_case(r#####"tw`list-decimal`"#####, r#####"({ 18 | listStyleType: "decimal", 19 | }) 20 | ;"##### ; "3")] 21 | #[test_case(r#####"tw`list-[upper-roman]`"#####, r#####"({ 22 | listStyleType: "upper-roman", 23 | }) 24 | ;"##### ; "4")] 25 | #[test_case(r#####"tw`list-['1F44D']`"#####, r#####"({ 26 | listStyleType: "'1F44D'", 27 | }) 28 | ;"##### ; "5")] 29 | #[test_case(r#####"tw`list-[var(--value)]`"#####, r#####"({ 30 | listStyleType: "var(--value)", 31 | })"##### ; "6")] 32 | fn test(input: &str, output: &str) { 33 | snapshot_inner(input, output) 34 | } 35 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_text_align.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`text-left`"#####, r#####"({ 4 | textAlign: "left", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`text-center`"#####, r#####"({ 8 | textAlign: "center", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`text-right`"#####, r#####"({ 12 | textAlign: "right", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`text-justify`"#####, r#####"({ 16 | textAlign: "justify", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`text-start`"#####, r#####"({ 20 | textAlign: "start", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`text-end`"#####, r#####"({ 24 | textAlign: "end", 25 | })"##### ; "5")] 26 | fn test(input: &str, output: &str) { 27 | snapshot_inner(input, output) 28 | } 29 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_text_decoration.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`underline`"#####, r#####"({ 4 | textDecorationLine: "underline", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`overline`"#####, r#####"({ 8 | textDecorationLine: "overline", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`line-through`"#####, r#####"({ 12 | textDecorationLine: "line-through", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`no-underline`"#####, r#####"({ 16 | textDecorationLine: "none", 17 | })"##### ; "3")] 18 | fn test(input: &str, output: &str) { 19 | snapshot_inner(input, output) 20 | } 21 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_text_decoration_style.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`decoration-solid`"#####, r#####"({ 4 | textDecorationStyle: "solid", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`decoration-double`"#####, r#####"({ 8 | textDecorationStyle: "double", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`decoration-dotted`"#####, r#####"({ 12 | textDecorationStyle: "dotted", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`decoration-dashed`"#####, r#####"({ 16 | textDecorationStyle: "dashed", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`decoration-wavy`"#####, r#####"({ 20 | textDecorationStyle: "wavy", 21 | })"##### ; "4")] 22 | fn test(input: &str, output: &str) { 23 | snapshot_inner(input, output) 24 | } 25 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_text_decoration_thickness.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`textDecorationThickness`"#####, r#####"({ 4 | 0: "0px", 5 | 1: "1px", 6 | 2: "2px", 7 | 4: "4px", 8 | 8: "8px", 9 | auto: "auto", 10 | "from-font": "from-font", 11 | }) 12 | ;"##### ; "0")] 13 | #[test_case(r#####"tw`decoration-auto`"#####, r#####"({ 14 | textDecorationThickness: "auto", 15 | }) 16 | ;"##### ; "1")] 17 | #[test_case(r#####"tw`decoration-from-font`"#####, r#####"({ 18 | textDecorationThickness: "from-font", 19 | }) 20 | ;"##### ; "2")] 21 | #[test_case(r#####"tw`decoration-0`"#####, r#####"({ 22 | textDecorationThickness: "0px", 23 | }) 24 | ;"##### ; "3")] 25 | #[test_case(r#####"tw`decoration-1`"#####, r#####"({ 26 | textDecorationThickness: "1px", 27 | }) 28 | ;"##### ; "4")] 29 | #[test_case(r#####"tw`decoration-2`"#####, r#####"({ 30 | textDecorationThickness: "2px", 31 | }) 32 | ;"##### ; "5")] 33 | #[test_case(r#####"tw`decoration-4`"#####, r#####"({ 34 | textDecorationThickness: "4px", 35 | }) 36 | ;"##### ; "6")] 37 | #[test_case(r#####"tw`decoration-8`"#####, r#####"({ 38 | textDecorationThickness: "8px", 39 | }) 40 | ;"##### ; "7")] 41 | #[test_case(r#####"tw`decoration-[length:10px]`"#####, r#####"({ 42 | textDecorationThickness: "10px", 43 | }) 44 | ;"##### ; "8")] 45 | #[test_case(r#####"tw`decoration-[percentage:10%]`"#####, r#####"({ 46 | textDecorationThickness: "10%", 47 | })"##### ; "9")] 48 | fn test(input: &str, output: &str) { 49 | snapshot_inner(input, output) 50 | } 51 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_text_opacity.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`text-opacity-0`"#####, r#####"({ 4 | "--tw-text-opacity": "0", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`text-opacity-5`"#####, r#####"({ 8 | "--tw-text-opacity": "0.05", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`text-opacity-10`"#####, r#####"({ 12 | "--tw-text-opacity": "0.1", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`text-opacity-20`"#####, r#####"({ 16 | "--tw-text-opacity": "0.2", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`text-opacity-25`"#####, r#####"({ 20 | "--tw-text-opacity": "0.25", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`text-opacity-30`"#####, r#####"({ 24 | "--tw-text-opacity": "0.3", 25 | }) 26 | ;"##### ; "5")] 27 | #[test_case(r#####"tw`text-opacity-40`"#####, r#####"({ 28 | "--tw-text-opacity": "0.4", 29 | }) 30 | ;"##### ; "6")] 31 | #[test_case(r#####"tw`text-opacity-50`"#####, r#####"({ 32 | "--tw-text-opacity": "0.5", 33 | }) 34 | ;"##### ; "7")] 35 | #[test_case(r#####"tw`text-opacity-60`"#####, r#####"({ 36 | "--tw-text-opacity": "0.6", 37 | }) 38 | ;"##### ; "8")] 39 | #[test_case(r#####"tw`text-opacity-70`"#####, r#####"({ 40 | "--tw-text-opacity": "0.7", 41 | }) 42 | ;"##### ; "9")] 43 | #[test_case(r#####"tw`text-opacity-75`"#####, r#####"({ 44 | "--tw-text-opacity": "0.75", 45 | }) 46 | ;"##### ; "10")] 47 | #[test_case(r#####"tw`text-opacity-80`"#####, r#####"({ 48 | "--tw-text-opacity": "0.8", 49 | }) 50 | ;"##### ; "11")] 51 | #[test_case(r#####"tw`text-opacity-90`"#####, r#####"({ 52 | "--tw-text-opacity": "0.9", 53 | }) 54 | ;"##### ; "12")] 55 | #[test_case(r#####"tw`text-opacity-95`"#####, r#####"({ 56 | "--tw-text-opacity": "0.95", 57 | }) 58 | ;"##### ; "13")] 59 | #[test_case(r#####"tw`text-opacity-100`"#####, r#####"({ 60 | "--tw-text-opacity": "1", 61 | })"##### ; "14")] 62 | fn test(input: &str, output: &str) { 63 | snapshot_inner(input, output) 64 | } 65 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_text_overflow.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`truncate`"#####, r#####"({ 4 | overflow: "hidden", 5 | textOverflow: "ellipsis", 6 | whiteSpace: "nowrap", 7 | }) 8 | ;"##### ; "0")] 9 | #[test_case(r#####"tw`text-ellipsis`"#####, r#####"({ 10 | textOverflow: "ellipsis", 11 | }) 12 | ;"##### ; "1")] 13 | #[test_case(r#####"tw`text-clip`"#####, r#####"({ 14 | textOverflow: "clip", 15 | })"##### ; "2")] 16 | fn test(input: &str, output: &str) { 17 | snapshot_inner(input, output) 18 | } 19 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_text_transform.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`uppercase`"#####, r#####"({ 4 | textTransform: "uppercase", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`lowercase`"#####, r#####"({ 8 | textTransform: "lowercase", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`capitalize`"#####, r#####"({ 12 | textTransform: "capitalize", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`normal-case`"#####, r#####"({ 16 | textTransform: "none", 17 | })"##### ; "3")] 18 | fn test(input: &str, output: &str) { 19 | snapshot_inner(input, output) 20 | } 21 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_text_underline_offset.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"theme`textUnderlineOffset`"#####, r#####"({ 4 | 0: "0px", 5 | 1: "1px", 6 | 2: "2px", 7 | 4: "4px", 8 | 8: "8px", 9 | auto: "auto", 10 | }) 11 | ;"##### ; "0")] 12 | #[test_case(r#####"tw`underline-offset-auto`"#####, r#####"({ 13 | textUnderlineOffset: "auto", 14 | }) 15 | ;"##### ; "1")] 16 | #[test_case(r#####"tw`underline-offset-0`"#####, r#####"({ 17 | textUnderlineOffset: "0px", 18 | }) 19 | ;"##### ; "2")] 20 | #[test_case(r#####"tw`underline-offset-1`"#####, r#####"({ 21 | textUnderlineOffset: "1px", 22 | }) 23 | ;"##### ; "3")] 24 | #[test_case(r#####"tw`underline-offset-2`"#####, r#####"({ 25 | textUnderlineOffset: "2px", 26 | }) 27 | ;"##### ; "4")] 28 | #[test_case(r#####"tw`underline-offset-4`"#####, r#####"({ 29 | textUnderlineOffset: "4px", 30 | }) 31 | ;"##### ; "5")] 32 | #[test_case(r#####"tw`underline-offset-8`"#####, r#####"({ 33 | textUnderlineOffset: "8px", 34 | }) 35 | ;"##### ; "6")] 36 | #[test_case(r#####"tw`underline-offset-[3px]`"#####, r#####"({ 37 | textUnderlineOffset: "3px", 38 | }) 39 | ;"##### ; "7")] 40 | #[test_case(r#####"tw`underline-offset-[length:3px]`"#####, r#####"({ 41 | textUnderlineOffset: "3px", 42 | }) 43 | ;"##### ; "8")] 44 | #[test_case(r#####"tw`underline-offset-[30%]`"#####, r#####"({ 45 | textUnderlineOffset: "30%", 46 | }) 47 | ;"##### ; "9")] 48 | #[test_case(r#####"tw`underline-offset-[percentage:30%]`"#####, r#####"({ 49 | textUnderlineOffset: "30%", 50 | })"##### ; "10")] 51 | fn test(input: &str, output: &str) { 52 | snapshot_inner(input, output) 53 | } 54 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_vertical_align.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`align-baseline`"#####, r#####"({ 4 | verticalAlign: "baseline", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`align-top`"#####, r#####"({ 8 | verticalAlign: "top", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`align-middle`"#####, r#####"({ 12 | verticalAlign: "middle", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`align-bottom`"#####, r#####"({ 16 | verticalAlign: "bottom", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`align-text-top`"#####, r#####"({ 20 | verticalAlign: "text-top", 21 | }) 22 | ;"##### ; "4")] 23 | #[test_case(r#####"tw`align-text-bottom`"#####, r#####"({ 24 | verticalAlign: "text-bottom", 25 | }) 26 | ;"##### ; "5")] 27 | #[test_case(r#####"tw`align-sub`"#####, r#####"({ 28 | verticalAlign: "sub", 29 | }) 30 | ;"##### ; "6")] 31 | #[test_case(r#####"tw`align-super`"#####, r#####"({ 32 | verticalAlign: "super", 33 | }) 34 | ;"##### ; "7")] 35 | #[test_case(r#####"tw`align-[something]`"#####, r#####"({ 36 | verticalAlign: "something", 37 | })"##### ; "8")] 38 | fn test(input: &str, output: &str) { 39 | snapshot_inner(input, output) 40 | } 41 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_whitespace.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`whitespace-normal`"#####, r#####"({ 4 | whiteSpace: "normal", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`whitespace-nowrap`"#####, r#####"({ 8 | whiteSpace: "nowrap", 9 | }) 10 | ;"##### ; "1")] 11 | #[test_case(r#####"tw`whitespace-pre`"#####, r#####"({ 12 | whiteSpace: "pre", 13 | }) 14 | ;"##### ; "2")] 15 | #[test_case(r#####"tw`whitespace-pre-line`"#####, r#####"({ 16 | whiteSpace: "pre-line", 17 | }) 18 | ;"##### ; "3")] 19 | #[test_case(r#####"tw`whitespace-pre-wrap`"#####, r#####"({ 20 | whiteSpace: "pre-wrap", 21 | })"##### ; "4")] 22 | fn test(input: &str, output: &str) { 23 | snapshot_inner(input, output) 24 | } 25 | -------------------------------------------------------------------------------- /src/snapshot/utilties_typography_word_break.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`break-keep`"#####, r#####"({ 4 | wordBreak: "keep-all", 5 | }) 6 | ;"##### ; "0")] 7 | #[test_case(r#####"tw`break-normal`"#####, r#####"({ 8 | overflowWrap: "normal", 9 | wordBreak: "normal", 10 | }) 11 | ;"##### ; "1")] 12 | #[test_case(r#####"tw`break-words`"#####, r#####"({ 13 | overflowWrap: "break-word", 14 | }) 15 | ;"##### ; "2")] 16 | #[test_case(r#####"tw`break-all`"#####, r#####"({ 17 | wordBreak: "break-all", 18 | })"##### ; "3")] 19 | fn test(input: &str, output: &str) { 20 | snapshot_inner(input, output) 21 | } 22 | -------------------------------------------------------------------------------- /src/snapshot/variables_variables.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`css-class-with-variable-as-rule-property`"#####, r#####"({ 4 | '--some-css-variable-as-rule-prop': "blue", 5 | }) // Test negative css variables 6 | 7 | ;"##### ; "0")] 8 | #[test_case(r#####"tw`-mx-gutter-1/2`"#####, r#####"({ 9 | marginLeft: "calc(var(--gutter-half) * -1)", 10 | marginRight: "calc(var(--gutter-half) * -1)", 11 | })"##### ; "1")] 12 | fn test(input: &str, output: &str) { 13 | snapshot_inner(input, output) 14 | } 15 | -------------------------------------------------------------------------------- /src/snapshot/variant_ordering_variant_ordering.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`before:valid:rtl:motion-safe:contrast-more:dark:print:portrait:any-pointer-fine:block`"#####, r#####"({ 4 | "@media (any-pointer: fine)": { 5 | "@media (orientation: portrait)": { 6 | "@media print": { 7 | "@media (prefers-color-scheme: dark)": { 8 | "@media (prefers-contrast: more)": { 9 | "@media (prefers-reduced-motion: no-preference)": { 10 | ":is([dir="rtl"] &:valid)::before": { 11 | content: "var(--tw-content)", 12 | display: "block", 13 | }, 14 | }, 15 | }, 16 | }, 17 | }, 18 | }, 19 | }, 20 | }) 21 | ;"##### ; "0")] 22 | #[test_case(r#####"tw`any-pointer-fine:portrait:print:dark:contrast-more:motion-safe:rtl:valid:before:mt-5`"#####, r#####"({ 23 | "@media (prefers-reduced-motion: no-preference)": { 24 | "@media (prefers-contrast: more)": { 25 | "@media (prefers-color-scheme: dark)": { 26 | "@media print": { 27 | "@media (orientation: portrait)": { 28 | "@media (any-pointer: fine)": { 29 | ":is([dir="rtl"] &):valid::before": { 30 | content: "var(--tw-content)", 31 | marginTop: "1.25rem", 32 | }, 33 | }, 34 | }, 35 | }, 36 | }, 37 | }, 38 | }, 39 | })"##### ; "1")] 40 | fn test(input: &str, output: &str) { 41 | snapshot_inner(input, output) 42 | } 43 | -------------------------------------------------------------------------------- /src/snapshot/visited_opacity_visited_opacity.rs: -------------------------------------------------------------------------------- 1 | use crate::test::snapshot_inner; 2 | use test_case::test_case; 3 | #[test_case(r#####"tw`visited:border-red-500 visited:bg-red-500 visited:text-red-500`"#####, r#####"({ 4 | ":visited": { 5 | borderColor: "rgb(239 68 68 )", 6 | backgroundColor: "rgb(239 68 68 )", 7 | color: "rgb(239 68 68 )", 8 | }, 9 | }) 10 | ;"##### ; "0")] 11 | #[test_case(r#####"tw`visited:border-red-500/20 visited:bg-red-500/20 visited:text-red-500/20`"#####, r#####"({ 12 | ":visited": { 13 | borderColor: "rgb(239 68 68 / 0.2)", 14 | backgroundColor: "rgb(239 68 68 / 0.2)", 15 | color: "rgb(239 68 68 / 0.2)", 16 | }, 17 | }) 18 | ;"##### ; "1")] 19 | #[test_case(r#####"tw`visited:border-red-500/[20] visited:bg-red-500/[20] visited:text-red-500/[20]`"#####, r#####"({ 20 | ":visited": { 21 | borderColor: "rgb(239 68 68 / 20)", 22 | backgroundColor: "rgb(239 68 68 / 20)", 23 | color: "rgb(239 68 68 / 20)", 24 | }, 25 | }) 26 | ;"##### ; "2")] 27 | #[test_case(r#####"tw`visited:(border-red-500) visited:(bg-red-500) visited:(text-red-500)`"#####, r#####"({ 28 | ":visited": { 29 | borderColor: "rgb(239 68 68 )", 30 | backgroundColor: "rgb(239 68 68 )", 31 | color: "rgb(239 68 68 )", 32 | }, 33 | })"##### ; "3")] 34 | fn test(input: &str, output: &str) { 35 | snapshot_inner(input, output) 36 | } 37 | -------------------------------------------------------------------------------- /stailwc.d.ts: -------------------------------------------------------------------------------- 1 | import type { CSSInterpolation } from '@emotion/serialize' 2 | 3 | export type TemplateFn = ( 4 | strings: Readonly, 5 | ...values: readonly string[] 6 | ) => R 7 | 8 | export type TwFn = TemplateFn 9 | 10 | export type TwComponentMap = { 11 | [K in keyof JSX.IntrinsicElements]: TemplateFn> 12 | } 13 | 14 | export type TwComponent = ( 15 | props: JSX.IntrinsicElements[K] 16 | ) => JSX.Element 17 | 18 | type TwComponentWrapper = >( 19 | component: T 20 | ) => TemplateFn 21 | 22 | declare module 'react' { 23 | interface DOMAttributes { 24 | tw?: string 25 | css?: CSSInterpolation 26 | } 27 | } 28 | 29 | declare global { 30 | const tw: TwFn & TwComponentMap & TwComponentWrapper 31 | 32 | namespace JSX { 33 | interface IntrinsicAttributes extends React.Attributes { 34 | tw?: string 35 | } 36 | } 37 | } 38 | --------------------------------------------------------------------------------