LibSass should not import CSS files, let alone as SCSS

[nex3]

If I have two files:

// file1.scss
@import "file2";

// file2.css
$var: 12;
a {b: $var}

...LibSass will import "file2" and interpret it as SCSS rather than plain CSS. Neither of these behaviors are correct. .css files cannot be imported by Sass files without an importer, and if they could they should be interpreted as plain CSS without allowing any Sass features.

I recommend adding a deprecation warning for this as soon as possible, possibly along with a link to an example importer that will import .css files for users for whom migrating will be difficult.

[xzyfer]

This has been a long running issue, and one of the biggest node sass pain points. Thean was to removed this feature/bug with the module system landed to reduce disruption.

See #754
See #1656
See #1963

[nex3]

I'd like to at least add a warning for this as soon as possible. Dart Sass will not be implementing this behavior, so I'd like to strongly warn people away from it.

[xzyfer]

PR to add a deprecation warning #2613

[tony]

I recommend adding a deprecation warning for this as soon as possible, possibly along with a link to an example importer that will import .css files for users for whom migrating will be difficult.

Please provide some examples of how to handle importing raw CSS files from third party libraries. This would break a lot of behavior for me. It was an important feature.

[xzyfer]

It was a bug not a feature. If you want to do this your code will not be portable. If you use sassc you can use the new import extensions flag. That feature will be supported in node-sass ever.. alternatively you can use a custom importer.

…

On Sun., 29 Apr. 2018, 12:51 am Tony Narlock, ***@***.***> wrote: I recommend adding a deprecation warning for this as soon as possible, possibly along with a link to an example importer that will import .css files for users for whom migrating will be difficult. Please provide some examples of how to handle importing raw CSS files from third party libraries. This would break a lot of behavior for me. It was an important feature. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#2611 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAjZWDIN8n7yL1GeSr0DF45fHutYZmTrks5ttIHUgaJpZM4S5TFB> .

[liamkeily]

Like @tony I was using this to import css files from an npm package, whats the best way to go about this now?

[xzyfer]

See my previous comment

[bayucandra]

@xzyfer just check at documentation about "Custom importer": https://sass-lang.com/documentation/file.SASS_REFERENCE.html#custom_importers . However, it looks not so clear to me. Do you have more detail reference about "Custom import" things? thanks in advance.

[qodesmith]

@bayucandra If you're using Webpack, you can import your css files at the top of your entry JavaScript file. That's where I was importing my top-level scss file anyway. And so long as you're using css-loader in your chain of loaders, everything should be good to go.

[tcchau]

@qodesmith I'm using create-react-app, which restricts you from importing from outside of the src directory, so this isn't a viable workaround for people like @liamkeily and myself. I work mainly with SASS so the times I want to import a CSS file are exactly when it's from a third-party who provides a CSS file but not a SASS file. Disallowing imports of CSS files altogether seems overly-restrictive, since SASS is a superset of CSS and a SASS parser should be able to handle all CSS input without problems.

[qodesmith]

@tcchau Shameless plug - try Create New App instead 😄I created it to ease my pain of including things like scss and redux since I was using them all the time. But I wanted to keep the simplicity of CRA in that you just have to type a single command and boom - app generated.

I agree that it's a pain that you can't import css directly from a scss file. I myself have been using it that way to import 3rd party libraries (even some of my own!) that only provide a css file.

[chriseppstein]

Disallowing imports of CSS files altogether seems overly-restrictive, since SASS is a superset of CSS and a SASS parser should be able to handle all CSS input without problems.

@tcchau We agree. The superset feature of Sass is exactly why this is a problem. The early decision to change the behavior of a CSS feature (@import) broke the superset guarantee by creating an alternate implementation. Right now, there's legal CSS that works differently when used with Sass than when used as CSS. Even if that's what you want when you use Sass, it violates the superset contract.

[qodesmith]

Right now, there's legal CSS that works differently when used with Sass than when used as CSS.

@chriseppstein I'd be interested to see an example of that. I wasn't aware of it!

[bayucandra]

@qodesmith Looks the point is just throw away CSS out from SCSS code right? I thought there was some way which I can do inside my SCSS code, so we can still see a CSS list inside SCSS code. Will do gulp concatenation then, since I am using gulp instead Webpack. Thanks for sharing your way.