Support SCSS parser

[7studio]

Hi,

I'm a bit ashamed but I have to admit I have to work with Sass in my new job…

I tried to adjust my PostCSS workflow to this new team constraint with the SCSS parser for PostCSS (syntax option and postcss-scss) but I run into a problem with the postcss-import plugin. The plugin doesn't take into account this context and doesn't allow us to use specific Sass syntaxes like:

@import "foo/bar";

@import "rounded-corners", "text-shadow";

#main {
  @import "example";
}

I read the issues #345, #96, #79 and #130 but IMHO, the plugin should escape these cases without throwing warning (syntax validation) and removing/handling code (@import into declaration block) to let Sass resolves them if we use SCSS or Sass parser.

Another solution could have been to run the filter function before validating the @import syntax to escape these cases by passing a second parameter to check the entire at-rule.

I will enjoy to try a PR if you find this idea interesting.

[RyanZim]

If you're using SCSS, why not just let SASS do the importing? Why bother using postcss-import at all?

[jonathantneal]

I believe the solution is to run Sass first, if you are going to break from spec CSS and do things the Sass way.

[crutchcorn]

One of the primary advantages of using SCSS and postcss-import together is by enabling something like tailwind and angular interop. For example, I want to break my tailwind global file into multiple subfiles. However, I also want to have something like:

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

In order to use Angular material and only bring in selective modules. The lack of ~ support (and other SCSS items) itself makes the process impossible to do so without some major ejections

[iantearle]

@crutchcorn did you get this resolved? I am finding this same problem, needing to use scss for new team, but seeing if I can add tailwind inline with their workflow. Postcss-import falling over on imports like @import "inc/style";