Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: update postcss to 8.4.38 #137

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fix: update postcss to 8.4.38 #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2b3be69
fix: update postcss
gabrielopensource Apr 9, 2024
1e4d9bb
fix test
gabrielopensource Apr 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 91 additions & 86 deletions lib/stylePlugins/scoped.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,101 +1,106 @@
import { Root } from 'postcss'
import * as postcss from 'postcss'
import { Root, PluginCreator } from 'postcss'
// postcss-selector-parser does have typings but it's problematic to work with.
const selectorParser = require('postcss-selector-parser')

export default postcss.plugin('add-id', (options: any) => (root: Root) => {
const id: string = options
const keyframes = Object.create(null)
const addIdPlugin: PluginCreator<any> = (options) => ({
postcssPlugin: 'add-id',
Once(root: Root) {
const id: string = options
const keyframes = Object.create(null)

root.each(function rewriteSelector(node: any) {
if (!node.selector) {
// handle media queries
if (node.type === 'atrule') {
if (node.name === 'media' || node.name === 'supports') {
node.each(rewriteSelector)
} else if (/-?keyframes$/.test(node.name)) {
// register keyframes
keyframes[node.params] = node.params = node.params + '-' + id
root.each(function rewriteSelector(node: any) {
if (!node.selector) {
// handle media queries
if (node.type === 'atrule') {
if (node.name === 'media' || node.name === 'supports') {
node.each(rewriteSelector)
} else if (/-?keyframes$/.test(node.name)) {
// register keyframes
keyframes[node.params] = node.params = node.params + '-' + id
}
}
return
}
return
}
node.selector = selectorParser((selectors: any) => {
selectors.each((selector: any) => {
let node: any = null
node.selector = selectorParser((selectors: any) => {
selectors.each((selector: any) => {
let node: any = null

// find the last child node to insert attribute selector
selector.each((n: any) => {
// ">>>" combinator
// and /deep/ alias for >>>, since >>> doesn't work in SASS
if (
n.type === 'combinator' &&
(n.value === '>>>' || n.value === '/deep/')
) {
n.value = ' '
n.spaces.before = n.spaces.after = ''
return false
}
// find the last child node to insert attribute selector
selector.each((n: any) => {
// ">>>" combinator
// and /deep/ alias for >>>, since >>> doesn't work in SASS
if (
n.type === 'combinator' &&
(n.value === '>>>' || n.value === '/deep/')
) {
n.value = ' '
n.spaces.before = n.spaces.after = ''
return false
}

// in newer versions of sass, /deep/ support is also dropped, so add a ::v-deep alias
if (n.type === 'pseudo' && n.value === '::v-deep') {
n.value = n.spaces.before = n.spaces.after = ''
return false
}
// in newer versions of sass, /deep/ support is also dropped, so add a ::v-deep alias
if (n.type === 'pseudo' && n.value === '::v-deep') {
n.value = n.spaces.before = n.spaces.after = ''
return false
}

if (n.type !== 'pseudo' && n.type !== 'combinator') {
node = n
if (n.type !== 'pseudo' && n.type !== 'combinator') {
node = n
}
})

if (node) {
node.spaces.after = ''
} else {
// For deep selectors & standalone pseudo selectors,
// the attribute selectors are prepended rather than appended.
// So all leading spaces must be eliminated to avoid problems.
selector.first.spaces.before = ''
}

selector.insertAfter(
node,
selectorParser.attribute({
attribute: id,
})
)
})
}).processSync(node.selector)
})

if (node) {
node.spaces.after = ''
} else {
// For deep selectors & standalone pseudo selectors,
// the attribute selectors are prepended rather than appended.
// So all leading spaces must be eliminated to avoid problems.
selector.first.spaces.before = ''
// If keyframes are found in this <style>, find and rewrite animation names
// in declarations.
// Caveat: this only works for keyframes and animation rules in the same
// <style> element.
if (Object.keys(keyframes).length) {
root.walkDecls((decl) => {
// individual animation-name declaration
if (/^(-\w+-)?animation-name$/.test(decl.prop)) {
decl.value = decl.value
.split(',')
.map((v) => keyframes[v.trim()] || v.trim())
.join(',')
}
// shorthand
if (/^(-\w+-)?animation$/.test(decl.prop)) {
decl.value = decl.value
.split(',')
.map((v) => {
const vals = v.trim().split(/\s+/)
const i = vals.findIndex((val) => keyframes[val])
if (i !== -1) {
vals.splice(i, 1, keyframes[vals[i]])
return vals.join(' ')
} else {
return v
}
})
.join(',')
}

selector.insertAfter(
node,
selectorParser.attribute({
attribute: id
})
)
})
}).processSync(node.selector)
})

// If keyframes are found in this <style>, find and rewrite animation names
// in declarations.
// Caveat: this only works for keyframes and animation rules in the same
// <style> element.
if (Object.keys(keyframes).length) {
root.walkDecls(decl => {
// individual animation-name declaration
if (/^(-\w+-)?animation-name$/.test(decl.prop)) {
decl.value = decl.value
.split(',')
.map(v => keyframes[v.trim()] || v.trim())
.join(',')
}
// shorthand
if (/^(-\w+-)?animation$/.test(decl.prop)) {
decl.value = decl.value
.split(',')
.map(v => {
const vals = v.trim().split(/\s+/)
const i = vals.findIndex(val => keyframes[val])
if (i !== -1) {
vals.splice(i, 1, keyframes[vals[i]])
return vals.join(' ')
} else {
return v
}
})
.join(',')
}
})
}
}
},
})

addIdPlugin.postcss = true
export default addIdPlugin
22 changes: 13 additions & 9 deletions lib/stylePlugins/trim.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import { Root } from 'postcss'
import * as postcss from 'postcss'
import { PluginCreator, Rule, AtRule } from 'postcss'

export default postcss.plugin('trim', () => (css: Root) => {
css.walk(({ type, raws }) => {
if (type === 'rule' || type === 'atrule') {
if (raws.before) raws.before = '\n'
if (raws.after) raws.after = '\n'
}
})
const trim = function ({ raws }: Rule | AtRule) {
if (raws.before) raws.before = '\n'
if (raws.after) raws.after = '\n'
}

const trimPlugin: PluginCreator<void> = () => ({
postcssPlugin: 'trim',
AtRule: trim,
Rule: trim,
})

trimPlugin.postcss = true
export default trimPlugin
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,12 @@
"hash-sum": "^1.0.2",
"lru-cache": "^4.1.2",
"merge-source-map": "^1.1.0",
"postcss": "^7.0.36",
"postcss": "^8.4.38",
"postcss-selector-parser": "^6.0.2",
"source-map": "~0.6.1",
"vue-template-es2015-compiler": "^1.9.0"
},
"optionalDependencies": {
"prettier": "^1.18.2 || ^2.0.0"
}
}
}
42 changes: 22 additions & 20 deletions test/compileStyle.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,15 @@ test('preprocess less', () => {
'</style>\n',
compiler: compiler as VueTemplateCompiler,
filename: 'example.vue',
needMap: true
needMap: true,
}).styles[0]
const result = compileStyle({
id: 'v-scope-xxx',
filename: 'example.vue',
source: style.content,
map: style.map,
scoped: false,
preprocessLang: style.lang
preprocessLang: style.lang,
})

expect(result.errors.length).toBe(0)
Expand All @@ -37,15 +37,15 @@ test('preprocess scss', () => {
'</style>\n',
compiler: compiler as VueTemplateCompiler,
filename: 'example.vue',
needMap: true
needMap: true,
}).styles[0]
const result = compileStyle({
id: 'v-scope-xxx',
filename: 'example.vue',
source: style.content,
map: style.map,
scoped: false,
preprocessLang: style.lang
preprocessLang: style.lang,
})

expect(result.errors.length).toBe(0)
Expand All @@ -63,15 +63,15 @@ test('preprocess sass', () => {
'</style>\n',
compiler: compiler as VueTemplateCompiler,
filename: 'example.vue',
needMap: true
needMap: true,
}).styles[0]
const result = compileStyle({
id: 'v-scope-xxx',
filename: 'example.vue',
source: style.content,
map: style.map,
scoped: false,
preprocessLang: style.lang
preprocessLang: style.lang,
})

expect(result.errors.length).toBe(0)
Expand All @@ -89,15 +89,15 @@ test('preprocess stylus', () => {
'</style>\n',
compiler: compiler as VueTemplateCompiler,
filename: 'example.vue',
needMap: true
needMap: true,
}).styles[0]
const result = compileStyle({
id: 'v-scope-xxx',
filename: 'example.vue',
source: style.content,
map: style.map,
scoped: false,
preprocessLang: style.lang
preprocessLang: style.lang,
})

expect(result.errors.length).toBe(0)
Expand All @@ -113,7 +113,7 @@ test('custom postcss plugin', () => {
filename: 'example.vue',
source: '.foo { color: red }',
scoped: false,
postcssPlugins: [require('postcss').plugin('test-plugin', () => spy)()]
postcssPlugins: [require('postcss').plugin('test-plugin', () => spy)()],
})

expect(spy).toHaveBeenCalled()
Expand All @@ -125,7 +125,7 @@ test('custom postcss options', () => {
filename: 'example.vue',
source: '.foo { color: red }',
scoped: false,
postcssOptions: { random: 'foo' }
postcssOptions: { random: 'foo' },
})

expect((result.rawResult as any).opts.random).toBe('foo')
Expand All @@ -138,10 +138,11 @@ test('async postcss plugin in sync mode', () => {
source: '.foo { color: red }',
scoped: false,
postcssPlugins: [
require('postcss').plugin('test-plugin', () => async (result: any) =>
result
)
]
{
postcssPlugin: 'test-plugin',
Once: async (result: any) => result,
},
],
})

expect(result.errors).toHaveLength(1)
Expand All @@ -154,10 +155,11 @@ test('async postcss plugin', async () => {
source: '.foo { color: red }',
scoped: false,
postcssPlugins: [
require('postcss').plugin('test-plugin', () => async (result: any) =>
result
)
]
{
postcssPlugin: 'test-plugin',
Once: async (result: any) => result,
},
],
})

expect(promise instanceof Promise).toBe(true)
Expand All @@ -177,7 +179,7 @@ test('media query', () => {
.foo {
color: #000;
}
}`
}`,
})

expect(result.errors).toHaveLength(0)
Expand All @@ -196,7 +198,7 @@ test('supports query', () => {
.foo {
color: #000;
}
}`
}`,
})

expect(result.errors).toHaveLength(0)
Expand Down
Loading