How to deal with SCSS syntax ?

[webmasterpf]

Hello,

I use webpack encore and postcss to compile my scss code ( tailwind and custom) but I get this kind of errors:

) postcss-import: /home/www/pfdev/multid9/recommended-project/web/themes/custom/starter-d9-2022/style/scss/src/global/_mixins-custom.scss Unknown word

  545 | /* https://codepen.io/skeate/pen/YPyqWd */
  546 | @mixin textedansformeronde($radius) {
> 547 |   min-width: #{$radius}vw;

How can I fix it ? Thanks

[RyanZim]

You'll need to use the https://github.com/postcss/postcss-scss parser.

[webmasterpf]

Ok, thanks, so I could use my scss functions ? And , as I will use it with tailwind, I guess there is an order to put in config file, like , not ? :

module.exports = {
syntax: 'postcss-scss',
  plugins: {
    'postcss-import': {},// postcss-import needs to be first
    'tailwindcss/nesting': 'postcss-nesting',
    'postcss-cssnext' : {},
    tailwindcss: {},

[RyanZim]

I think that will work, though I'm not super familiar with tailwind.

[webmasterpf]

So, I done modifications and get this error:

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
RangeError: Maximum call stack size exceeded

So I guess it's a syntax error... here: style/scss/src/global/_mixins-custom.scss:478:3 Because when I disable this file from compilation, all work as designed.

[webmasterpf]

I would test with another usecase. So do I need to modify this kind of code ?

$typedecontenu: type-page-bts, type-TDC;
$zones: zone-1, zone-2, zone-3;
@each $zone in $zones {
  @each $type in $typedecontenu {
    ##{$zone}.#{$type} {

    p,ul,li{
        @include font-size(m);//utilisation de typey
        padding: em(5px);
        line-height: 1.5em;
        list-style-position: inside;
    }
    h2{
        @include font-size(l);//utilisation de typey
        color: $orange-fonce;
    }

Usually; I add &to lines like & h2 . Thanks for advice.

EDIT: code isn't compiled, but no error on webpack, semi success :)

$typedecontenu: type-page-bts, type-TDC;
$zones: zone-1, zone-2, zone-3;
@each $zone in $zones {
  @each $type in $typedecontenu {
    ##{$zone}.#{$type} {

    p,ul,li {
        list-style-position: inside;
      }

    p,ul,li {
        padding: 0.25rem;
      }

    p,ul,li {
        font-size: 1rem;
        line-height: 1.5rem;
      }

[RyanZim]

postcss cannot compile scss, it's is simply capable of parsing it. You'll need to use some other webpack loader to actually compile scss.

[webmasterpf]

sass is compiled actually, but sass function aren't. Perhaps a syntax issue ? As nesting need to add & to lines. I would to know if it's a way to dig or not. And, at th eend, if I can keep my sass function or find another way.

[RyanZim]

postcss will not compile your sass functions

[webmasterpf]

So I need to look at webpack encore ? But actually it compile my sass, just not the function part. What can compile sass function in this configuration ?

[RyanZim]

I don't know the details of your setup or why your sass is being compiled. In any case, this is not a bug with postcss-import.

[webmasterpf]

Hello, it seem I need more plugin to compile sass and scss files. Do I need to add this one to my setup ? https://github.com/csstools/postcss-sass

[RyanZim]

That might work, but again, this is outside my area of expertise, and unrelated to postcss-import.