Skip to content

Commit 09d4b58

Browse files
committed
Update docs
1 parent 11f4179 commit 09d4b58

File tree

2 files changed

+77
-0
lines changed

2 files changed

+77
-0
lines changed

website/docs.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,10 @@ a[aria-current] {
237237
text-decoration: underline;
238238
}
239239

240+
.features {
241+
column-count: 2;
242+
}
243+
240244
@media (width < 1040px) {
241245
.table-of-contents {
242246
display: none;
@@ -245,6 +249,10 @@ a[aria-current] {
245249
main {
246250
padding-right: 0;
247251
}
252+
253+
.features {
254+
column-count: 1;
255+
}
248256
}
249257

250258
@media (width < 600px) {

website/pages/transpilation.md

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,57 @@ When using parsed configuration from `browserslist`, `.browserslistrc`, or `pack
6767

6868
If no targets are found for the resulting environment, then the `defaults` configuration section is used.
6969

70+
### Feature flags
71+
72+
In most cases, setting the `targets` option and letting Lightning CSS automatically compile your CSS works great. However, in other cases you might need a little more control over exactly what features are compiled and which are not. That's where the `include` and `exclude` options come in.
73+
74+
The `include` and `exclude` options allow you to explicitly turn on or off certain features. These override the defaults based on the provided browser targets. For example, you might want to only compile colors, and handle auto prefixing or other features with another tool. Or you may want to handle everything except vendor prefixing with Lightning CSS. These options make that possible.
75+
76+
The `include` and `exclude` options are configured using the `Features` enum, which can be imported from `lightningcss`. You can bitwise OR multiple flags together to turn them on or off.
77+
78+
```js
79+
import { transform, Features } from 'lightningcss';
80+
81+
let { code, map } = transform({
82+
// ...
83+
targets,
84+
// Always compile colors and CSS nesting, regardless of browser targets.
85+
include: Features.Colors | Features.Nesting,
86+
// Never add any vendor prefixes, regardless of targets.
87+
exclude: Features.VendorPrefixes
88+
});
89+
```
90+
91+
Here is a full list of available flags, described in the sections below:
92+
93+
<div class="features">
94+
95+
* `Nesting`
96+
* `NotSelectorList`
97+
* `DirSelector`
98+
* `LangSelectorList`
99+
* `IsSelector`
100+
* `TextDecorationThicknessPercent`
101+
* `MediaIntervalSyntax`
102+
* `MediaRangeSyntax`
103+
* `CustomMediaQueries`
104+
* `ClampFunction`
105+
* `ColorFunction`
106+
* `OklabColors`
107+
* `LabColors`
108+
* `P3Colors`
109+
* `HexAlphaColors`
110+
* `SpaceSeparatedColorNotation`
111+
* `FontFamilySystemUi`
112+
* `DoublePositionGradients`
113+
* `VendorPrefixes`
114+
* `LogicalProperties`
115+
* `Selectors` – shorthand for `Nesting | NotSelectorList | DirSelector | LangSelectorList | IsSelector`
116+
* `MediaQueries` – shorthand for `MediaIntervalSyntax | MediaRangeSyntax | CustomMediaQueries`
117+
* `Colors` – shorthand for `ColorFunction | OklabColors | LabColors | P3Colors | HexAlphaColors | SpaceSeparatedColorNotation`
118+
119+
</div>
120+
70121
## Vendor prefixing
71122

72123
Based on your configured browser targets, Lightning CSS automatically adds vendor prefixed fallbacks for many CSS features. For example, when using the [`image-set()`](https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set()) function, Lightning CSS will output a fallback `-webkit-image-set()` value as well, since Chrome does not yet support the unprefixed value.
@@ -567,3 +618,21 @@ The following pseudo classes may be configured as shown above:
567618
* `focus` – corresponds to the `:focus` pseudo class
568619
* `focusVisible` – corresponds to the `:focus-visible` pseudo class
569620
* `focusWithin` – corresponds to the `:focus-within` pseudo class
621+
622+
## Non-standard syntax
623+
624+
For compatibility with other tools, Lightning CSS supports parsing some non-standard CSS syntax. This must be enabled by turning on a flag under the `nonStandard` option.
625+
626+
```js
627+
let { code, map } = transform({
628+
// ...
629+
nonStandard: {
630+
deepSelectorCombinator: true
631+
}
632+
});
633+
634+
```
635+
636+
Currently the following features are supported:
637+
638+
* `deepSelectorCombinator` – enables parsing the Vue/Angular `>>>` and `/deep/` selector combinators.

0 commit comments

Comments
 (0)