judbd / eighty-shades-syntax

A cool 80's Atom syntax theme. Blast the chiptune music and let's code!
MIT License
21 stars 4 forks source link

A great deal of the stylesheet selectors have been changed/deprecated #2

Open davidsharp opened 7 years ago

davidsharp commented 7 years ago

Starting from Atom v1.13.0, the contents of atom-text-editor elements are no longer encapsulated within a shadow DOM boundary. This means you should stop using :host and ::shadow pseudo-selectors, and prepend all your syntax selectors with syntax--.

Atom auto-fixes it for now, but it looks like it break soon

davidsharp commented 7 years ago

To prevent breakage with existing style sheets, Atom will automatically upgrade the following selectors:

atom-text-editor, :host => atom-text-editor,atom-text-editor
atom-text-editor .wrap-guide, :host .wrap-guide => atom-text-editor .wrap-guide,atom-text-editor .wrap-guide
atom-text-editor .indent-guide, :host .indent-guide => atom-text-editor .indent-guide,atom-text-editor .indent-guide
atom-text-editor .invisible-character, :host .invisible-character => atom-text-editor .invisible-character,atom-text-editor .invisible-character
atom-text-editor .gutter, :host .gutter => atom-text-editor .gutter,atom-text-editor .gutter
atom-text-editor .gutter .line-number.cursor-line, :host .gutter .line-number.cursor-line => atom-text-editor .gutter .line-number.cursor-line,atom-text-editor .gutter .line-number.cursor-line
atom-text-editor .gutter .line-number.cursor-line-no-selection, :host .gutter .line-number.cursor-line-no-selection => atom-text-editor .gutter .line-number.cursor-line-no-selection,atom-text-editor .gutter .line-number.cursor-line-no-selection
atom-text-editor .gutter .line-number.folded, :host .gutter .line-number.folded, atom-text-editor .gutter .line-number:after, :host .gutter .line-number:after, atom-text-editor .fold-marker:after, :host .fold-marker:after => atom-text-editor .gutter .line-number.folded,atom-text-editor .gutter .line-number.folded, atom-text-editor .gutter .line-number:after,atom-text-editor .gutter .line-number:after, atom-text-editor .fold-marker:after,atom-text-editor .fold-marker:after
atom-text-editor .invisible, :host .invisible => atom-text-editor .invisible,atom-text-editor .invisible
atom-text-editor .cursor, :host .cursor => atom-text-editor .cursor,atom-text-editor .cursor
atom-text-editor .selection .region, :host .selection .region => atom-text-editor .selection .region,atom-text-editor .selection .region
atom-text-editor .search-results .marker .region, :host .search-results .marker .region => atom-text-editor .search-results .syntax--marker .region,atom-text-editor .search-results .syntax--marker .region
atom-text-editor .search-results .marker.current-result .region, :host .search-results .marker.current-result .region => atom-text-editor .search-results .syntax--marker.current-result .region,atom-text-editor .search-results .syntax--marker.current-result .region
.comment => .syntax--comment
.keyword => .syntax--keyword
.keyword.control => .syntax--keyword.syntax--control
.keyword.operator => .syntax--keyword.syntax--operator
.keyword.other.special-method => .syntax--keyword.syntax--other.syntax--special-method
.keyword.other.unit => .syntax--keyword.syntax--other.syntax--unit
.storage => .syntax--storage
.constant => .syntax--constant
.constant.character.escape => .syntax--constant.syntax--character.syntax--escape
.constant.numeric => .syntax--constant.syntax--numeric
.constant.other.color => .syntax--constant.syntax--other.syntax--color
.constant.other.symbol => .syntax--constant.syntax--other.syntax--symbol
.variable => .syntax--variable
.variable.interpolation => .syntax--variable.syntax--interpolation
.variable.parameter.function => .syntax--variable.syntax--parameter.syntax--function
.invalid.illegal => .syntax--invalid.syntax--illegal
.string => .syntax--string
.string.regexp => .syntax--string.syntax--regexp
.string.regexp .source.ruby.embedded => .syntax--string.syntax--regexp .syntax--source.syntax--ruby.syntax--embedded
.string.other.link => .syntax--string.syntax--other.syntax--link
.punctuation.definition.comment => .syntax--punctuation.syntax--definition.syntax--comment
.punctuation.definition.string, .punctuation.definition.parameters, .punctuation.definition.array => .syntax--punctuation.syntax--definition.syntax--string, .syntax--punctuation.syntax--definition.syntax--parameters, .syntax--punctuation.syntax--definition.syntax--array
.punctuation.definition.variable => .syntax--punctuation.syntax--definition.syntax--variable
.punctuation.definition.heading, .punctuation.definition.identity => .syntax--punctuation.syntax--definition.syntax--heading, .syntax--punctuation.syntax--definition.syntax--identity
.punctuation.definition.bold => .syntax--punctuation.syntax--definition.syntax--bold
.punctuation.definition.italic => .syntax--punctuation.syntax--definition.syntax--italic
.punctuation.section.embedded => .syntax--punctuation.syntax--section.syntax--embedded
.support.class => .syntax--support.syntax--class
.support.function => .syntax--support.syntax--function
.support.function.any-method => .syntax--support.syntax--function.syntax--any-method
.entity.name.function => .syntax--entity.syntax--name.syntax--function
.entity.name.type => .syntax--entity.syntax--name.syntax--type
.entity.other.inherited-class => .syntax--entity.syntax--other.syntax--inherited-class
.entity.name.class, .entity.name.type.class => .syntax--entity.syntax--name.syntax--class, .syntax--entity.syntax--name.syntax--type.syntax--class
.entity.name.section => .syntax--entity.syntax--name.syntax--section
.entity.name.tag => .syntax--entity.syntax--name.syntax--tag
.entity.other.attribute-name => .syntax--entity.syntax--other.syntax--attribute-name
.entity.other.attribute-name.id => .syntax--entity.syntax--other.syntax--attribute-name.syntax--id
.meta.class => .syntax--meta.syntax--class
.meta.link => .syntax--meta.syntax--link
.meta.require => .syntax--meta.syntax--require
.meta.selector => .syntax--meta.syntax--selector
.meta.separator => .syntax--meta.syntax--separator
.none => .syntax--none
.markup.bold => .syntax--markup.syntax--bold
.markup.changed => .syntax--markup.syntax--changed
.markup.deleted => .syntax--markup.syntax--deleted
.markup.italic => .syntax--markup.syntax--italic
.markup.heading .punctuation.definition.heading => .syntax--markup.syntax--heading .syntax--punctuation.syntax--definition.syntax--heading
.markup.inserted => .syntax--markup.syntax--inserted
.markup.list => .syntax--markup.syntax--list
.markup.quote => .syntax--markup.syntax--quote
.markup.raw.inline => .syntax--markup.syntax--raw.syntax--inline
.source.gfm .markup => .syntax--source.syntax--gfm .syntax--markup
.source.gfm .markup.heading => .syntax--source.syntax--gfm .syntax--markup.syntax--heading
atom-text-editor[mini] .scroll-view, :host([mini]) .scroll-view => atom-text-editor[mini] .scroll-view,atom-text-editor .scroll-view
atom-text-editor .bracket-matcher .region, :host .bracket-matcher .region => atom-text-editor .bracket-matcher .region,atom-text-editor .bracket-matcher .region

Automatic translation of selectors will be removed in a few release cycles to minimize startup time. Please, make sure to upgrade the above selectors as soon as possible.

brimarq commented 7 years ago

Here's a fix that got rid of the depreciation warnings for me. I just generated a default syntax theme in atom and compared the two with DiffMerge. Replace the code in the editor and base less files files with this and you're good-to-go.

For editor.less:

// Editor styles (background, gutter, guides)

atom-text-editor, // <- remove when Shadow DOM can't be disabled
atom-text-editor {
  .bracket-matcher .region {
    border-bottom: 1px solid @green;
    box-sizing: border-box;
  }
}

For base.less :

@import "syntax-variables";

atom-text-editor {
  background-color: @syntax-background-color;
  color: @syntax-text-color;

  .wrap-guide {
    background-color: @syntax-wrap-guide-color;
  }

  .indent-guide {
    color: @syntax-indent-guide-color;
  }

  .invisible-character {
    color: @syntax-invisible-character-color;
  }

  .gutter {
    background-color: @syntax-gutter-background-color;
    color: @syntax-gutter-text-color;

    .line-number {
      &.cursor-line {
        background-color: @syntax-gutter-background-color-selected;
        color: @syntax-gutter-text-color-selected;
      }

      &.cursor-line-no-selection {
        color: @syntax-gutter-text-color-selected;
      }
    }
  }

  .gutter .line-number.folded,
  .gutter .line-number:after,
  .fold-marker:after {
    color: @light-gray;
  }

  .invisible {
    color: @syntax-text-color;
  }

  .cursor {
    color: @syntax-cursor-color;
  }

  .selection .region {
    background-color: @syntax-selection-color;
  }
}

atom-text-editor .search-results .syntax--marker .region,
atom-text-editor .search-results .syntax--marker .region {
  background-color: transparent;
  border: 1px solid @syntax-result-marker-color;
}

atom-text-editor .search-results .syntax--marker.current-result .region,
atom-text-editor .search-results .syntax--marker.current-result .region {
  border: 1px solid @syntax-result-marker-color-selected;
}

// Syntax styles

.syntax--comment {
  color: @light-gray;
}

.syntax--keyword {
  color: @purple;

  &.syntax--control {
    color: @purple;
  }

  &.syntax--operator {
    color: @syntax-text-color;
  }

  &.syntax--other.syntax--special-method {
    color: @blue;
  }

  &.syntax--other.syntax--unit {
    color: @orange;
  }
}

.syntax--storage {
  color: @purple;
}

.syntax--constant {
  color: @orange;

  &.syntax--character.syntax--escape {
    color: @cyan;
  }

  &.syntax--numeric {
    color: @orange;
  }

  &.syntax--other.syntax--color {
    color: @cyan;
  }

  &.syntax--other.syntax--symbol {
    color: @green;
  }
}

.syntax--variable {
  color: desaturate(@red, 10%);

  &.syntax--interpolation {
    color: darken(@red, 10%);
  }

  &.syntax--parameter.syntax--function {
    color: @red;
  }
}

.syntax--invalid.syntax--illegal {
  background-color: @red;
  color: @syntax-background-color;
}

.syntax--string {
  color: @green;

  &.syntax--regexp {
    color: @cyan;

    .syntax--source.syntax--ruby.syntax--embedded {
      color: @orange;
    }
  }

  &.syntax--other.syntax--link {
    color: @red;
  }
}

.syntax--punctuation {
  &.syntax--definition {
    &.syntax--comment {
      color: @light-gray;
    }

    &.syntax--string,
    &.syntax--parameters,
    &.syntax--array {
      color: @syntax-text-color;
    }
    &.syntax--variable {
      color: darken(@red, 10%);
    }

    &.syntax--heading,
    &.syntax--identity {
      color: @blue;
    }

    &.syntax--bold {
      color: @light-orange;
      font-weight: bold;
    }

    &.syntax--italic {
      color: @purple;
      font-style: italic;
    }
  }

  &.syntax--section.syntax--embedded {
    color: darken(@red, 10%);
  }

}

.syntax--support {
  &.syntax--class {
    color: @light-orange;
  }

  &.syntax--function  {
    color: @cyan;

    &.syntax--any-method {
      color: @blue;
    }
  }
}

.syntax--entity {
  &.syntax--name.syntax--function {
    color: @blue;
  }
  &.syntax--name.syntax--type {
    color: @light-orange;
    text-decoration: underline;
  }

  &.syntax--other.syntax--inherited-class {
    color: @green;
  }
  &.syntax--name.syntax--class, &.syntax--name.syntax--type.syntax--class {
    color: @light-orange;
  }

  &.syntax--name.syntax--section {
    color: @blue;
  }

  &.syntax--name.syntax--tag {
    color: @red;
    border-bottom: 1px dotted @blue;
  }

  &.syntax--other.syntax--attribute-name {
    color: @orange;

    &.syntax--id {
      color: @blue;
    }
  }
}

.syntax--meta {
  &.syntax--class {
    color: @light-orange;
  }

  &.syntax--link {
    color: @orange;
  }

  &.syntax--require {
    color: @blue;
  }

  &.syntax--selector {
    color: @purple;
  }

  &.syntax--separator {
    background-color: @gray;
    color: @syntax-text-color;
  }
}

.syntax--none {
  color: @syntax-text-color;
}

.syntax--markup {
  &.syntax--bold {
    color: @orange;
    font-weight: bold;
  }

  &.syntax--changed {
    color: @purple;
  }

  &.syntax--deleted {
    color: @red;
  }

  &.syntax--italic {
    color: @purple;
    font-style: italic;
  }

  &.syntax--heading .syntax--punctuation.syntax--definition.syntax--heading {
    color: @blue;
  }

  &.syntax--inserted {
    color: @green;
  }

  &.syntax--list {
    color: @red;
  }

  &.syntax--quote {
    color: @orange;
  }

  &.syntax--raw.syntax--inline {
    color: @green;
  }
}

.syntax--source.syntax--gfm .syntax--markup {
  -webkit-font-smoothing: auto;
  &.syntax--heading {
    color: @green;
  }
}

// Mini editor

atom-text-editor[mini] .scroll-view {
  padding-left: 1px;
}