filter out css-loader ":export"

[gsouf]

Hi,

I found that this sass-to-string module wouldn't play well with :export feature from css-loader and everything found into a :export block would be included in the final string.

For example if you have the following sass file variables.scss:

$some-variable: 1px;

:export {
  some-variable: $some-variable;
}

and in your styles.scss file you import it:

@import 'variables.scss';

.my-style {
  padding: $some-variable;
}

when you import this file here is what you would get:

:export {
  some-variable: $some-variable;
}

.my-style {
  padding: 1px;
}

---

Here is the question: is there any way to filter out this undesired :export block, other than using some kind of string manipulation at runtime, and other than modifying css file themselve?

[m4thieulavoie]

@gsouf sorry for the massive delay, this slipped out of my notifications. I wonder if sass supports trimming those down. I'll try to look into it in the next couple of weeks, but I'm afraid you probably either hacked a fix or found an other alternative at this point. Thanks for the report still!

[gsouf]

@m4thieulavoie no worries for late answers, that's free open source!

I just tried what sass does using sass cli with the following file:

// test.scss

.foo {
    .bar {
        color: red;
    }
}

:export {
    color: blue;
}

It's not stripping out

$ sass test.scss 

.foo .bar {
  color: red;
}

:export {
  color: blue;
}

That feels logical as a in a regular workflow this is handled by css module (that comes after sass in the pipeline).

I wonder if we could add an option so that we can get it to strip these things that are irrelevant in regular css. I understand that sass-to-string is not designed to run with css modules and that it might add complexity to this project, but at the same time css modules are a rather popular option.

---

Just so you know - The :export block will follow sass imports, if it lives in your variables files then it becomes a problem, for example when you do @import variables.scss at the begining of a file.

I fixed it in my project by changing the structure of my css files. But it's less than optimal as future developers might change it without really figuring out.

[m4thieulavoie]

Yeah that's fair, thanks for the deep-dive! IIRC sass-to-string doesn't do anything really fancy with the SASS code (it instead relies on SASS). I think it'd be nice indeed to have an option for it, I'll dig into it! Thanks again

[gsouf]

@m4thieulavoie thanks, I can also take a look if I manage to find the time!