github/atom
1
1
Fork 0
mirror of https://github.com/atom/atom.git synced 2026-04-28 03:01:47 -04:00
Code Issues Packages Projects Releases Wiki Activity

Preserve specificity when transforming atom-text-editor::shadow

Browse Source 
Simply replace ::shadow with .editor to preserve the specificity of the
transformed rule. This isn't beautiful, but it's the only way to
guarantee that the styling transition is smooth enough to justify not
bumping the major.
This commit is contained in:
Nathan Sobo
2016-11-01 10:56:09 -06:00
parent daf790406f
commit 4ccd700871
2 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
spec/style-manager-spec.js
View File

@@ -1,10 +1,11 @@
const temp = require('temp')
const StyleManager = require('../src/style-manager')
describe('StyleManager', () => {
let [styleManager, addEvents, removeEvents, updateEvents] = []
beforeEach(() => {
styleManager = new StyleManager({configDirPath: atom.getConfigDirPath()})
styleManager = new StyleManager({configDirPath: temp.mkdirSync('atom-config')})
addEvents = []
removeEvents = []
updateEvents = []
@@ -43,12 +44,12 @@ describe('StyleManager', () => {
atom-text-editor[mini].is-focused::shadow .class-7 { color: green; }
`)
expect(Array.from(styleManager.getStyleElements()[0].sheet.cssRules).map((r) => r.selectorText)).toEqual([
'atom-text-editor .class-1, atom-text-editor .class-2',
'atom-text-editor > .class-3',
'atom-text-editor.editor .class-1, atom-text-editor.editor .class-2',
'atom-text-editor.editor > .class-3',
'atom-text-editor .class-4',
'another-element::shadow .class-5',
'atom-text-editor[data-grammar*=\"js\"] .class-6',
'atom-text-editor[mini].is-focused .class-7'
'atom-text-editor[data-grammar*=\"js\"].editor .class-6',
'atom-text-editor[mini].is-focused.editor .class-7'
])
})
@@ -75,8 +76,8 @@ describe('StyleManager', () => {
`)
expect(Array.from(styleManager.getStyleElements()[1].sheet.cssRules).map((r) => r.selectorText)).toEqual([
'.source > .js, .source.coffee',
'atom-text-editor .syntax--source > .syntax--js',
'atom-text-editor[mini].is-focused .syntax--source > .syntax--js',
'atom-text-editor.editor .syntax--source > .syntax--js',
'atom-text-editor[mini].is-focused.editor .syntax--source > .syntax--js',
'atom-text-editor .source > .js'
])
})

3
src/style-manager.js
View File

@@ -270,7 +270,8 @@ function transformDeprecatedShadowDOMSelectors (css, context) {
}
} else {
if (previousNodeIsAtomTextEditor && node.type === 'pseudo' && node.value === '::shadow') {
selector.removeChild(node)
node.type = 'className'
node.value = '.editor'
targetsAtomTextEditorShadow = true
}
}