Preprocessor variables may not be parsed inside of CSS variables

[moeenio]

Parcel's importing doesn't parse SASS variables inside of CSS variables, so the output code which should be CSS contains SASS variables. And strangely, that works, at least for me, maybe because the browser is capable of reading SASS by itself, knowing that a sourcemap is created and linked to in the output CSS, which allows the browser to access the original SCSS files.

This should be fixed though, either using the postcss workaround mentioned in the issue if we're able to set it up, or by finding another workaround. cc @Scratch-Client-4/frontend

[VFDan]

We may not be using SCSS: #1

[micahlt]

@locness3 Couldn't this effectively be solved by just not using SCSS vars in CSS vars?

[moeenio]

Well, SCSS variables are a feature we should use, but if we should not use them, well why not. And if we switch to LESS, the problem may not need solving.

[ethanhanderson]

@locness3 if we use the Vue CLI then we won't be using Parcel. An interesting side note, both Parcel and Vue's CLI use Webpack under the hood for HMR and building the files

[moeenio]

What are the advantages of vue-cli?

[ethanhanderson]

Most that you use the node-sass and sass-loader packages, with as far as I know Parcel doesn't. I could be wrong about Parcel... 😛

[micahlt]

@locness3 Since we're using LESS, should this issue be closed?

[moeenio]

We need to make sure the problem doesn't exist with LESS + parcel.

[micahlt]

@locness3 Hm... okay then. In my opinion Less/Sass vars aren't really useful for us since we're already going to use CSS3 vars to support darkmode.

[moeenio]

Well, if we don't use them (preprocessor variables) for dark/light mode, we shouldn't use them at all.

[micahlt]

We've established that preprocessor variables can't be chabged inside a browser. That's a big weakness that CSS vars fill, and I don't see why Less or Sass vars are better than CSS vars in the first place.

[moeenio]

You had used preprocessor variables along with CSS variables at first, but we'll stick with CSS vars then.

[micahlt]

All right then. If you want you can close this issue. :+1: