pulsar-edit/pulsar
1
1
Fork 0
mirror of https://github.com/pulsar-edit/pulsar.git synced 2024-11-10 10:17:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

Transform also more complex atom-text-editor selectors

Browse Source
This commit is contained in:
Antonio Scandurra 2016-10-06 19:18:04 +02:00
parent 1091b0eb60
commit 4db895c731
2 changed files with 29 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,20 +34,23 @@ describe('StyleManager', () => {
})
it('removes the ::shadow pseudo-element from atom-text-editor selectors', () => {
styleManager.addStyleSheet(`
atom-text-editor::shadow .class-1, atom-text-editor::shadow .class-2 { color: red }
atom-text-editor::shadow > .class-3 { color: yellow }
atom-text-editor .class-4 { color: blue }
another-element::shadow .class-5 { color: white }
`)
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 .class-4',
'another-element::shadow .class-5'
])
}
)
styleManager.addStyleSheet(`
atom-text-editor::shadow .class-1, atom-text-editor::shadow .class-2 { color: red }
atom-text-editor::shadow > .class-3 { color: yellow }
atom-text-editor .class-4 { color: blue }
another-element::shadow .class-5 { color: white }
atom-text-editor[data-grammar*=\"js\"]::shadow .class-6 { color: green; }
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 .class-4',
'another-element::shadow .class-5',
'atom-text-editor[data-grammar*=\"js\"] .class-6',
'atom-text-editor[mini].is-focused .class-7'
])
})
describe('when a selector targets the atom-text-editor shadow DOM', () => {
it('prepends "--syntax" to class selectors matching a grammar scope name and not already starting with "syntax--"', () => {
@ -67,11 +70,13 @@ describe('StyleManager', () => {
styleManager.addStyleSheet(`
.source > .js, .source.coffee { color: green }
atom-text-editor::shadow .source > .js { color: yellow }
atom-text-editor[mini].is-focused::shadow .source > .js { color: gray }
atom-text-editor .source > .js { color: red }
`)
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 .source > .js'
])
})

15
src/style-manager.js
View File

@ -239,22 +239,27 @@ function transformDeprecatedShadowDOMSelectors (css, context) {
firstNode.replaceWith(atomTextEditorElementNode)
}
let previousNodeIsAtomTextEditor = false
let targetsAtomTextEditorShadow = context === 'atom-text-editor'
let previousNode
selector.each((node) => {
if (targetsAtomTextEditorShadow && node.type === 'class') {
if (DEPRECATED_SYNTAX_SELECTORS.has(node.value) && !node.value.startsWith('syntax--')) {
if (DEPRECATED_SYNTAX_SELECTORS.has(node.value)) {
node.value = `syntax--${node.value}`
}
} else if (previousNode) {
const currentNodeIsShadowPseudoClass = node.type === 'pseudo' && node.value === '::shadow'
const previousNodeIsAtomTextEditor = previousNode.type === 'tag' && previousNode.value === 'atom-text-editor'
if (previousNodeIsAtomTextEditor && currentNodeIsShadowPseudoClass) {
} else {
if (previousNodeIsAtomTextEditor && node.type === 'pseudo' && node.value === '::shadow') {
selector.removeChild(node)
targetsAtomTextEditorShadow = true
}
}
previousNode = node
if (node.type === 'combinator') {
previousNodeIsAtomTextEditor = false
} else if (previousNode.type === 'tag' && previousNode.value === 'atom-text-editor') {
previousNodeIsAtomTextEditor = true
}
})
})
}).process(rule.selector, {lossless: true}).result