Question: Why aren't color variables highlighted but standard colors are?

[kyleknighted]

If I use an actual color, then Pigments will highlight it, but it doesn't seem to highlight my variables.

I have one main SCSS file that @imports all of my different SCSS files, so I don't include the the individual colors at the top of every single SCSS file. Is there a way to make this work?

[abe33]

Hmm, it should work out-of-the box, except if the color declaration couldn't be parsed by pigments. Can you provide me a sample file of where your variables are declared?

FWIW, before v0.4.0 there was an issue with colors declared after sass/scss mixins, maybe these variables were falling in that case. Let me know if you still have the problem with v0.4.0.

[kyleknighted]

I have a Global.scss file with all the core styles/mixins/variables/etc

// colors
@import 'global/colors/accents_grey';
@import 'global/colors/actions';
@import 'global/colors/buttons';
@import 'global/colors/dangers';
@import 'global/colors/notifications';
@import 'global/colors/visualizations';
@import 'global/colors/deprecated';

// core
@import 'global/core/variables';
@import 'global/core/fonts/gotham';
@import 'global/core/fonts/quarto';
@import 'global/core/fonts/icons';
@import 'global/core/fonts';
@import 'global/core/mixins';
@import 'global/core/extends';
@import 'global/core/keyframes';

And that Global.scss file is @imported into application.css.scss file on a Ruby app.

The application.css.scss file also have the @import for the individual page styles which is where I snapped the screen shot from the OP.

[abe33]

Sorry if I didn't make myself clear, what I need is for instance a sample of the file where $color__text--light is declared (the bigger the sample the better as parsing can be affected by code before the actual declaration of the variable).

As for @imports or //= require, pigments don't care about that, as it's require to know about the build process (paths can be affected by the app assets config).

[kyleknighted]

All my color files are the same, with just different variables.

$color__action--alpha: #444 !default;
$color__action--beta: #515761 !default;
$color__action--gamma: #757f8f !default;
$color__action--delta: #bd4040 !default;
$color__action--epsilon: #d55555 !default;
$color__action--zeta: #8e8e8e !default;
$color__action--eta: #aaa !default;
$color__action--theta: #d7d7d7 !default;
$color__action--iota: #e1e1e1 !default;
$color__action--kappa: #fff !default;
$color__action--lambda: #7ba1c0 !default;
$color__action--mu: #3fa1d0 !default;
$color__action--nu: #56b7e5 !default;

[kyleknighted]

I have the source names in the settings as ./styles/global/colors/**/*.scss, ./vendor/assets/bower_components/etch/styles/global/colors/**/*.scss

Which are the paths to where the SCSS files are on the three main projects I develop on.

[abe33]

Hmm, looks like there's nothing wrong with the declarations themselves. My guess is that your patterns in the source names settings are a bit too specific.

Can you try the following code in the console to see if the paths where your variables are specified are present in the paths array:

project = atom.packages.getActivePackage('pigments').mainModule.getProject(); 

project.getPaths()

If you works on projects with a great number of file, I'd rather use the per-project ignoreNames setting (presented to you since v0.4.0 when the # of files is greater than the threshold setting).

[kyleknighted]

Are the Ignored Names and the Source Names relative to the root of the project or relative to the file system? Because even adding items to the Ignored Names doesn't seem to change the elements in the getPaths() results.

[kyleknighted]

I have 113 SCSS files but I have /Users/kknight/Sites/mansfield/app/assets/stylesheets/**/*.scss in the ignored names section. I have also tried ./app/assets/stylesheets/**/*.scss, but all the same 113 still come up in getPaths()

[kyleknighted]

Also, nothing from the Vendors directory shows up in the listing...

[abe33]

All these patterns are relative to the project root (as with the other glob patterns in Atom settings), it uses the minimatch module as Atom does.

But it seems I have an issue with handling dynamic changes of the ignoreNames setting.

BTW, what is your version of pigments?

[kyleknighted]

Ran the update this morning and using 0.4.0

Do I need to restart Atom each time I change ignoreNames?

[kyleknighted]

Okay, i got everything to ignore properly and I got the vendors path to show up in the getPaths() return

["/Users/kknight/Sites/mansfield/vendor/assets/bower_components/etch/styles/global/colors/_accents_grey.scss", 
"/Users/kknight/Sites/mansfield/vendor/assets/bower_components/etch/styles/global/colors/_actions.scss", 
"/Users/kknight/Sites/mansfield/vendor/assets/bower_components/etch/styles/global/colors/_buttons.scss", 
"/Users/kknight/Sites/mansfield/vendor/assets/bower_components/etch/styles/global/colors/_dangers.scss", 
"/Users/kknight/Sites/mansfield/vendor/assets/bower_components/etch/styles/global/colors/_deprecated.scss", 
"/Users/kknight/Sites/mansfield/vendor/assets/bower_components/etch/styles/global/colors/_notifications.scss", 
"/Users/kknight/Sites/mansfield/vendor/assets/bower_components/etch/styles/global/colors/_visualizations.scss"]

But, the variables still don't highlight.

[abe33]

Do I need to restart Atom each time I change ignoreNames?

Hmm, it's a bit more complicated, as pigments' paths are serialized, one way is to clear the corresponding storage file (that lives in ~/.atom/storage) but it's quite brutal as you also lose the state of the editors (which panes, which files).

Actually I don't listen to changes of these settings (sourceNames and ignoredNames) but I should, so it's a problem on my end. I'll work on a fix asap so that you don't need to clear the storage as I suggest below.

But, if you don't care losing the editor's state, one test to do would be to reset both sourceNames and ignoreNames to their default value and then clear the storage file for this project so that it can restarts from a clean state. If you want to find the storage file for your project, here's what I use myself:

cd ~/.atom/storage

grep -R 'your-project-name' . | less

You should see something like that:

./editor-00da0f465f196a624dbde2071e96743b1f0994f9:{"mode":"editor","version":1, ...

Then you can clear just this project state by doing:

rm ./editor-00da0f465f196a624dbde2071e96743b1f0994f9

But be aware that this file will be generated again when you close Atom, so it's better if you do that while not having the project opened in Atom. Also note that the storage file name never change for a given directory.

Last thing is, as you have more than 50 files (which is the default threshold for the sources alert), when you'll restart the project in a clean state and open a file, it'll warn you about the project size. I'll be interested to know if it colors the variables when you ignore the warning (and then using all the paths that were found).

As for why it don't highlight the variables, it's probably because it still fails to parse them as colors. It can be because all these colors are aliases of variables that are defined in a file that were excluded from the paths or because the colors declarations use some idioms that it doesn't know how to parse (which shouldn't be the case given the sample you provided above).

Anyway, thanks for the time you took to provide me feedback on this, there's definitely an issue with how paths are updated when playing with the settings.

[kyleknighted]

Last thing is, as you have more than 50 file

Once I got the ignoreName to ignore the proper files, I only have 7 color variable files showing up with getPaths()

clear just this project state by doing

After Clearing the project, the getPaths() no longer shows anything.

[abe33]

After Clearing the project, the getPaths() no longer shows anything.

With the default sourceNames or with your customized ones?

[envygeeks]

I wanted to point out that this also happens in GTK CSS source files, it doesn't highlight variables.

[abe33]

If you have the time, I'd like to have a sample that allow me reproduce this issue, I understand that you can't share your code if you're working on a private project, but without a way to reproduce your context I fear I'll struggle to understand what goes wrong in your particular case and fix it.

[envygeeks]

@abe33 https://github.com/envygeeks/ubuntu-ambiance/tree/master/gtk-3.0

[abe33]

Sorry, I was referring to your initial issue with scss variables.

As for the GTK theme, this is clearly out of the scope of pigments for the moment, I want to focus on making sure that every largely used CSS pre-processors are handled properly.

But the challenge maybe interesting, looks like the main place where the palette is defined is here: https://github.com/envygeeks/ubuntu-ambiance/blob/master/gtk-3.0/settings.ini#L2

With some aliasing done here: https://github.com/envygeeks/ubuntu-ambiance/blob/master/gtk-3.0/public-colors.css

So it should be feasible with two variable expressions. I'm not sure when I'll have time to look at that though.

[jetpackjarrett]

I seem to be experiencing this as well. Direct color definitions are highlighted but the variables are not. Autcomplete also does not seem to be happening. I am using the latest of atom and your plugin. It should be noted that the palette finder was working but I removed it since it appears to be deprecated.

[abe33]

@jetpackjarrett Can you tell me what is your configuration? More specifically, what are the values for the sourceNames and ignoredNames settings? I'm trying to figure what are the conditions that would lead to this situation so I can write a test for that and make sure it gets fixed definitely.

[jetpackjarrett]

@abe33 sorry for the late response, for some reason didn't get notified about your reply. After the latest updates, colors are working except for variables defined in bower_components.

this is what atom.packages.getActivePackage('pigments').mainModule.getProject().getPaths() returns:

["/Users/jarrett/Projects/armoire/app/styles/_config.scss",
 "/Users/jarrett/Projects/armoire/app/styles/main.scss",
 "/Users/jarrett/Projects/armoire/app/styles/common/_animations.scss",
 "/Users/jarrett/Projects/armoire/app/styles/common/_base.scss",
 "/Users/jarrett/Projects/armoire/app/styles/common/_cards.scss",
 "/Users/jarrett/Projects/armoire/app/styles/common/_charts.scss",
 "/Users/jarrett/Projects/armoire/app/styles/common/_datatypes.scss",
 "/Users/jarrett/Projects/armoire/app/styles/common/_dropdown.scss",
 "/Users/jarrett/Projects/armoire/app/styles/common/_metrics.scss",
 "/Users/jarrett/Projects/armoire/app/styles/common/_overrides.scss",
 "/Users/jarrett/Projects/armoire/app/styles/common/_slider.scss",
 "/Users/jarrett/Projects/armoire/app/styles/common/_trend.scss",
 "/Users/jarrett/Projects/armoire/app/styles/common/_z-index.scss",
 "/Users/jarrett/Projects/armoire/app/styles/modules/_auth.scss",
 "/Users/jarrett/Projects/armoire/app/styles/modules/_layout.scss",
 "/Users/jarrett/Projects/armoire/app/styles/modules/_manage.scss",
 "/Users/jarrett/Projects/armoire/app/styles/modules/_research.scss",
 "/Users/jarrett/Projects/armoire/app/styles/modules/research/_details.scss",
 "/Users/jarrett/Projects/armoire/app/styles/modules/research/_filters.scss",
 "/Users/jarrett/Projects/armoire/app/styles/modules/research/_list.scss",
 "/Users/jarrett/Projects/armoire/app/styles/modules/research/_map.scss

and my config:

  pigments:
    mergeColorDuplicates: true
    sortPaletteColors: "by color"
    extendAutocompleteToVariables: true
    sourceNames: [
      "**/*.scss"
      "bower_components/**/*.scss"
    ]

I assume its because of #28?

[abe33]

@jetpackjarrett That's my turn to miss the notification (by quite the margin). Yes I think it's related if your bower_components is listed in .gitignore. Pigments, as of version 0.9.0, has its own setting to ignore VCS ignored paths or not. I still have to work on this forced inclusion setting.

[MunifTanjim]

same issue.

os: ubuntu 15.10 atom version: 1.2.2 atom-pigments version: 0.19.0

done this.

config:

pigments:
    markerType: "dot"
    extendAutocompleteToVariables: true
    sourceNames: [
      "**/*.scss"
      "sass/**/*.scss"
    ]

atom.packages.getActivePackage('pigments').mainModule.getProject().getPaths() returns nothing: []

color variable file is located at: /sass/variables-site/_colors.scss

color variables format in _color.scss file:

$color__background-body: #fff;
$color__background-screen: #f1f1f1;

[franciscod]

same here

[abe33]

@MunifTanjim Sorry, I missed your comment. Does the "sass/**/*.scss" in your source names really necessary? Just "**/*.scss" should match them.

There must be something I missing because there appears to have two contradicting case (see #119). In one case some legit files aren't found, and in the other some to-be-ignored file are not ignored.

[MunifTanjim]

os: ubuntu 15.10 atom version: 1.2.4 atom-pigments version: 0.19.0

now, everything it's working as expected. just updated the atom version.

[Cxarli]

Closed due to inactivity.