@just-web/css 0.1.0 → 0.2.0

package/esm/css-properties/css-properties.d.ts

@@ -0,0 +1,27 @@
+import type { Properties } from 'csstype';
+/**
+ * Extends CSS properties to include custom properties.
+ * Allows for string or number values for standard properties,
+ * and string values for custom properties with '--' prefix.
+ */
+export interface CSSProperties extends Properties<string | number> {
+    [k: `--${string}`]: string;
+}
+/**
+ * Defines CSS properties including custom properties.
+ * This function is used to properly type CSS properties when defining styles,
+ * especially when using CSS custom properties (variables).
+ *
+ * @param style - CSS properties object that can include both standard and custom properties
+ * @returns The same style object with proper typing
+ *
+ * @example
+ * ```ts
+ * defineCSSProperties({
+ *   color: 'red',
+ *   '--custom-color': '#ff0000'
+ * })
+ * ```
+ */
+export declare function defineCSSProperties(style: CSSProperties): any;
+//# sourceMappingURL=css-properties.d.ts.map

package/esm/css-properties/css-properties.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-properties.d.ts","sourceRoot":"","sources":["../../src/css-properties/css-properties.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC;IACjE,CAAC,CAAC,EAAE,KAAK,MAAM,EAAE,GAAG,MAAM,CAAA;CAC1B;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,aAAa,GACvC,GAAG,CACnB"}

package/esm/css-properties/css-properties.js

@@ -0,0 +1,20 @@
+/**
+ * Defines CSS properties including custom properties.
+ * This function is used to properly type CSS properties when defining styles,
+ * especially when using CSS custom properties (variables).
+ *
+ * @param style - CSS properties object that can include both standard and custom properties
+ * @returns The same style object with proper typing
+ *
+ * @example
+ * ```ts
+ * defineCSSProperties({
+ *   color: 'red',
+ *   '--custom-color': '#ff0000'
+ * })
+ * ```
+ */
+export function defineCSSProperties(style) {
+    return style;
+}
+//# sourceMappingURL=css-properties.js.map

package/esm/css-properties/css-properties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-properties.js","sourceRoot":"","sources":["../../src/css-properties/css-properties.ts"],"names":[],"mappings":"AAWA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAAoB;IACvD,OAAO,KAAY,CAAA;AACpB,CAAC"}

package/esm/index.d.ts

@@ -1,9 +1,10 @@
-export * from './class-name.ts';
-export * from './css-properties.ts';
-export * from './style.ts';
+export * from './css-properties/css-properties.ts';
+export * from './props/class-name.ts';
+export * from './props/style.ts';
 export * from './theme/class-name.ts';
 export * from './theme/data-attribute.ts';
 export * from './utils/attribute.ts';
 export * from './utils/data-attribute.ts';
+export * from './utils/get-css-prop-values.ts';
 export * from './utils/prefers-color-scheme.ts';
 //# sourceMappingURL=index.d.ts.map

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,iCAAiC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAA;AAClD,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA"}

package/esm/index.js

@@ -1,9 +1,10 @@
-export * from "./class-name.js";
-export * from "./css-properties.js";
-export * from "./style.js";
+export * from "./css-properties/css-properties.js";
+export * from "./props/class-name.js";
+export * from "./props/style.js";
 export * from "./theme/class-name.js";
 export * from "./theme/data-attribute.js";
 export * from "./utils/attribute.js";
 export * from "./utils/data-attribute.js";
+export * from "./utils/get-css-prop-values.js";
 export * from "./utils/prefers-color-scheme.js";
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,iCAAiC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAA;AAClD,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA"}

package/esm/props/class-name.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"class-name.d.ts","sourceRoot":"","sources":["../../src/props/class-name.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC9B"}

package/esm/props/class-name.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"class-name.js","sourceRoot":"","sources":["../../src/props/class-name.ts"],"names":[],"mappings":"AAAA;;;GAGG"}

package/esm/{style.d.ts → props/style.d.ts}

@@ -1,4 +1,4 @@
-import type { CSSProperties } from './css-properties.ts';
+import type { CSSProperties } from '../css-properties/css-properties.ts';
 /**
  * Interface for component props that include a style property.
  */

package/esm/props/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/props/style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAA;AAExE;;GAEG;AACH,MAAM,WAAW,UAAU;IAC1B,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;CACjC"}

package/esm/props/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/props/style.ts"],"names":[],"mappings":""}

package/esm/utils/get-css-prop-values.d.ts

@@ -0,0 +1,17 @@
+import type { CreateTuple } from 'type-plus';
+/**
+ * Retrieves CSS custom property values from the specified element.
+ *
+ * @param element - The HTML element to get property values from
+ * @param props - CSS custom property names to retrieve, must be in the format `--property-name`
+ * @returns Array of property values corresponding to the requested custom properties
+ */
+export declare function getCSSPropValues<Props extends Array<`--${string}`>>(element: HTMLElement, ...props: Props): CreateTuple<Props['length'], string>;
+/**
+ * Retrieves CSS custom property values from `document.body`.
+ *
+ * @param props - CSS custom property names to retrieve, must be in the format `--property-name`
+ * @returns Array of property values corresponding to the requested custom properties
+ */
+export declare function getCSSPropValues<Props extends Array<`--${string}`>>(...props: Props): CreateTuple<Props['length'], string>;
+//# sourceMappingURL=get-css-prop-values.d.ts.map

package/esm/utils/get-css-prop-values.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-css-prop-values.d.ts","sourceRoot":"","sources":["../../src/utils/get-css-prop-values.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAE5C;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,SAAS,KAAK,CAAC,KAAK,MAAM,EAAE,CAAC,EAClE,OAAO,EAAE,WAAW,EACpB,GAAG,KAAK,EAAE,KAAK,GACb,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAA;AACvC;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,SAAS,KAAK,CAAC,KAAK,MAAM,EAAE,CAAC,EAClE,GAAG,KAAK,EAAE,KAAK,GACb,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAA"}

package/esm/utils/get-css-prop-values.js

@@ -0,0 +1,8 @@
+export function getCSSPropValues(element, ...props) {
+    if (typeof element === 'string') {
+        return getCSSPropValues(globalThis.document.body, element, ...props);
+    }
+    const style = globalThis.getComputedStyle(element);
+    return props.map((v) => style.getPropertyValue(v));
+}
+//# sourceMappingURL=get-css-prop-values.js.map

package/esm/utils/get-css-prop-values.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-css-prop-values.js","sourceRoot":"","sources":["../../src/utils/get-css-prop-values.ts"],"names":[],"mappings":"AAsBA,MAAM,UAAU,gBAAgB,CAAqC,OAAgB,EAAE,GAAG,KAAY;IACrG,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QACjC,OAAO,gBAAgB,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,EAAE,OAAwB,EAAE,GAAG,KAAK,CAAC,CAAA;IACtF,CAAC;IACD,MAAM,KAAK,GAAG,UAAU,CAAC,gBAAgB,CAAC,OAAsB,CAAC,CAAA;IACjE,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAQ,CAAA;AAC1D,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@just-web/css",
-  "version": "0.1.0",
-  "description": "",
+  "version": "0.2.0",
+  "description": "CSS types and utilities",
   "type": "module",
   "exports": {
     ".": {
@@ -21,7 +21,7 @@
     "type-plus": "8.0.0-beta.7"
   },
   "devDependencies": {
-    "@repobuddy/storybook": "^0.9.1",
+    "@repobuddy/storybook": "^0.9.4",
     "@repobuddy/vitest": "^1.2.2",
     "@storybook/addon-essentials": "^8.6.12",
     "@storybook/addon-storysource": "^8.6.12",
@@ -33,6 +33,7 @@
     "@storybook/react-vite": "^8.6.12",
     "@storybook/test": "^8.6.12",
     "@storybook/theming": "^8.6.12",
+    "@tailwindcss/cli": "^4.1.6",
     "@tailwindcss/vite": "^4.1.6",
     "@vitest/browser": "^3.1.3",
     "@vitest/coverage-v8": "^3.1.3",
@@ -59,6 +60,7 @@
     "build:esm": "tsc -p tsconfig.esm.json",
     "clean": "rimraf .turbo esm *.tsbuildinfo",
     "cov": "vitest run --coverage",
+    "inspect:css": "tailwindcss -i ./src/tailwind.css -o ./styles.css",
     "nuke": "rimraf node_modules",
     "sb": "storybook dev -p 6206",
     "test": "vitest run",

package/src/css-properties/css-properties.ts

@@ -0,0 +1,30 @@
+import type { Properties } from 'csstype'
+
+/**
+ * Extends CSS properties to include custom properties.
+ * Allows for string or number values for standard properties,
+ * and string values for custom properties with '--' prefix.
+ */
+export interface CSSProperties extends Properties<string | number> {
+	[k: `--${string}`]: string
+}
+
+/**
+ * Defines CSS properties including custom properties.
+ * This function is used to properly type CSS properties when defining styles,
+ * especially when using CSS custom properties (variables).
+ *
+ * @param style - CSS properties object that can include both standard and custom properties
+ * @returns The same style object with proper typing
+ *
+ * @example
+ * ```ts
+ * defineCSSProperties({
+ *   color: 'red',
+ *   '--custom-color': '#ff0000'
+ * })
+ * ```
+ */
+export function defineCSSProperties(style: CSSProperties) {
+	return style as any
+}

package/src/index.ts

@@ -1,8 +1,9 @@
-export * from './class-name.ts'
-export * from './css-properties.ts'
-export * from './style.ts'
+export * from './css-properties/css-properties.ts'
+export * from './props/class-name.ts'
+export * from './props/style.ts'
 export * from './theme/class-name.ts'
 export * from './theme/data-attribute.ts'
 export * from './utils/attribute.ts'
 export * from './utils/data-attribute.ts'
+export * from './utils/get-css-prop-values.ts'
 export * from './utils/prefers-color-scheme.ts'

package/src/{style.ts → props/style.ts}

@@ -1,4 +1,4 @@
-import type { CSSProperties } from './css-properties.ts'
+import type { CSSProperties } from '../css-properties/css-properties.ts'
 
 /**
  * Interface for component props that include a style property.

package/src/utils/get-css-prop-values.ts

@@ -0,0 +1,29 @@
+import type { CreateTuple } from 'type-plus'
+
+/**
+ * Retrieves CSS custom property values from the specified element.
+ *
+ * @param element - The HTML element to get property values from
+ * @param props - CSS custom property names to retrieve, must be in the format `--property-name`
+ * @returns Array of property values corresponding to the requested custom properties
+ */
+export function getCSSPropValues<Props extends Array<`--${string}`>>(
+	element: HTMLElement,
+	...props: Props
+): CreateTuple<Props['length'], string>
+/**
+ * Retrieves CSS custom property values from `document.body`.
+ *
+ * @param props - CSS custom property names to retrieve, must be in the format `--property-name`
+ * @returns Array of property values corresponding to the requested custom properties
+ */
+export function getCSSPropValues<Props extends Array<`--${string}`>>(
+	...props: Props
+): CreateTuple<Props['length'], string>
+export function getCSSPropValues<Props extends Array<`--${string}`>>(element: unknown, ...props: Props) {
+	if (typeof element === 'string') {
+		return getCSSPropValues(globalThis.document.body, element as `--${string}`, ...props)
+	}
+	const style = globalThis.getComputedStyle(element as HTMLElement)
+	return props.map((v) => style.getPropertyValue(v)) as any
+}

package/esm/class-name.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"class-name.d.ts","sourceRoot":"","sources":["../src/class-name.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC9B"}

package/esm/class-name.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"class-name.js","sourceRoot":"","sources":["../src/class-name.ts"],"names":[],"mappings":"AAAA;;;GAGG"}

package/esm/css-properties.d.ts

@@ -1,10 +0,0 @@
-import type { Properties } from 'csstype';
-/**
- * Extends CSS properties to include custom properties.
- * Allows for string or number values for standard properties,
- * and string values for custom properties with '--' prefix.
- */
-export interface CSSProperties extends Properties<string | number> {
-    [k: `--${string}`]: string;
-}
-//# sourceMappingURL=css-properties.d.ts.map

package/esm/css-properties.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"css-properties.d.ts","sourceRoot":"","sources":["../src/css-properties.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC;IACjE,CAAC,CAAC,EAAE,KAAK,MAAM,EAAE,GAAG,MAAM,CAAA;CAC1B"}

package/esm/css-properties.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=css-properties.js.map

package/esm/css-properties.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"css-properties.js","sourceRoot":"","sources":["../src/css-properties.ts"],"names":[],"mappings":""}

package/esm/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAExD;;GAEG;AACH,MAAM,WAAW,UAAU;IAC1B,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;CACjC"}

package/esm/style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.js","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":""}

package/src/css-properties.ts

@@ -1,10 +0,0 @@
-import type { Properties } from 'csstype'
-
-/**
- * Extends CSS properties to include custom properties.
- * Allows for string or number values for standard properties,
- * and string values for custom properties with '--' prefix.
- */
-export interface CSSProperties extends Properties<string | number> {
-	[k: `--${string}`]: string
-}