User Styles not loading with shadow DOM

[sangregoriopaolo]

After the last release of yesterday, my stylesheet (that was working before) is not loading anymore.

[benogle]

If you disable the shadow DOM in the settings and reload the editor, does it work again?

Can you paste in your stylesheet?

[sangregoriopaolo]

Hi, disabling the shadow dom and restarting atom fixes the issue! thanks!

Here is my stylesheet, anyway:

atom-text-editor .selection .region {
  background-color:#333;
}

atom-text-editor .invisible-character {
  color:#555;
}

.editor.is-focused .selection .region {
  background-color:#333;
}

.editor {
  background:#111;
}

.tree-view {

}

atom-text-editor {

}

atom-text-editor .cursor {

}

[benogle]

You need to update your sheet for the shadow DOM change. You should be able to get away with changing it to this:

atom-text-editor::shadow .selection .region {
  background-color:#333;
}

atom-text-editor::shadow .invisible-character {
  color:#555;
}

atom-text-editor.is-focused::shadow .selection .region {
  background-color:#333;
}

.editor {
  background:#111;
}

Check out this document: https://atom.io/docs/latest/upgrading/upgrading-your-ui-theme

[benogle]

@nathansobo are we autoconverting the user's sheet? Can we? Or can we detect that they have improper styles and pop up a notification when the shadow DOM is enabled?

[sangregoriopaolo]

Great, it worked! Sorry for not being able to find that document by myself!

[benogle]

No prob, we should be better about notifying you that you need to make changes.

[nathansobo]

@benogle We could scan for .editor and atom-text-editor selectors that have descendants without a ::shadow and warn...

[benogle]

That would be nice. Then I can write up a doc specific to the user sheet (basically trimmed down version of that doc above), and we can link to it in the doc. I think a notification rather than dep cop would be the best thing for the user sheet as the user can fix it.

[andrewpbrett]

Thanks for pointing in the right direction. FWIW this issues page was the first place I looked. A notification would be great!

[Zren]

The default stylesheet should be updated. I don't believe the atom-text-editor .cursor {} rule will work.

Eg:

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed.
 *
 * If you are unfamiliar with LESS, you can read more about it here:
 * http://www.lesscss.org
 */

.tree-view {

}

atom-text-editor {

}

/*
 * The editor itself uses a shadow DOM so rules must start with
 * atom-text-editor::shadow or they will be ignored.
 */
atom-text-editor::shadow {
  .cursor {

  }
}

[nathansobo]

@Zren Thanks for pointing that out. Updated via ab45885.

[benogle]

Closing in favor of #5149 for a message.

[lock]

This issue has been automatically locked since there has not been any recent activity after it was closed. If you can still reproduce this issue in Safe Mode then please open a new issue and fill out the entire issue template to ensure that we have enough information to address your issue. Thanks!