tailwindcss-theme-variants - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

dist/src/index.d.ts

@@ -5,3 +5,3 @@ import { ThisPlugin } from "./types";
 export default thisPlugin;
-export { active, disabled, even, first, focus, focusWithin, hover, last, odd, visited, groupActive, groupFocus, groupFocusWithin, groupHover, } from "./variants";
-export { prefersAnyScheme, prefersDark, prefersLight, prefersAnyMotion, prefersReducedMotion, prefersAnyTransparency, prefersReducedTransparency, prefersAnyContrast, prefersHighContrast, prefersLowContrast, } from "./media-queries";
+export * from "./media-queries";
+export * from "./variants";

dist/src/index.js

 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -8,2 +18,3 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 const plugin_1 = __importDefault(require("tailwindcss/plugin"));
+const selectors_1 = require("./selectors");
 const nameVariant = (renamedTheme, variantName) => {
@@ -15,3 +26,3 @@ if (variantName === "") {
 };
-const thisPlugin = plugin_1.default.withOptions(({ themes, baseSelector = ":root", fallback = false, rename = (themeName) => themeName, variants = {}, }) => ({ addVariant, e, postcss, }) => {
+const thisPlugin = plugin_1.default.withOptions(({ themes, baseSelector, fallback = false, rename = (themeName) => themeName, variants = {}, }) => ({ addVariant, e, postcss, }) => {
     const allThemes = Object.entries(themes);
@@ -32,3 +43,9 @@ if (allThemes.length === 0) {
     }
-    // Use a dummy default variant first
+    if (baseSelector === undefined) {
+        // Implicitly disable `baseSelector` on behalf of the person only using media queries to set their themes
+        // Otherwise use :root as the default `baseSelector`
+        // eslint-disable-next-line no-param-reassign
+        baseSelector = allThemes.some(([_name, { selector }]) => selector) ? ":root" : "";
+    }
+    // Use a normal default variant first
     Object.entries({ "": (selector) => selector, ...variants }).forEach(([variantName, variantFunction]) => {
@@ -47,3 +64,3 @@ allThemes.forEach(([themeName, { mediaQuery, selector }]) => {
                         const inactiveThemes = selector ? allThemes.map(([_themeName, { selector: otherSelector }]) => ((selector === otherSelector) ? "" : `:not(${otherSelector})`)) : [];
-                        rule.selector = `${baseSelector}${inactiveThemes.join("")} ${namedSelector}`;
+                        rule.selector = selectors_1.addParent(namedSelector, `${baseSelector}${inactiveThemes.join("")}`);
                     });
@@ -60,3 +77,3 @@ container.append(containerFallBack);
                             const inactiveThemes = selector ? allThemes.map(([_themeName, { selector: otherSelector }]) => ((selector === otherSelector) ? "" : `:not(${otherSelector})`)) : [];
-                            rule.selector = `${baseSelector}${inactiveThemes.join("")} ${namedSelector}`;
+                            rule.selector = selectors_1.addParent(namedSelector, `${baseSelector}${inactiveThemes.join("")}`);
                         }
@@ -77,3 +94,3 @@ else {
                         const activator = `${baseSelector}${selector}`;
-                        rule.selector = `${activator} ${namedSelector}`;
+                        rule.selector = selectors_1.addParent(namedSelector, activator);
                     });
@@ -88,27 +105,3 @@ container.append(normalScreenContainer);
 exports.default = thisPlugin;
-var variants_1 = require("./variants");
-Object.defineProperty(exports, "active", { enumerable: true, get: function () { return variants_1.active; } });
-Object.defineProperty(exports, "disabled", { enumerable: true, get: function () { return variants_1.disabled; } });
-Object.defineProperty(exports, "even", { enumerable: true, get: function () { return variants_1.even; } });
-Object.defineProperty(exports, "first", { enumerable: true, get: function () { return variants_1.first; } });
-Object.defineProperty(exports, "focus", { enumerable: true, get: function () { return variants_1.focus; } });
-Object.defineProperty(exports, "focusWithin", { enumerable: true, get: function () { return variants_1.focusWithin; } });
-Object.defineProperty(exports, "hover", { enumerable: true, get: function () { return variants_1.hover; } });
-Object.defineProperty(exports, "last", { enumerable: true, get: function () { return variants_1.last; } });
-Object.defineProperty(exports, "odd", { enumerable: true, get: function () { return variants_1.odd; } });
-Object.defineProperty(exports, "visited", { enumerable: true, get: function () { return variants_1.visited; } });
-Object.defineProperty(exports, "groupActive", { enumerable: true, get: function () { return variants_1.groupActive; } });
-Object.defineProperty(exports, "groupFocus", { enumerable: true, get: function () { return variants_1.groupFocus; } });
-Object.defineProperty(exports, "groupFocusWithin", { enumerable: true, get: function () { return variants_1.groupFocusWithin; } });
-Object.defineProperty(exports, "groupHover", { enumerable: true, get: function () { return variants_1.groupHover; } });
-var media_queries_1 = require("./media-queries");
-Object.defineProperty(exports, "prefersAnyScheme", { enumerable: true, get: function () { return media_queries_1.prefersAnyScheme; } });
-Object.defineProperty(exports, "prefersDark", { enumerable: true, get: function () { return media_queries_1.prefersDark; } });
-Object.defineProperty(exports, "prefersLight", { enumerable: true, get: function () { return media_queries_1.prefersLight; } });
-Object.defineProperty(exports, "prefersAnyMotion", { enumerable: true, get: function () { return media_queries_1.prefersAnyMotion; } });
-Object.defineProperty(exports, "prefersReducedMotion", { enumerable: true, get: function () { return media_queries_1.prefersReducedMotion; } });
-Object.defineProperty(exports, "prefersAnyTransparency", { enumerable: true, get: function () { return media_queries_1.prefersAnyTransparency; } });
-Object.defineProperty(exports, "prefersReducedTransparency", { enumerable: true, get: function () { return media_queries_1.prefersReducedTransparency; } });
-Object.defineProperty(exports, "prefersAnyContrast", { enumerable: true, get: function () { return media_queries_1.prefersAnyContrast; } });
-Object.defineProperty(exports, "prefersHighContrast", { enumerable: true, get: function () { return media_queries_1.prefersHighContrast; } });
-Object.defineProperty(exports, "prefersLowContrast", { enumerable: true, get: function () { return media_queries_1.prefersLowContrast; } });
+__exportStar(require("./media-queries"), exports);
+__exportStar(require("./variants"), exports);

dist/src/selectors.d.ts

@@ -5,1 +5,2 @@ import { Node, Root } from "postcss-selector-parser";
 export declare const distill: (selectors: string[]) => [string, string[]];
+export declare const addParent: (selector: string, parent: string) => string;

dist/src/selectors.js

@@ -6,3 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.distill = exports.unparse = exports.parse = void 0;
+exports.addParent = exports.distill = exports.unparse = exports.parse = void 0;
 const lodash_1 = require("lodash");
@@ -46,1 +46,9 @@ const postcss_selector_parser_1 = __importDefault(require("postcss-selector-parser"));
 };
+exports.addParent = (selector, parent) => {
+    if (!parent)
+        return selector;
+    const parsedSelector = exports.parse(selector);
+    const parts = parsedSelector.split((node) => node.type === "selector" || node.type === "combinator");
+    const unparsedParts = parts.map((part) => exports.unparse(part[0])).flat();
+    return unparsedParts.map((part) => `${parent} ${part.trim()}`).join(", ");
+};

dist/src/types.d.ts

@@ -18,10 +18,14 @@ import { AcceptedPlugin, AtRule, AtRuleNewProps, CommentNewProps, Container, Declaration, DeclarationNewProps, Parser, PluginInitializer, Processor, Stringifier, Root, Rule, RuleNewProps } from "postcss";
 }
-export interface AddComponentsOptions {
+export interface AddComponentsOptionsObject {
     respectPrefix?: boolean;
+    variants?: VariantsValue;
 }
-export interface AddUtilitiesOptions {
+export declare type AddComponentsOptions = AddComponentsOptionsObject | VariantsValue;
+export declare type VariantsValue = VariantsObject[keyof VariantsObject];
+export interface AddUtilitiesOptionsObject {
     respectPrefix?: boolean;
     respectImportant?: boolean;
-    variants?: VariantsObject[keyof VariantsObject];
+    variants?: VariantsValue;
 }
+export declare type AddUtilitiesOptions = AddUtilitiesOptionsObject | VariantsValue;
 export interface ModifySelectorsOptions {
@@ -28,0 +32,0 @@ className: string;

dist/src/variants.d.ts

 export declare const active: (selector: string) => string;
+export declare const after: (selector: string) => string;
+export declare const before: (selector: string) => string;
+export declare const checked: (selector: string) => string;
 export declare const disabled: (selector: string) => string;
+export declare const enabled: (selector: string) => string;
 export declare const even: (selector: string) => string;
 export declare const first: (selector: string) => string;
 export declare const focus: (selector: string) => string;
+export declare const focusVisible: (selector: string) => string;
 export declare const focusWithin: (selector: string) => string;
 export declare const hover: (selector: string) => string;
+export declare const indeterminate: (selector: string) => string;
+export declare const invalid: (selector: string) => string;
 export declare const last: (selector: string) => string;
 export declare const odd: (selector: string) => string;
+export declare const optional: (selector: string) => string;
+export declare const placeholder: (selector: string) => string;
+export declare const readOnly: (selector: string) => string;
+export declare const readWrite: (selector: string) => string;
+export declare const required: (selector: string) => string;
+export declare const selection: (selector: string) => string;
+export declare const target: (selector: string) => string;
+export declare const valid: (selector: string) => string;
 export declare const visited: (selector: string) => string;
@@ -15,1 +30,3 @@ export declare const groupActive: (selector: string) => string;
 export declare const groupHover: (selector: string) => string;
+export declare const groupInvalid: (selector: string) => string;
+export declare const groupValid: (selector: string) => string;

dist/src/variants.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.groupHover = exports.groupFocusWithin = exports.groupFocus = exports.groupActive = exports.visited = exports.odd = exports.last = exports.hover = exports.focusWithin = exports.focus = exports.first = exports.even = exports.disabled = exports.active = void 0;
+exports.groupValid = exports.groupInvalid = exports.groupHover = exports.groupFocusWithin = exports.groupFocus = exports.groupActive = exports.visited = exports.valid = exports.target = exports.selection = exports.required = exports.readWrite = exports.readOnly = exports.placeholder = exports.optional = exports.odd = exports.last = exports.invalid = exports.indeterminate = exports.hover = exports.focusWithin = exports.focusVisible = exports.focus = exports.first = exports.even = exports.enabled = exports.disabled = exports.checked = exports.before = exports.after = exports.active = void 0;
 exports.active = (selector) => `${selector}:active`;
+exports.after = (selector) => `${selector}::after`;
+exports.before = (selector) => `${selector}::before`;
+exports.checked = (selector) => `${selector}:checked`;
 exports.disabled = (selector) => `${selector}:disabled`;
+exports.enabled = (selector) => `${selector}:enabled`;
 exports.even = (selector) => `${selector}:nth-child(even)`;
 exports.first = (selector) => `${selector}:first-child`;
 exports.focus = (selector) => `${selector}:focus`;
+exports.focusVisible = (selector) => `${selector}:focus-visible`;
 exports.focusWithin = (selector) => `${selector}:focus-within`;
 exports.hover = (selector) => `${selector}:hover`;
+exports.indeterminate = (selector) => `${selector}:indeterminate`;
+exports.invalid = (selector) => `${selector}:invalid`;
 exports.last = (selector) => `${selector}:last-child`;
 exports.odd = (selector) => `${selector}:nth-child(odd)`;
+exports.optional = (selector) => `${selector}:optional`;
+exports.placeholder = (selector) => `${selector}::placeholder`;
+exports.readOnly = (selector) => `${selector}:read-only`;
+exports.readWrite = (selector) => `${selector}:read-write`;
+exports.required = (selector) => `${selector}:required`;
+exports.selection = (selector) => `${selector}::selection, ${selector} ::selection`;
+exports.target = (selector) => `${selector}:target`;
+exports.valid = (selector) => `${selector}:valid`;
 exports.visited = (selector) => `${selector}:visited`;
@@ -19,1 +34,3 @@ exports.groupActive = (selector) => `.group:active ${selector}`;
 exports.groupHover = (selector) => `.group:hover ${selector}`;
+exports.groupInvalid = (selector) => `.group:invalid ${selector}`;
+exports.groupValid = (selector) => `.group:valid ${selector}`;

package.json

 {
 	"name": "tailwindcss-theme-variants",
-	"version": "0.2.1",
+	"version": "0.3.0",
 	"description": "JavaScript- or media-query-based theme variants with fallback for Tailwind CSS",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

32506

increased by2.41%

Lines of code

365

increased by13%

No dependency changes