8000 Allow vue-loader to user PostCSS options as object and custom syntax by esiao · Pull Request #240 · vuejs/vue-loader · GitHub
[go: up one dir, main page]
Skip to content

Allow vue-loader to user PostCSS options as object and custom syntax #240

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

Jump to bottom
Merged
merged 5 commits into from
May 25, 2016
Merged

Allow vue-loader to user PostCSS options as object and custom syntax #240

merged 5 commits into from
May 25, 2016

Conversation

esiao
Copy link
@esiao esiao commented May 24, 2016 •
edited
Loading

I wanted to use SugarSS with PostCSS with vue-loader. It wasn't possible without modifying the style-rewriter and changing the way options works.

You still can use the
postcss: array of plugins
postcss: function that return array of plugins

or the new one

postcss: {
  plugins: array of plugins,
  syntax: custom syntax, like sugarss
}

Allowing the use of sugarss or others syntax as custom postcss syntax with vue loader.

@yyx990803
Copy link
Member

Thanks for the PR! I think it maybe a good idea to mix all options other than plugins into the opts object for processing. So you'd use

postcss: {
  plugins: [...],
  parser: sugarss
}

And it would also work in case any other plugins need different options.

@esiao
Copy link
Author
esiao commented May 24, 2016 •
edited
Loading

This is definitively the approach to go for, using the plugin options object makes a lot of sense and it will be more modular at the end.

But if you want to respect postcss logic it should be like this:

postcss: {
  plugins: [...],
  options: {
    parser: sugarss
  }
}

@yyx990803
Copy link
Member
yyx990803 < 8000 /strong> commented May 24, 2016

@esiao yeah, that'd be cleaner. Could you update the PR to support that instead?

@esiao
Copy link
Author
esiao commented May 24, 2016

@yyx990803 Yeah sure, should we keep the legacy version too? With options.postcss being an array or a function.

@yyx990803
Copy link
Member

@esiao yes, it seems perfectly feasible to do so and it's good to avoid breaking changes.

@esiao
Copy link
Author
esiao commented May 25, 2016

@yyx990803 done. I'm checking if the user provided the options object for postcss and merging it with the one defined because from and tooptions should not come from the user.

@yyx990803 yyx990803 merged commit 1b70544 into vuejs:master May 25, 2016
@yyx990803
Copy link
Member

Great work! Thanks

@esiao
Copy link
Author
esiao commented May 26, 2016

@yyx990803 I pushed an update, there was an error thrown when using sourcemaps but no postcss options, that strangely made it past the verification process.

@yyx990803
Copy link
Member

Yeah, I've fixed it in 8.5.2.
On Thu, May 26, 2016 at 4:47 AM Dias Aurélien notifications@github.com
wrote:

@yyx990803 https://github.com/yyx990803 I pushed an update, there was
an error thrown when using sourcemaps but no postcss options, that
strangely made it past the verification process.

—
You are receiving this because you were mentioned.

Reply to this email directly or view it on GitHub
#240 (comment)

@yuchuanxi
Copy link

@esiao how did you set the lang attribute for <style> in order to syntax highlight

@esiao
Copy link
Author
esiao commented May 31, 2016

In the end I'm using it like this:

<style lang="postcss">

And in webpack config

  vue: {
    loaders: {
      postcss: TARGET === 'build' ? ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader?parser=sugarss') : 'style-loader!css-loader!postcss-loader?parser=sugarss'
    },
    autoprefixer: false
  },

But the syntax highlighting is broken since I'm using SugarSS syntax on what the Atom vue plugin considers as postcss syntax. The solution would be to use a custom lang like lang="sugarss" which means changing the loaders to sugarss and implement support in the Atom vue plugin, but I don't have the time for that for now.

@yuchuanxi
Copy link

@esiao thanks, my situation like you ...

@wprater
Copy link
wprater commented Aug 3, 2016

@esiao do I have to override the loader for postcss as you've shown when using <style lang="postcss">? I've tried to use the lang for postcss, but get an error ... is not a PostCSS plugin

@esiao
Copy link
Author
esiao commented Aug 3, 2016

@wprater no, what I've shown here is the final solution I used on my project, I also had some external postcss files to process.

If you want to use postcss with vue-loader all you need to do is pass postcss options to vue config as explained here :
http://vue-loader.vuejs.org/en/features/postcss.html

@wprater
Copy link
wprater commented Aug 3, 2016 •
edited
Loading

@esiao I have no issues using postcss. it's just the lang attribute in the style section of the vue template that causes errors. probably a bug, so I'll file it elsewhere.

@octref
Copy link
Member
octref commented Feb 22, 2017

Hello, for people in this thread:

Is the current state people have to use <style lang="postcss"> for both postcss and SugarSS?

For my VSCode extension, I have postcss syntax highlight for Vue SFC. I'd like to have SugarSS too, but if there is no way to tell postcss away from SugarSS it's impossible to write a grammar for it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@esiao @yyx990803 @yuchuanxi @wprater @octref
0