|
| 1 | +# PostCSS Language Support [<img src="https://github.com/csstools/postcss-language/raw/master/icon.png" alt="PostCSS" width="90" height="90" align="right">][PostCSS Language Support] |
| 2 | + |
| 3 | +[<img height="20" alt="Installs" src="https://img.shields.io/visual-studio-marketplace/i/csstools.postcss">](https://marketplace.visualstudio.com/items?itemName=csstools.postcss) |
| 4 | +[<img height="20" alt="Rating" src="https://img.shields.io/visual-studio-marketplace/stars/csstools.postcss">](https://marketplace.visualstudio.com/items?itemName=csstools.postcss) |
| 5 | +[<img height="20" alt="Support Chat" src="https://img.shields.io/badge/support-chat-blue.svg">](https://gitter.im/postcss/postcss) |
| 6 | + |
| 7 | +[PostCSS Language Support] adds support for modern and experimental CSS within |
| 8 | +**Visual Studio Code**. |
| 9 | + |
| 10 | +<p align="center"><img src="https://raw.githubusercontent.com/csstools/postcss-language/master/preview/custom-rules.png" alt="" width="610"></p> |
| 11 | + |
| 12 | +This syntax is applied to `.css`, `.pcss` and `.postcss` files. It is also |
| 13 | +applied to `css` and `pcss` code blocks in Markdown, and also to `<style>` code |
| 14 | +blocks in HTML. |
| 15 | + |
| 16 | +## Installation |
| 17 | + |
| 18 | +1. Open the command palette and select **Extensions: Install Extensions** |
| 19 | +2. Search for **PostCSS Language Support** |
| 20 | +3. Click **Install** |
| 21 | + |
| 22 | +### Adding Support for Emmet |
| 23 | + |
| 24 | +1. Open the command palette and select **Preferences: Open Settings (JSON)** |
| 25 | +2. Add the following configuration: |
| 26 | + |
| 27 | +```json |
| 28 | +{ |
| 29 | + "emmet.includeLanguages": { |
| 30 | + "postcss": "css" |
| 31 | + }, |
| 32 | + "emmet.syntaxProfiles": { |
| 33 | + "postcss": "css" |
| 34 | + } |
| 35 | +} |
| 36 | +``` |
| 37 | + |
| 38 | +## Differences from CSS Language Support |
| 39 | + |
| 40 | +**PostCSS Language Support** is derived from the native |
| 41 | +**CSS Language Support** built into **Visual Studio Code**, which is itself |
| 42 | +derived from the native **CSS Language Support** for **Atom**. This language |
| 43 | +support includes the following changes: |
| 44 | + |
| 45 | +### Modern CSS Features |
| 46 | + |
| 47 | +- Support is added for nesting rules, including the nesting selector (`&`), the |
| 48 | + nesting at-rule (`@nest`), and `@media` and `@supports` at-rules. |
| 49 | +- Support is added for the `:blank` pseudo-class, as well as the `:is()` and |
| 50 | + `:where` functional pseudo-classes. |
| 51 | +- Support is added for `prefers-color-scheme` and `prefers-reduced-motion` |
| 52 | + within media queries. |
| 53 | +- Support is added for the `place-self` property. |
| 54 | +- Support is added for the `env()` function, as well as the `hwb()`, `lab()`, |
| 55 | + and `lch()` color functions. |
| 56 | +- Support is added for the `emoji`, `fangsong`, and `system-ui` font families. |
| 57 | +- Support is added for the `border-block`, `border-inline`, `margin-block`, |
| 58 | + `margin-inline`, `padding-block`, and `padding-inline` logical properties. |
| 59 | +- Support is added for `@custom-media` and `@custom-selector` at-rules. |
| 60 | + |
| 61 | +<p align="center"><img src="https://raw.githubusercontent.com/csstools/postcss-language/master/preview/nesting.png" alt="" width="278"></p> |
| 62 | +<p align="center"><img src="https://raw.githubusercontent.com/csstools/postcss-language/master/preview/variables.png" alt="" width="402"></p> |
| 63 | + |
| 64 | +### Syntactical Looseness |
| 65 | + |
| 66 | +- Support is added for nesting `@extend` and `@extends` at-rules. |
| 67 | +- Support is added for functional selectors (`%placeholder`). |
| 68 | +- Support is added for the CSS Modules `:global` rule, as well as the |
| 69 | + `composes` declaration, and also `@value` declarations. |
| 70 | +- Support is added for sass `$variables`. |
| 71 | +- Support is added for single-line comments (`//`). |
| 72 | +- Support is added for `@custom-env` at-rules. |
| 73 | +- Support is added for unknown nesting at-rules, as well as unknown `@custom-` |
| 74 | + prefixed at-rules. |
| 75 | + |
| 76 | +<p align="center"><img src="https://raw.githubusercontent.com/csstools/postcss-language/master/preview/modules.png" alt="" width="518"></p> |
| 77 | +<p align="center"><img src="https://raw.githubusercontent.com/csstools/postcss-language/master/preview/sassy.png" alt="" width="333"></p> |
| 78 | + |
| 79 | +[PostCSS Language Support]: https://github.com/csstools/postcss-language |
0 commit comments