How to compile sass loop ?

[webmasterpf]

Hello,

I've this kind of loop for my sass files (scss) and webpack encore doesn't compile them.

$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{
        @apply text-base p-1 list-inside;
    }
    & h2{
        @apply text-xl text-orange-fonce;
    }
    & h3{
        @apply text-lg text-orange-fonce;
    }
    & a{
        @apply no-underline text-orange-fonce hover:underline;
            }
  }/*  //Fin ##{$zone}.#{$type} */
} /*  // Fin @each $type */
} /* // Fin @each $zone */

the result is:

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

    ##{$zone}.#{$type} p,##{$zone}.#{$type} ul,##{$zone}.#{$type} li {
      list-style-position: inside;
      padding: 0.25rem;
      font-size: 1rem;
      line-height: 1.5rem;
    }
    ##{$zone}.#{$type} h2 {
      font-size: 1.25rem;
...

I'm using post-css, tailwind and plugins likethis: postcss config files

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

webpack config file:

 // enables Sass/SCSS support
    .enableSassLoader()

    // enables PostCSS support
    .enablePostCssLoader((options) => {
      options.postcssOptions = {
          config: './postcss.config.js',
      }
  })

What can I do more to get it compiled as the other scss code ?
Thanks

[weaverryan]

I'm not sure. With .enableSassLoader(), all files ending in .scss are sent through the sass-loader. I don't think that the final CSS from sass-loader is sent through postcss, however. Usually, you're using Sass or postcss.

Anyway, this is all the info I have - I hope it helps - but I'm not sure what the problem is.

[webmasterpf]

At my starts with tailwind and webpack, I had this advice: https://discord.com/channels/486935104384532500/1101153891619459094/1102906464907046922

But I don't know how to do this kind of thing with webpack. Have any tips about it ?

[weaverryan]

It doesn't look like I have access to that Discord or the message is missing. But sorry, I'm not sure I have any more info.

[webmasterpf]

Copy of th emessage: In your build pipeline, run sass and output to a temporary file, then run tailwind on that temporary file to generate your final CSS file (most likely through postcss)

[stof]

Can you provide a reproducer ? It might be easier to debug this.

[webmasterpf]

Hi. What is it ? My files are here: https://gitlab.com/themes-d9/starter-d9-2022.git branch: tailwindcss3-dev

[stof]

you are importing a .css file, not a .scss file. So the SassLoader does not gets applied. You are only processing things with postcss.

[webmasterpf]

you are talking about the css/src/tailwind.css file ? As it's related to tailwind, I don't know if I can to change it to scss file.

[stof]

but you cannot import your Sass files from your CSS file if you want them to be processed by the Sass loader. You need an import managed by webpack for than, not an import managed by postcss-import

[webmasterpf]

So nobody use tailwind + sass + webpack encore ? :/ The only info source I found is: https://www.yourigalescot.com/fr/blog/comment-integrer-tailwindcss-v3-a-un-projet-symfony-avec-webpack-encore

[stof]

Well, if you want to use Sass + tailwind, you have to make your entrypoint a Sass file, as you need to compile Sass before running postcss (Sass files gets processed by the stack of loaders configured for CSS files after the sass-loader itself, so postcss will run on them).

[webmasterpf]

Agree. But technically, does exist example or explanation about what to do this ? I never use webpack encore or tailwind before 3 month ago... :D

[stof]

don't import a SCSS file from a CSS file. That's the rule. If you want to use Sass, you need to make your main entrypoint a Sass file.

[webmasterpf]

ok, so I need to rewrite my scss files, then I will look if sccs and tailwind are compiled right or not, as this test say :

 error  in ./css/src/tailwind.scss                                                                                                             

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Top-level selectors may not contain the parent selector "&".
  ╷
2 │ & ul.liste-partenaires-ul {
  │ ^
  ╵
  style/scss/src/content-type/_frontpage.scss 2:1  @import
  css/src/tailwind.scss 8:9                        root stylesheet

[webmasterpf]

First test with this loop:

$typedecontenu: type-page-lycee, type-annonce-accueil, type-contenu-info-admin, type-page-erreur ;
$zones: zone-1, zone-2, zone-3, zone-4 ;
@each $zone in $zones {
  @each $type in $typedecontenu {
    ##{$zone}.#{$type} { 
    h1 {
      @apply bg-gris-clair border-dashed border-violet border-2 text-orange-fonce;
    }

    .entrefilet {
      @apply text-violet block capitalize font-bold;
      @apply lg:p-2 lg:translate-x-1 lg:m-[0.1] lg:min-w-0 lg:max-w-2xl;
    }
}}}

and compiled css give:

#zone-1.type-page-lycee #zone-1.type-page-erreur .entrefilet{
  display: block;
  font-weight: 700;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(145 19 129 / var(--tw-text-opacity));
}
@media (min-width: 1024px){
  #zone-1.type-page-lycee #zone-1.type-page-erreur .entrefilet{
    margin: 0.1;
    min-width: 0px;
    max-width: 42rem;
    --tw-translate-x: 0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var$
    padding: 0.5rem;
  }
}

the final class isn't added to the first option. Syntax error or settings error ? it has worked well when I done it with gulp.

[stof]

When I take your input and compile it with Sass (without applying tailwind after that), I don't get any selector that nest #zone-1.type-page-lycee #zone-1.type-page-erreur (and the source does not give the impression it could do it).
so this looks weird to me.

the final class isn't added to the first option

which first option are you talking about ?

[webmasterpf]

Hello,

The result would be : #zone-1.type-page-lycee .entrefilet, #zone-1.type-page-erreur .entrefilet , that's the compilation error I point, and it's the goal of the loop.

[webmasterpf]

Another example with:

[id$='-content'],
  [class$='search-results'] {
    @apply lg:col-span-10 lg:col-start-1 lg:clear-both;
    nav.pager {
        @apply clear-both ; 

which result is:

@media (min-width: 1024px){
  body.page-search-node [id$=-content],
body.page-search-node [class$=search-results]{
    grid-column: span 10 / span 10;
    grid-column-start: 1;
    clear: both;
  }
}

[webmasterpf]

Feedback. my mixin file is compiled with no warning by webpack but...the compiled code miss the mixins as it create this:

/*¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤
----- MIXINS DE STYLES PROVENCE FORMATION -----
¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤*/
/*------- Remplacement - Adaptation Mixins Compass -------*/
/* definir ici le chemin vers le dossier image */
/*---------- PIE pour CSS3 IE --------------*/
/*-------- LAYOUT CSS3 --------------*/
/*------------  TITRES ----------------*/
/*------- GESTION DU TEXTE -------------*/
/*
https://openweb.eu.org/articles/la-gestion-de-la-cesure-en-css
https://www.creativejuiz.fr/blog/css-css3/controles-fin-des-cesures-css4-text
*/
/* // ==========
 Gives backface visibility hidden to remove flickering effect on Webkit browsers
 https://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css
 ========== */
/*-------- IMAGES ADAPTABLES -----------*/
/*----------  FORMULAIRES RWD -----------*/
/*--------- MASQUAGE ELEMENTS ---------*/
/*------- EFFETS VISUELS GENERIQUES--------------*/
/* ------ ANIMATIONS CSS3 -----*/
/* https://codepen.io/skeate/pen/YPyqWd */
/*/

/*------- HACK pour Navigateurs -------------*/

and when I try to use a mixin in a scss file, I get this error:

Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
    ╷
137 │            @include rollover-effect($orange-fonce);/* //Effet rollover CSS3 sur les liens */
    │            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  style/scss/src/content-type/_contenu-entreprise.scss 137:12  @import
  css/src/tailwind.scss 17:9                                   root stylesheet

[stof]

Please provide a proper reproducer.

My guess is that once again, you are trying to use CSS and not a Sass file (and so you only process things with postcss, not with Sass)

[webmasterpf]

Files are still in the same place: #1214 (comment)
I don't use CSS files anymore. As my previous code was in sass, I try compile it with Webpack encore instead of gulp (as this one is more difficult to get working with TailwindCSS).
My postcss settings are unchanged:

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

Perhaps I need to add this one too: https://github.com/csstools/postcss-sass

[stof]

I don't see any @include in that repo or I did not find it. But I won't spend hours trying to understand the full structure of your own project to help you on my free time.
For a reproducer, the goal is generally to include the minimum amount of code allowing to reproduce the issue, so that people helping you can find easily the relevant parts.

[webmasterpf]

I understand.
What a reproducer do contain so ?
To test my mixin I done it by uncomment the line 137 , into /style/scss/src/content-type/_contenu-entreprise.scss and I get the error mentionned above.

[stof]

Well, is that mixing actually defined ? I don't see any import of a Sass file that would define it. So to me, the Sass error is legitimate.

My suggestion is that you should validate that the Sass compilation alone works (by running ./node_modules/.bin/sass <path/to/entrypoint.scss> test_output.css) instead mixing the Sass compilation being then fed into the postcss processing without knowing whether the Sass code you wrote is valid. This would make it easier for you to know whether your Sass code is valid or no (you can then also try processing this generated test_output.css with postcss to debug the next part of your pipeline to see whether postcss generates the right output). And btw, this would also allow you to identiy whether the wrong selectors mentioned before are generated by Sass or by postcss.

[webmasterpf]

The sass file that define the mixin is: style/scss/src/global/_mixins-custom.scss.
I will do what you explain and see what happen.

[stof]

@webmasterpf in https://gitlab.com/themes-d9/starter-d9-2022/-/blob/00d7cd50f1bf858d3fcd14c954ebb0dbee144ff8/css/src/tailwind.scss#L8, the import of that mixin file is commented.

[webmasterpf]

Yes. I uncomment locally as it doesn't work yet. So uncomment in tailwind.scss and idem as #1214 (comment)
So for me, it's not logical that the mixin is undefined, but logical because it's not compiled into the css.