mizdra / happy-css-modules

Typed, definition jumpable CSS Modules. Moreover, easy!
MIT License
213 stars 5 forks source link

Support for `@value` #213

Closed mizdra closed 2 weeks ago

mizdra commented 11 months ago

close: #212 depends: #265

Example

Basic

Input (1.css):

.basic {
}
@value value: #BF4040;

Generated (1.css.d.ts):

declare const styles:
  & Readonly<{ "basic": string }>
  & Readonly<{ "value": string }>
;
export default styles;
//# sourceMappingURL=./1.css.d.ts.map

Import values from other modules

Input (1.css):

@value value1 from './2.css'; /* single token */
@value value2, value3 from './2.css'; /* multiple tokens */
@value value4 as alias from './2.css'; /* alias */
@value value5 from './2.css'; /* re-exported token */

Input (2.css):

@value value1: '';
@value value2: '';
@value value3: '';
@value value4: '';
@value value5 from './3.css';

Input (3.css):

@value value5: '';

Generated (1.css.d.ts):

declare const styles:
  & Readonly<Pick<(typeof import("./2.css"))["default"], "value1">>
  & Readonly<Pick<(typeof import("./2.css"))["default"], "value2">>
  & Readonly<Pick<(typeof import("./2.css"))["default"], "value3">>
  & Readonly<{ "alias": (typeof import("./2.css"))["default"]["value4"] }>
  & Readonly<Pick<(typeof import("./3.css"))["default"], "value5">>
;
export default styles;
//# sourceMappingURL=./1.css.d.ts.map

Definition jumps are also fully supported.

https://github.com/mizdra/happy-css-modules/assets/9639995/ef6da268-53e6-4f42-8536-6c29902a7dce

mizdra commented 2 weeks ago

It is finally completed!