[bug]: Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

JagritGumber commented 1 week ago

Describe the bug

So I have been getting this error in my command line as soon as I installed fulldev-ui Error:

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api

I am having this only with the combination of postcss, if I use post css as is, I have no errors, If I use just the ui library I have no errors, I am only getting errors with the combination of using both of them

This is my postcss.config.cjs

module.exports = {
  plugin: [
    require("postcss-preset-env")({
      stage: 0,
    }),
  ],
};

Affected component/components/documentation

None

How to reproduce

Setup a basic empty astro project with the recommended settings
Use bun as package manager
install the following
```
bun install postcss postcss-preset-env
```

Setup the postcss with this config

module.exports = {
plugin: [
require("postcss-preset-env")({
  stage: 0,
}),
],
};

Install fulldev-ui and copy the header component from the building blocks

---
import Header from 'fulldev-ui/components/Header.astro'
import HtmlWrapper from "../layouts/HtmlWrapper.astro"
---
<HtmlWrapper title="Home" desc="">
<Header
heading="Some Blog by Jagrit"
links={[
    {
        text: 'Docs',
  href: '/overview/introduction/',
},
{
        text: 'Github',
  href: 'https://github.com/fulldotdev/ui',
},
]}
buttons={[
    {
        text: 'Docs',
  href: '/overview/introduction/',
},
{
        title: 'X / Twitter',
  icon: 'brand-x',
  href: 'https://x.com/silveltm',
  target: '_blank',
},
]}
frame="fill"
position="relative"
/>
</HtmlWrapper>

Logs

It's just a warning in the console in my VS Code

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api

Before submitting

[X] I've made research efforts and searched the documentation
[X] I've searched for existing issues

linear[bot] commented 1 week ago

FULL-762 [bug]: Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

silveltman commented 1 week ago

Thanks for raising the issue @JagritGumber

We got this warning recently when we we updated the dependencies in the project. We don't use any Sass api's ourselves, so this is probably something caused by how Vite works with the new version of sass.

We will look into it, but you don't have to worry about it causing problems in the meantime, just a warning.

silveltman commented 1 week ago

I've found this issue in the meantime.

We have fixed this by using this setting:

  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern',
      },
    },
  }

Only thing is that we can only do this in the astro integration. I still want everything to work fine without a need for the integration, so for now I downgraded sass to v1.78.0.

This will remove the warning and also makes the components usable without the astro integration. We plan to add more options etc via the integration, improve the documentation on it, and test/support the astro add command. When we do this and using the integration will be easier, we will bump up sass again.

fulldotdev / ui