Skip to content
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.

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

Question: Usage for generating types for variables (e.g. a "variables.scss") #216

Open
fullyherge opened this issue Nov 28, 2023 · 6 comments
Labels
enhancement New feature or request question Further information is requested

Comments

@fullyherge
Copy link

We have a maybe irrelevant for this package use case in which we mostly want to generate type definitions for our variables.

For example we would like this .scss:

$screen-size-keys: ("xxs", "xs", "sm", "md", "lg", "xl", "xxl");
$screen-size-map: (
  "xxs": 280px,
  "xs": 320px,
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px,
  "xxl": 1400px,
);

to generate something like this .d.ts

type ScreenSizeKeys = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
type ScreenSizeMap = {
  [key: string]: string // or if I may dream ` { [key in ScreenSizeKeys]: string } `
};

Is this completely out of the scope of this package? If no, how would I accomplish this? If yes, does anyone know any library for doing something like this?

@mcgrealife
Copy link

+1 have you found anything yet @fullyherge?

@fullyherge
Copy link
Author

+1 have you found anything yet @fullyherge?

Sadly no. We worked around it for now.

@skovy
Copy link
Owner

skovy commented Jan 9, 2024

This package primarily focuses on supporting CSS Modules which primarily considers CSS classes as the public API. Since these aren't exported producing types outside of this is out of scope. If this is a common enough pattern I could see a reason to include it.

If we were to consider supporting it, I'd probably prefer still relying on "CSS Modules Public API", which includes the :export token. I've not explicitly tested it, but in theory it could already be supported via :export since postcss-modules links to the CSS Modules repo which defines this token. If not, I'd be open to making :export work as a way to make something like this work potentially?

@fullyherge
Copy link
Author

fullyherge commented Jan 9, 2024

Makes sense!
Using :export for this sounds very reasonable to me. It's our primary use-case for getting the variables into the JS context anyhow.

As it works now, though it doesn't seem well supported, for example:

$shades: ("light", "dark");
:export {
  shades: $shades;
}

Generates

export declare const shades: string;

I assume the issue here is that :export always requires a stringified version of the variables being exported.

@skovy
Copy link
Owner

skovy commented Jan 9, 2024

You're saying it's outputting string instead of a union of the two specific strings? I think we can add logic to try to make this more strict for this case and fallback to string

@fullyherge
Copy link
Author

Yeah exactly

@skovy skovy added enhancement New feature or request question Further information is requested labels Jan 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request question Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants