Skip to content

Commit

Permalink
Feature: postcss extensions to default loader if no loader provided
Browse files Browse the repository at this point in the history
If no postcss loader is provided in vue loader options then default to
vue-loader handling

This allows you to use vue internal postcss/css handling with known
postcss extensions

fixes: vuejs#942
fixes: vuejs#800
fixes: vuejs#654
  • Loading branch information
blake-newman committed Nov 12, 2017
1 parent e637c88 commit 21fc1f9
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 2 deletions.
10 changes: 8 additions & 2 deletions lib/loader.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ const defaultLang = {
script: 'js'
}

const postcssExtensions = [
'postcss', 'pcss', 'sugarss', 'sss'
]

// When extracting parts from the source vue file, we want to apply the
// loaders chained before vue-loader, but exclude some loaders that simply
// produces side effects such as linting.
Expand Down Expand Up @@ -556,9 +560,11 @@ module.exports = function (content) {
hasInlineConfig: !!query.postcss
}) +
'!'
// normalize scss/sass if no specific loaders have been provided
// normalize scss/sass/postcss if no specific loaders have been provided
if (!loaders[lang]) {
if (lang === 'sass') {
if (postcssExtensions.indexOf(lang) !== -1) {
lang = 'css'
} else if (lang === 'sass') {
lang = 'sass?indentedSyntax'
} else if (lang === 'scss') {
lang = 'sass'
Expand Down
6 changes: 6 additions & 0 deletions test/fixtures/postcss-lang.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<style lang="pcss">
h1 {
color: red;
font-size: 14px
}
</style>
11 changes: 11 additions & 0 deletions test/test.js
Original file line number Diff line number Diff line change
Expand Up @@ -507,6 +507,17 @@ describe('vue-loader', () => {
})
})

it('postcss options', done => {
test({
entry: './test/fixtures/postcss-lang.vue'
}, (window) => {
let style = window.document.querySelector('style').textContent
style = normalizeNewline(style)
expect(style).to.contain('h1 {\n color: red;\n font-size: 14px\n}')
done()
})
})

it('transpile ES2015 features in template', done => {
test({
entry: './test/fixtures/es2015.vue'
Expand Down

0 comments on commit 21fc1f9

Please sign in to comment.