@uncinq/css-components 1.16.1 → 1.16.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -5
- package/docs/_index.md +7 -5
- package/docs/cascade-layers.md +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -26,7 +26,7 @@ npm install @uncinq/design-tokens @uncinq/component-tokens @uncinq/css-base @unc
|
|
|
26
26
|
Declare the cascade layer order once at the top of your entry stylesheet, **before any import**:
|
|
27
27
|
|
|
28
28
|
```css
|
|
29
|
-
@layer reset, tokens, libs,
|
|
29
|
+
@layer reset, tokens, libs, base, vendors, layouts, components, pages, utilities;
|
|
30
30
|
|
|
31
31
|
@import '@uncinq/design-tokens'; /* @layer tokens */
|
|
32
32
|
@import '@uncinq/css-base'; /* @layer reset, base, layouts */
|
|
@@ -41,11 +41,13 @@ Per component:
|
|
|
41
41
|
@import '@uncinq/css-components/css/utilities/scrollsnap.css';
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
-
|
|
44
|
+
### A CDN link is not enough
|
|
45
45
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
`@uncinq/design-tokens` and `@uncinq/component-tokens` can be linked straight from a CDN, because they emit nothing but custom properties. **This package cannot**, and neither can `@uncinq/css-base`.
|
|
47
|
+
|
|
48
|
+
Both ship `@media (--sm)` queries that rely on the `@custom-media` rules declared in `css-base/css/mediaqueries.css`, and no browser implements `@custom-media`. Loaded without [postcss-custom-media](https://www.npmjs.com/package/postcss-custom-media), 13 responsive blocks in this package are dropped: `.panel-inline-*`, `.panel-trigger-*` and every `.scrollsnap-*` variant.
|
|
49
|
+
|
|
50
|
+
The failure is silent. No error is raised, the page simply stays at its mobile values on every screen. A build step is required.
|
|
49
51
|
|
|
50
52
|
## What's included
|
|
51
53
|
|
package/docs/_index.md
CHANGED
|
@@ -40,7 +40,7 @@ npm install @uncinq/design-tokens @uncinq/component-tokens @uncinq/css-base @unc
|
|
|
40
40
|
```
|
|
41
41
|
|
|
42
42
|
```css
|
|
43
|
-
@layer reset, tokens, libs,
|
|
43
|
+
@layer reset, tokens, libs, base, vendors, layouts, components, pages, utilities;
|
|
44
44
|
|
|
45
45
|
@import '@uncinq/design-tokens'; /* @layer tokens */
|
|
46
46
|
@import '@uncinq/css-base'; /* @layer reset, base, layouts */
|
|
@@ -56,11 +56,13 @@ Per component, when you only need a few:
|
|
|
56
56
|
@import '@uncinq/css-components/css/utilities/scrollsnap.css';
|
|
57
57
|
```
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
### A CDN link is not enough
|
|
60
60
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
61
|
+
`@uncinq/design-tokens` and `@uncinq/component-tokens` can be linked straight from a CDN, because they emit nothing but custom properties. **This package cannot**, and neither can `@uncinq/css-base`.
|
|
62
|
+
|
|
63
|
+
Both ship `@media (--sm)` queries that rely on the `@custom-media` rules declared in `css-base/css/mediaqueries.css`, and no browser implements `@custom-media`. Loaded without [postcss-custom-media](https://www.npmjs.com/package/postcss-custom-media), 13 responsive blocks in this package are dropped: `.panel-inline-*`, `.panel-trigger-*` and every `.scrollsnap-*` variant.
|
|
64
|
+
|
|
65
|
+
The failure is silent. No error is raised, the page simply stays at its mobile values on every screen. A build step is required.
|
|
64
66
|
|
|
65
67
|
Note that `@uncinq/css-base` is a genuine prerequisite but is **not** declared in `peerDependencies`. Install it explicitly.
|
|
66
68
|
|
package/docs/cascade-layers.md
CHANGED
|
@@ -16,7 +16,7 @@ This package writes to two layers.
|
|
|
16
16
|
The full order, including layers owned by the sibling packages and by the project itself, is the **consuming project's** responsibility. Declare it once, at the very top of your entry stylesheet, before any `@import`:
|
|
17
17
|
|
|
18
18
|
```css
|
|
19
|
-
@layer reset, tokens, libs,
|
|
19
|
+
@layer reset, tokens, libs, base, vendors, layouts, components, pages, utilities;
|
|
20
20
|
```
|
|
21
21
|
|
|
22
22
|
CSS fixes a layer's position the first time its name is seen, and later re-declarations do not reorder it. If that line comes after an import, it is already too late. See [the css-base page](../../css-base/cascade-layers/) for the full explanation, including why `libs` and `vendors` are a pair.
|