@windijs/variants
Version:
@windijs/variants
259 lines (252 loc) • 9.59 kB
JavaScript
import { createVariant, createMedia } from '@windijs/core';
import { camelToDash } from '@windijs/shared';
/**
* Same as :nth-child(1). Represents an element that is the first child of some other element.
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/:first-child)
*/
const first = createVariant("&:first-child");
/**
* Same as :nth-last-child(1). Represents an element that is the last child of some other element.
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/:last-child)
*/
const last = createVariant("&:last-child");
/**
* Same as :nth-of-type(even)
*
* [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type)
*/
const evenOfType = createVariant("&:nth-of-type(even)");
/**
* Same as :nth-of-type(odd)
*
* [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type)
*/
const oddOfType = createVariant("&:nth-of-type(odd)");
/**
* Applies to the one or more UI elements that are the default among a set of similar elements. Typically applies to context menu items, buttons, and select lists/menus.
*
* (Edge 79, Firefox 4, Safari 5, Chrome 10, Opera 10)
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/:default)
*/
const $default = createVariant("&:default");
/**
* Same as :not(:first-child).
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/:first-child)
*/
const notFirst = createVariant("&:not(:first-child)");
/**
* Same as :not(:last-child).
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/:last-child)
*/
const notLast = createVariant("&:not(:last-child)");
/**
* Same as :nth-child(odd), Represents the odd elements of its parent.
*
* [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child)
*/
const odd = createVariant("&:nth-child(odd)");
/**
* Same as :nth-child(even), Represents the even elements of its parent.
*
* [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child)
*/
const even = createVariant("&:nth-child(even)");
const { visited, checked, disabled, focusWithin, hover, focus, focusVisible, active, link, target, notChecked, enabled, indeterminate, invalid, valid, optional, required, placeholderShown, readOnly, readWrite, notDisabled, firstOfType, notFirstOfType, lastOfType, notLastOfType, onlyChild, notOnlyChild, onlyOfType, notOnlyOfType, root, empty, } = new Proxy({}, {
get(_, p) {
p = camelToDash(p);
if (p.startsWith("not-"))
p = `not(:${p.slice(4)})`;
return createVariant("&:" + p);
},
});
/**
* Represents a styleable child pseudo-element immediately after the originating element’s actual content.
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/::after)
*/
const after = createVariant("&::after");
/**
* Used to create a backdrop that hides the underlying document for an element in a top layer (such as an element that is displayed fullscreen).
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/::backdrop)
*/
// export const backdrop = createVariant("&::backdrop");
/**
* Represents a styleable child pseudo-element immediately before the originating element’s actual content.
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/::before)
*/
const before = createVariant("&::before");
/**
* Represents the first letter of an element, if it is not preceded by any other content (such as images or inline tables) on its line.
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/::first-letter)
*/
const firstLetter = createVariant("&::first-letter");
/**
* Describes the contents of the first formatted line of its originating element.
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/::first-line)
*/
const firstLine = createVariant("&::first-line");
/**
* The ::marker CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item, such as the \<li> and \<summary> elements.
*
* (Edge 86, Firefox 68, Safari 11.1, Chrome 86, Opera 72)
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/::marker)
*/
const marker = createVariant("& *::marker, &::marker");
/**
* Represents the portion of a document that has been highlighted by the user.
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/::selection)
*/
const selection = createVariant("& *::selection, &::selection");
/**
* Targets an element when a marked parent matches the hover pseudo-class.
*/
const groupHover = createVariant(".group:hover &");
/**
* Targets an element when a marked parent matches the focus pseudo-class.
*/
const groupFocus = createVariant(".group:focus &");
/**
* Targets an element when a marked parent matches the active pseudo-class.
*/
const groupActive = createVariant(".group:active &");
/**
* Targets an element when a marked parent matches the visited pseudo-class.
*/
const groupVisited = createVariant(".group:visited &");
/**
* Targets svg nodes.
*/
const svg = createVariant("& svg");
/**
* Target all nodes.
*/
const all = createVariant("& *");
/**
* Targets children nodes.
*/
const children = createVariant("& > *");
/**
* Targets siblings nodes.
*/
const siblings = createVariant("& ~ *");
/**
* Targets first sibling node.
*/
const sibling = createVariant("& + *");
// screens
/**
* Enable utility when the screen width is greater than 640px
*/
const sm = createMedia("(min-width: 640px)");
/**
* Enable utility when the screen width is greater than 768px
*/
const md = createMedia("(min-width: 768px)");
/**
* Enable utility when the screen width is greater than 1024px
*/
const lg = createMedia("(min-width: 1024px)");
/**
* Enable utility when the screen width is greater than 120px
*/
const xl = createMedia("(min-width: 1280x)");
/**
* Enable utility when the screen width is greater than 1536px
*/
const xxl = createMedia("(min-width: 1536px)");
/**
* Enable utility when the screen width is less than 640px
*/
const _sm = createMedia("(max-width: 640px)");
/**
* Enable utility when the screen width is less than 640px
*/
const _md = createMedia("(max-width: 768px)");
/**
* Enable utility when the screen width is less than 640px
*/
const _lg = createMedia("(max-width: 1024px)");
/**
* Enable utility when the screen width is less than 640px
*/
const _xl = createMedia("(max-width: 1280x)");
/**
* Enable utility when the screen width is less than 640px
*/
const _xxl = createMedia("(max-width: 1536px)");
/**
* Enable utility when the screen width is greater than 640px and less than 768px
*/
const $sm = createMedia("(min-width: 640px) and (max-width: 768px)");
/**
* Enable utility when the screen width is greater than 768px and less than 1024px
*/
const $md = createMedia("(min-width: 768px) and (max-width: 1024px)");
/**
* Enable utility when the screen width is greater than 1024px and less than 1280px
*/
const $lg = createMedia("(min-width: 1024px) and (max-width: 1280px)");
/**
* Enable utility when the screen width is greater than 1280px and less than 1536px
*/
const $xl = createMedia("(min-width: 1280px) and (max-width: 1536px)");
/**
* Enable utility when the screen width is greater than 1536px
*/
const $xxl = createMedia("(min-width: 1536px)");
// motions
/**
* Targets the prefers-reduced-motion: no-preference media query.
*/
const motionSafe = createMedia("(prefers-reduced-motion: no-preference)");
/**
* Targets the prefers-reduced-motion: reduce media query.
*/
const motionReduce = createMedia("(prefers-reduced-motion: reduce)");
// themes
/**
* Enable utility when the system turns on dark mode
*/
const dark = createMedia("(prefers-color-scheme: dark)");
/**
* Enable utility when the system turns on light mode
*/
const light = createMedia("(prefers-color-scheme: light)");
/**
* Enable utility base on application dark mode
*/
const $dark = createVariant(".dark &");
/**
* Enable utility base on application light mode
*/
const $light = createVariant(".light &");
// orientations
/**
* Enable utility when the device is in portrait orientation
*/
const portrait = createMedia("(orientation: portrait)");
/**
* Enable utility when the device is in landscape orientation
*/
const landscape = createMedia("(orientation: landscape)");
// directions
/**
* Enable utility when text is written from left to right.
*/
const ltr = createVariant("[dir='ltr'] &, [dir='ltr']&");
/**
* Enable utility when text is written from right to left.
*/
const rtl = createVariant("[dir='rtl'] &, [dir='rtl']&");
export { $dark, $default, $lg, $light, $md, $sm, $xl, $xxl, _lg, _md, _sm, _xl, _xxl, active, after, all, before, checked, children, dark, disabled, empty, enabled, even, evenOfType, first, firstLetter, firstLine, firstOfType, focus, focusVisible, focusWithin, groupActive, groupFocus, groupHover, groupVisited, hover, indeterminate, invalid, landscape, last, lastOfType, lg, light, link, ltr, marker, md, motionReduce, motionSafe, notChecked, notDisabled, notFirst, notFirstOfType, notLast, notLastOfType, notOnlyChild, notOnlyOfType, odd, oddOfType, onlyChild, onlyOfType, optional, placeholderShown, portrait, readOnly, readWrite, required, root, rtl, selection, sibling, siblings, sm, svg, target, valid, visited, xl, xxl };