CommonJS module

[torres-developer]

I want to create an PostCSS plugin that it's like a polyfill for new CSS functions that will help choosing the right contrast color and things like that. The problem is that I think it's only possible to create a plugin using CommonJS modules. I'm not an expert in JavaScript so I don't know if there's a workaround to transform ES6 modules to CommonJS modules. I was thinking about just copying the apca-w3.js file and just turn it into a CommonJS module but I don't know if it is possible because of the licensing. What should I do?

It possible to create an npm package that comes with the same code but in CommonJS?

Thank you!

[Myndex]

Hi @torres-developer thank you for writing.

We are working on adding build tools so various flavors will be generated.

If your plug in commercial or open source?

[torres-developer]

Hello again!

I asked for help on a place for support/discussion on PostCSS and this is the conversation.

Because he said he wouldn't recommend it I assumed I can do it anyways. I looked the source code for PostCSS and I figured out how I can create the plugin using ES6 modules.

The plugin is open source. It's still in development but I think it's working good for now. I'm trying to use this library right so I don't generate wrong results.

Looking forward to make the plugin easy to use so people can easily write CSS where you just give the background color and it automatically chooses a good contrast color for the text depending on the text size, weight and usage (fluent, sub-fluent, ...) that the designer wants the text to have.

Here is an example:

p {
    background-color: hsl(192 62% 94%);
    color: a11y-txt(hsl(192 62% 94%), 1.75em, 400);
    font-size: 1.75em;
}

The a11y-txt function needs at least 1 parameter (the background-color value). Then you also can give a font-size (default 16px), a font-weight (default 400) and a usage (default bodyText). Probably needs a better name the function. After compiling the CSS above with the plugin, the CSS becomes:

p {
    background-color: hsl(192 62% 94%);
    color: hsl(192.63157894736838 61.290322580645174% 17%);
    font-size: 1.75em;
}

Probably need too remove the decimal part of those numbers.

myndex.com/SAPC with the colors above.

The only problem is that isn't compatible for people that use CommonJS for their config but it's very easy to make it ES6.

So I don't think I need a CommonJS module of this repository anymore :P Sorry for bothering.