You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: website/pages/transpilation.md
+69Lines changed: 69 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -67,6 +67,57 @@ When using parsed configuration from `browserslist`, `.browserslistrc`, or `pack
67
67
68
68
If no targets are found for the resulting environment, then the `defaults` configuration section is used.
69
69
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:
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:
567
618
*`focus` – corresponds to the `:focus` pseudo class
568
619
*`focusVisible` – corresponds to the `:focus-visible` pseudo class
569
620
*`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