Import and Module ID’s

Resolved 1earthsangha
(@1earthsangha)

3 years, 8 months ago
The problem I thought I was having with @import and @extend is essentially a problem with just @import.

I want an SCSS module that both contains classes and supports other files in being able to extend those classes. I’ve created two files as examples, icons.scss and typography.scss (shown below) as well as third file, icons-and-typography.scss which is just a concatonation of the two. While I can successfully compile the two seperate files locally using ruby gems SASS (libsass) compiler, only the combination file, icons-and-typography.scss, works in the Custom CSS and JS plugin.

Essentially, it seems that the plugin supports SASS identified modules (where an “id” for the file is specified) to have variables, mixins, and placeholders (and thus be used by other modules) but no actual classes. Such classes can be declared but are never generated.

In the example below, when icons.scss is configured with an id, typography.scss won’t compile. Furthermore, I can’t use any of the classes defined in icons.scss. Configured without an id, icons.scss can’t be referenced by typography.scss. Only when they all live in the same file do I have the benefit of both use and reuse.

Being able to keep styles organized is enormously helpful and this issue creates a significant restriction. I appreciate any suggestions.

icons.scss:
```
.icon-mail {
  background-image: url("/icons/mail.svg");
  position: absolute;
  top: 0;
  left: 0;
}

.icon-mail-blue {
  @extend .icon-mail;
  color: blue;
}

@mixin corner-icon($name, $top-or-bottom, $left-or-right, $color) {
  .icon-#{$name}-#{$color} {
    background-image: url("/icons/#{$name}.svg");
    position: absolute;
    #{$top-or-bottom}: 0;
    #{$left-or-right}: 0;
    color: #{$color};
  }
}

@include corner-icon("arrow", top, left, "blue");
```
typography.scss
```
@import 'icons'

a[href^="http:"], a[href^="https:"] {
	@extend .icon-arrow-blue;
}
```
Compiling these two files locally using a libSass compiler yields the following CSS:
```
.icon-mail, .icon-mail-blue {
  background-image: url("/icons/mail.svg");
  position: absolute;
  top: 0;
  left: 0; }

.icon-mail-blue {
  color: blue; }

.icon-arrow-blue, a[href^="http:"], a[href^="https:"] {
  background-image: url("/icons/arrow.svg");
  position: absolute;
  top: 0;
  left: 0;
  color: blue; }
```

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Author SilkyPress
(@diana_burduja)

3 years, 8 months ago

Would you use “@extend .icon-arrow-blue !optional” to avoid this error?

Compiling the same two files locally using the dartSass compiler throws an error at the @extend line and asks me to use the !optional directive. With !optional the dartSass compiler gets the same CSS as with libSass. The Simple Custom CSS & JS Pro plugin also needs the !optional directive so it would successfully compile.
Thread Starter 1earthsangha
(@1earthsangha)

3 years, 8 months ago
Thanks for your timely reply. Two things of note here:
1. !optional just means don’t fail compile if the @extend reference can’t be found. So while compile completes on this code, it doesn’t actually succeed in that it doesn’t yield the required result.
2. The first line of my typography code had a syntax error, missing the closing semi-colon. My bad. See corrected code here, which libSass successfully compiles to the desired result, shown in my original posting.
Let me know what you advise and thanks again!

typography.scss
```
@import 'icons'; // fixed with closing ';'

a[href^="http:"], a[href^="https:"] {
	@extend .icon-arrow-blue; // this reference is found
}
```
Plugin Author SilkyPress
(@diana_burduja)

3 years, 8 months ago
On my test website: the icons.scss file and the typography.scss file compile to the following CSS, which is the same as the “required result”. Did I misunderstand something? Or do you get another compiled CSS?
- This reply was modified 3 years, 8 months ago by SilkyPress.
Thread Starter 1earthsangha
(@1earthsangha)

3 years, 8 months ago
Hold the phone. I just noticed you linked to a screenshot that shows how you configured the ID and import statements. I thought I tried that but I’ll use exactly your ID for icons and see how it goes.
- This reply was modified 3 years, 8 months ago by 1earthsangha.
Plugin Author SilkyPress
(@diana_burduja)

3 years, 8 months ago

Would you try writing “icons.scss” for the first file’s ID and use the @import "icons.scss"; in the second file?
Thread Starter 1earthsangha
(@1earthsangha)

3 years, 8 months ago
I think we may be getting somewhere, but my results point to at least two deeper issues.

Issue #1: Potential caching or database problem

The code you linked to in your earlier post is exactly the desired result. But it doesn’t match mine, for the original typography file. .

I configured the icons SCSS with an ID of “icons.scss” just as before and matching your instructions. I set the original typography file’s @import line as @import 'icons.scss'; and in that case, the file compiles but I get this result, which is not generated CSS and not at all the required result.

typography.css:
```

<style type="text/css">
@import "icons.scss";

a[href^="http:"], a[href^="https:"] {
	@extend .icon-arrow-blue;
}

</style>

```
You can see this result on our server here.

However, I noticed that typography’s resulting CSS wasn’t always updating with new content. So I created a fresh file, typography-1, with contents identical to the original typography file. Much to my surprise, it worked. The compiled CSS was exactly as required and matched my local libSass result as well as yours.

Here are the screenshots for all three input files, icons, typography and typography-1, as well as their resulting CSS files. While the SCSS source for typography and typography-1 are identical yet CSS results are not.

I was able to replicate this problem even after clearing all of the caches on our WP server (page, network and object) as well as my browser cache. These settings from the plugin Settings page may be relevant as well:
1. WP Version: 6.0
2. CCJ Version: 4.29
3. WP Multisite: false
There may be some MySQL database rows that have gone bad. If this is a known vulnerability, perhaps you can advise me on how to find and fix those.

Issue #2: Any SCSS file with an ID doesn’t compile to CSS on save

Take a look at the CSS results in your “parent” file, that is, check your icons.css. Does that contain CSS or is it uncompiled SCSS? In my case, it remains uncompiled, no matter if I modify an existing file or start from scratch (removing the caching and/or database concern). See that file here and in the screenshots folder mentioned above.

The icons.css result from the plugin does not match my local libSass result, which contains successfully generated CSS.

icons.css:
```
.icon-mail, .icon-mail-blue {
  background-image: url("/icons/mail.svg");
  position: absolute;
  top: 0;
  left: 0; }

.icon-mail-blue {
  color: blue; }

.icon-arrow-blue {
  background-image: url("/icons/arrow.svg");
  position: absolute;
  top: 0;
  left: 0;
  color: blue; }

/*# sourceMappingURL=icons.css.map */
```
So while we may have addressed, at least for fresh files, the ability to reference generated classes from other files, I’m back to an important part of my original concern.

Unless there’s a caching, database, or other more general issue, it appears that developers using this plugin face a choice where an SCSS file is either one that can be included in other SCSS files (having an ID) or produce its own classes (having no ID) but not both (having an ID means the file itself won’t compile to CSS). It is important to repeat that libSass, on which I believe the plugin is based, does not have this same limitation.

I’m keen to hear if you see this same behavior and look forward to your advice.

Thanks again for the troubleshooting.
Plugin Author SilkyPress
(@diana_burduja)

3 years, 8 months ago

Issue #1: Unfortunately I cannot replicate the potential caching or database problem. That can be further researched only pocking around on the website where the issue shows up.

Issue #2: Yes, the only purpose of a SCSS file with an ID is to be imported in another SCSS file. It is intentionally not compiled by itself and also not linked from the frontend. Therefore all the other right hand options are removed once an ID is defined.

If you want to compile and link on the frontend a SCSS file with an ID, then you can define another SCSS custom code that contains only the @import "icons.scss"; line.