Build time API

[mauroerta]

In this issue I described a new idea that we wanted to introduce in the morfeo's ecosystem, and we finally did it (first draft) in this PR here.

In the current version, just like I explained in the issue, the function that is used to compile the style at build time is called morfeo.parse and is exposed by the morfeo instance from @morfeo/core.

Example (current version)

import { morfeo } from "@morfeo/core";

const useStyles = morfeo.parse({
   button: {
    componentName: 'Button'
    variant: 'primary'
  }
});

const Button = (props) => {
   const classes = useStyles();
   return <button {...props} className={classes.button} />
};

Problem

The instance of morfeo though can be used not only in a web environment but also in other platforms like mobile devices with react-native. Of course, in these kinds of situations there is no need for the build time, or at least is not in the scope of this development.
Having the parse function inside the morfeo instance will also expose this method in environments where it will be completely unused and end up in confusion / additional complexity.

Solution

To remove the ambiguity the idea is to create another package that exposes only the method(s) used to compile the styles at build-time, for example:

import { compile } from "@morfeo/css";

const useStyles = compile({
   button: {
    componentName: 'Button'
    variant: 'primary'
  }
});

const Button = (props) => {
   const classes = useStyles();
   return <button {...props} className={classes.button} />
};

This is just an example

Help needed

There are only two hard things in Computer Science: cache invalidation and naming things

I think this approach is the right one, but I'm not sure about the naming, for the package I thought about these names:

• @morfeo/css
• @morfeo/compiler
• @morfeo/build-time

For the method, instead, I thought about these other names:

• compile
• parse
• css
• build
• getClasses
• compileClasses
• buildClasses

But I'm not sure about none.

Any idea or suggestion is welcome ❤️

[nirreas]

As previously mentioned, I think it makes sense to externalize the import in a different package, so import must be more explicit and this should result in less ambiguity.

For the naming, I would suggest consistent names between package and method (like I would advise against @morfeo/build-time and compile).

I would add @morfeo/build as a suggestion to consider for the package naming. It makes it clear it's build time, but it's shorter than build-time and I don't really like dashes in package names. Consistently, I would suggest buildCss as a method name.

Or, if the compile naming is preferred, @morfeo/compiler and compileCss.

I would prefer Css over Classes in the method's name just because it is shorter.