mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-09 13:18:29 +08:00
This reverts commit 1e08ee816b.
Reason for revert: tree is closed due to errors https://ci.chromium.org/ui/p/devtools-frontend/builders/ci/Stand-alone%20Linux/8169/overview
Original change's description:
> Update stylelint to 14.0.1
>
> This also upgrades PostCSS to 8.3.11.
>
> DISABLE_THIRD_PARTY_CHECK=Updating Stylelint configuration
> R=szuend@chromium.org
>
> Bug: none
> Change-Id: I606540b03509d7c6e73f3d490327cd4174e03d31
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3259541
> Reviewed-by: Simon Zünd <szuend@chromium.org>
> Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Bug: none
Change-Id: Icb1c02b41dbccc3b4fc5760f5dd0b78eca078b61
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3263399
Bot-Commit: Rubber Stamper <rubber-stamper@appspot.gserviceaccount.com>
Owners-Override: Alex Rudenko <alexrudenko@chromium.org>
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
2.9 KiB
2.9 KiB
PostCSS Syntax
postcss-syntax can automatically switch the required PostCSS syntax by file extension/source
Getting Started
First thing's first, install the module:
npm install postcss-syntax --save-dev
If you want support SCSS/SASS/LESS/SugarSS syntax, you need to install these module:
- SCSS: postcss-scss
- SASS: postcss-sass
- LESS: postcss-less
- SugarSS: sugarss
If you want support HTML (and HTML-like)/Markdown/CSS-in-JS file format, you need to install these module:
- CSS-in-JS: postcss-jsx
- HTML (and HTML-like): postcss-html
- Markdown: postcss-markdown
Use Cases
const postcss = require('postcss');
const syntax = require('postcss-syntax')({
rules: [
{
test: /\.(?:[sx]?html?|[sx]ht|vue|ux|php)$/i,
extract: 'html',
},
{
test: /\.(?:markdown|md)$/i,
extract: 'markdown',
},
{
test: /\.(?:m?[jt]sx?|es\d*|pac)$/i,
extract: 'jsx',
},
{
// custom language for file extension
test: /\.postcss$/i,
lang: 'scss'
},
{
// custom language for file extension
test: /\.customcss$/i,
lang: 'custom'
},
],
// custom parser for CSS (using `postcss-safe-parser`)
css: 'postcss-safe-parser',
// custom parser for SASS (PostCSS-compatible syntax.)
sass: require('postcss-sass'),
// custom parser for SCSS (by module name)
scss: 'postcss-scss',
// custom parser for LESS (by module path)
less: './node_modules/postcss-less',
// custom parser for SugarSS
sugarss: require('sugarss'),
// custom parser for custom language
custom: require('postcss-custom-syntax'),
});
postcss(plugins).process(source, { syntax: syntax }).then(function (result) {
// An alias for the result.css property. Use it with syntaxes that generate non-CSS output.
result.content
});