vuejs/vetur

Syntax checking to auto-detect PostCSS in <style>

Open

#2,556 opened on Dec 11, 2020

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (594 forks)github user discovery
feature-requestgood first issue

Repository metrics

Stars
 (5,752 stars)
PR merge metrics
 (PR metrics pending)

Description

  • I have searched through existing issues

Feature Request

I'm getting syntax errors in the <style> block on nested CSS rules and it seems the expected solution here is to add lang="postcss".

However, this is confusing because vue-loader docs say:

There's no need to specify lang="postcss" on a style block if there is a PostCSS config file in your project.

I'd like to request that Vetur implicitly determines whether the syntax is PostCSS, by detecting:

  • if there's a PostCSS config file: postcss.config.js, .postcssrc.js, etc.
  • which files postcss-loader is applied to

Contributor guide

Research direction
Investigate how Vetur currently handles style blocks and how vue loader detects PostCSS config files. Look into postcss loader configuration and implement similar auto detection in Vetur's syntax highlighting for <style> blocks.
Tech stack
typescriptjavascriptvue
Domain
frontenddeveloper experiencetooling
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
VuePostCSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70