Skip to content

feat(preset-wind4): custom property output backup#4950

Merged
zyyv merged 4 commits intomainfrom
feat-wind4-property
Oct 14, 2025
Merged

feat(preset-wind4): custom property output backup#4950
zyyv merged 4 commits intomainfrom
feat-wind4-property

Conversation

@zyyv
Copy link
Member

@zyyv zyyv commented Oct 14, 2025 •
edited
Loading

close #4941

📋 Summary

This PR adds configuration options to customize the @property CSS rules generation in the properties layer, providing users with more flexibility to control how CSS custom properties are output.

✨ What's New

Added preflights.property configuration with two customizable options:

Option Type Description
parent string | false | undefined Control the wrapper/container for property declarations. Set to false to remove wrapper entirely.
selector string | undefined Customize the target selector where properties are applied.

💡 Usage Examples

Enable with Default Configuration

presetWind4({
  preflights: {
    property: true // Default behavior
  }
})

Customize Parent and Selector

presetWind4({
  preflights: {
    property: {
      parent: '@layer properties',
      selector: ':where(*, ::before, ::after)'
    }
  }
})

Remove Parent Wrapper

presetWind4({
  preflights: {
    property: {
      parent: false // Apply directly without wrapper
    }
  }
})

Disable Property Preflight

presetWind4({
  preflights: {
    property: false
  }
})

🔄 Output Comparison

Default Output (with @supports wrapper):

@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or
  ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
  *,
  ::before,
  ::after,
  ::backdrop {
    --un-rotate: 0;
    --un-rotate-x: 0;
    --un-rotate-y: 0;
    --un-rotate-z: 0;
    --un-scale-x: 1;
    --un-scale-y: 1;
    --un-scale-z: 1;
    /* ... */
  }
}

With parent: false:

*,
::before,
::after,
::backdrop {
  --un-rotate: 0;
  --un-rotate-x: 0;
  --un-rotate-y: 0;
  --un-rotate-z: 0;
  --un-scale-x: 1;
  --un-scale-y: 1;
  --un-scale-z: 1;
  /* ... */
}

@zyyv zyyv requested a review from antfu as a code owner October 14, 2025 07:31
@netlify
Copy link

netlify bot commented Oct 14, 2025 •
edited
Loading

✅ Deploy Preview for unocss ready!

Name Link
🔨 Latest commit 9efeea6
🔍 Latest deploy log https://app.netlify.com/projects/unocss/deploys/68ee039f9c07b70008cd707b
😎 Deploy Preview https://deploy-preview-4950--unocss.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Oct 14, 2025 •
edited
Loading

Open in StackBlitz

commit: 9efeea6

@zyyv zyyv requested a review from Copilot October 14, 2025 08:12
Copilot AI reviewed Oct 14, 2025
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR introduces customizable property output configuration for the preset-wind4 package, allowing users to control how CSS custom properties are generated and wrapped. The changes replace the hardcoded property generation with a flexible configuration system.

  • Adds configurable property option to preset options with customizable parent selector and CSS selector
  • Refactors property generation from hardcoded implementation to configurable system
  • Updates test suite to remove async/await from synchronous snapshot tests

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.

Show a summary per file
File Description
packages-presets/preset-wind4/src/index.ts Adds property configuration interface and removes hardcoded preflight theme setup
packages-presets/preset-wind4/src/preflights/property.ts New configurable property preflight implementation replacing the old hardcoded version
packages-presets/preset-wind4/src/preflights/properties.ts Removes old hardcoded property preflight implementation
packages-presets/preset-wind4/src/preflights/index.ts Updates import to use new configurable property function
packages-presets/preset-wind4/src/preflights/theme.ts Moves theme configuration logic from main index file
test/preset-wind4.test.ts Removes unnecessary async/await from synchronous tests and adds test for custom property configuration
docs/presets/wind4.md Adds comprehensive documentation for the new property configuration options

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

@zyyv zyyv merged commit b108906 into main Oct 14, 2025
12 checks passed
@zyyv zyyv deleted the feat-wind4-property branch October 14, 2025 08:22
This was referenced Oct 15, 2025
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
@zyyv zyyv mentioned this pull request Oct 17, 2025
Closed
4 tasks
@chrisbbreuer chrisbbreuer mentioned this pull request Sep 5, 2025
Closed
1 task
This was referenced Oct 20, 2025
Closed
Closed
Merged
This was referenced Oct 28, 2025
Closed
Closed
This was referenced Nov 7, 2025
Merged
Closed
Closed
Closed
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@antfu antfu Awaiting requested review from antfu antfu is a code owner

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

--un-text-opacity is not defined by default -> some css boken in mode: 'shadow-dom'

2 participants

@zyyv