Skip to content

Feat: selector() API implement #236 #246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
github-actions merged 1 commit into from
Oct 1, 2025
Merged

Feat: selector() API implement #236 #246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .changeset/great-buckets-clean.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"@mincho-js/css": minor
---

**css**

### New
- Add `selector()` utility for computed property names
2 changes: 1 addition & 1 deletion .changeset/strong-cases-grin.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
"@mincho-js/css": patch
"@mincho-js/css": minor
---

**rules**
Expand Down
3 changes: 2 additions & 1 deletion packages/css/src/compat.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ export {
export {
globalCss as globalStyle,
css as style,
cssMultiple as styleVariants
cssMultiple as styleVariants,
selector
} from "./css/index.js";
export type { CSSRuleWith as StyleRuleWith } from "./css/types.js";

Expand Down
5 changes: 5 additions & 0 deletions packages/css/src/css/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,11 @@ function processMultiple<T>(
export function mincho$<T>(block: () => T) {
return block();
}

Copy link

Copilot AI Oct 1, 2025

Choose a reason for hiding this comment

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

The selector function lacks JSDoc documentation. Consider adding documentation to explain its purpose, expected input format, and usage example as shown in the PR description.

Suggested change
/**
* Marks a string as a selector reference for use in style definitions.
*
* @param selector - The selector string to be marked as a reference (e.g., "&:hover").
* @returns The selector string, typed as `&`, for use in style rules.
*
* @example
* ```ts
* const style = {
* [selector("&:hover")]: { color: "red" }
* };
* ```
*/

Copilot uses AI. Check for mistakes.
export function selector(selector: string): `&` {
Comment on lines +241 to +242
Copy link

Copilot AI Oct 1, 2025

Choose a reason for hiding this comment

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

The function returns a template literal type & but accepts any string. This could lead to runtime issues if the selector doesn't actually contain &. Consider adding validation or documenting that the input should contain & for proper functionality.

Suggested change
export function selector(selector: string): `&` {
/**
* Accepts a selector string that must contain '&' and returns it as a template literal type.
* Throws an error if the selector does not contain '&'.
*/
export function selector(selector: string): `&` {
if (!selector.includes('&')) {
throw new Error("Selector must contain '&'. Received: " + selector);
}

Copilot uses AI. Check for mistakes.
return selector as `&`;
}
Comment on lines +242 to +244
Copy link

@coderabbitai coderabbitai bot Oct 1, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion | 🟠 Major

Add JSDoc documentation for public API.

The selector() function is part of the public API but lacks documentation explaining its purpose, usage, and expected input format.

Add documentation like:

+/**
+ * Type utility that marks a selector string for use as a computed property name.
+ * Enables proper TypeScript inference when using selectors as object keys.
+ *
+ * @param selector - A CSS selector string (e.g., ".otherClass &", "&:hover")
+ * @returns The selector string, typed as `&` for TypeScript inference
+ *
+ * @example
+ * ```ts
+ * css({
+ *   [selector(".otherClass &")]: {
+ *     color: "red"
+ *   }
+ * });
+ * ```
+ */
 export function selector(selector: string): `&` {
   return selector as `&`;
 }
🤖 Prompt for AI Agents 
In packages/css/src/css/index.ts around lines 242 to 244, the public API
function selector lacks JSDoc; add a concise JSDoc block immediately above the
function that explains its purpose (marks a string as a nested selector
reference `&` for use in css() objects), describes the expected input format (a
selector string that contains `&`, e.g. ".otherClass &"), documents the
parameter and return type, and includes a short usage example showing css({
[selector(".otherClass &")]: { color: "red" } }); so consumers understand how to
use it.


// == Tests ====================================================================
// Ignore errors when compiling to CommonJS.
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
Expand Down
2 changes: 1 addition & 1 deletion packages/css/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export {
layer
} from "@vanilla-extract/css";

export { globalCss, css } from "./css/index.js";
export { globalCss, css, selector } from "./css/index.js";
export type { CSSRuleWith } from "./css/types.js";
export { rules } from "./rules/index.js";
export type {
Expand Down