🐞 `@master/css` - error while trying to import esm, starting with `2.0.0-beta.120`

icflorescu commented 1 year ago

Description

Trying to:

import { renderIntoHTML } from '@master/css';

in a Svelte hooks.server.js file results in an error.

This gets logged in the console:

[vite] Error when evaluating SSR module /src/hooks.server.js: failed to import "@master/css"

And this in the browser:

/home/ionut/Work/master-test/node_modules/@master/css/dist/esm/index.js:1
export*from"./css.js";export*from"./rule.js";export*from"./theme.js";import{MasterCSS as E}from"./css.js";function a(t){let e=typeof Buffer<"u"?Buffer:null;return!!(e&&t instanceof e||t instanceof Date||t instanceof RegExp)}function l(t){if(typeof Buffer<"u"&&Buffer&&t instanceof Buffer){let e=Buffer.alloc(t.length);return t.copy(e),e}else{if(t instanceof Date)return new Date(t.getTime());if(t instanceof RegExp)return new RegExp(t);throw new Error("Unexpected situation")}}function c(t){let e=[];return t.forEach(function(r,n){typeof r=="object"&&r!==null?Array.isArray(r)?e[n]=c(r):a(r)?e[n]=l(r):e[n]=u({},r):e[n]=r}),e}function i(t,e){return e==="__proto__"?void 0:t[e]}function u(...t){let e={},r,n;return t.forEach(function(o){typeof o!="object"||o===null||Array.isArray(o)||Object.keys(o).forEach(function(f){if(n=i(e,f),r=i(o,f),r!==e)if(typeof r!="object"||r===null){e[f]=r;return}else if(Array.isArray(r)){e[f]=c(r);return}else if(a(r)){e[f]=l(r);return}else if(typeof n!="object"||n===null||Array.isArray(n)){e[f]=u({},r);return}else{e[f]=u(n,r);return}})}),e}export*from"./methods/index.js";export*from"./config/index.js";export{E as default,u as extend};
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

I was persistent enough to try it with different @master/css versions and managed to determine that 2.0.0-beta.119 works fine and the error happens starting with beta > 120 (including the latest 127).

Most likely something changed in the building workflow at that point in time.

Reproduction

Clone this example:

npx degit master-co/css/examples/svelte-with-progressive-rendering svelte-master

Make sure the deps, including latest @master/css beta are correctly installed:
```
cd svelte-master
npm i -D @master/css@beta
```
Run the app:
```
npm run dev
```
Open it in the browser and see the error.
Now switch to @master/css@beta.119:
```
npm i -D @master/css@2.0.0-beta.119
```
Open it in the browser and see that it's working correctly.

Thank you for creating @master/css 🙏 I can't wait to give it a try with SvelteKit :-)

System Informations

This should be irrelevant:

Browser: Brave/Chromium 111 OS: Arch/Manjaro Linux 22 Node.js: 18.15.0 Package Manager: npm 9.6.2

1aron commented 1 year ago

@icflorescu This is most likely because we're now testing in a monorepo-dependent environment; I'll try to troubleshoot this issue and release a new version as soon as possible within 24h.

We already have a complete process for the Svelte example, but the official guide has not been completed yet, so stay tuned.

1aron commented 1 year ago

@icflorescu You can first try adding "type":"module" to package.json to see if it works. https://github.com/master-co/css/blob/beta/examples/svelte-with-progressive-rendering/package.json#L24

icflorescu commented 1 year ago

My package.json already has "type": "module", as SvelteKit only works with esm.

As stated in the reproduction steps above, I actually copied the svelte-with-progressive-rendering example you mentioned. I realized the official guide was a bit outdated, that's why I went straight to the example in the repo.

I'll stick with 2.0.0-beta.119 for the moment.

Thanks for looking into it. I'll keep an eye on the progress.

As I already mentioned, I think you're doing an awesome job with Master CSS 👍 I'm an old-timer and the author of a few open-source projects myself (including Mantine DataTable and tRPC-SvelteKit), but to be honest I couldn't connect to the latest TailwindCSS hype, mostly due to the fact building useful UI libraries without making use of dynamic styles is very difficult.

The way I see things, Master CSS will be able to change that, due to its fast JIT/Progressive/Hybrid rendering; that's why it caught my attention. So, keep up the good work! 😁

github-actions[bot] commented 1 year ago

⚠️ This version still has issues, please wait for the next version @master/css@beta.129

:tada: This issue has been resolved in version 2.0.0-beta.128 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

1aron commented 1 year ago

@icflorescu Sorry; I'm in a daze and didn't notice you were using the official example. 😅

It feels like you're an experienced player, and your reproduction can almost be used as a quick start section of our official guide. 😍

Errors in the last few versions may be related to the tree-shakable package I improved a while ago, and I finally fixed it after a whole night of tossing.

npm i @master/css@beta again → https://github.com/master-co/css/releases/tag/v2.0.0-beta.129

icflorescu commented 1 year ago

That was quick!

github-actions[bot] commented 7 months ago

:tada: This issue has been resolved in version 2.0.0-rc.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

master-co / css