diff --git a/docs/content/features.md b/docs/content/features.md index 6dc33a5..4d2fc8a 100644 --- a/docs/content/features.md +++ b/docs/content/features.md @@ -18,7 +18,7 @@ depending on your browser scope) using **[autoprefixer](https://github.com/postcss/autoprefixer)**). -## custom properties & `var()` +## custom properties & `var()` The current transformation for custom properties aims to provide a future-proof way of using a **limited subset (to top-level `:root` selector)** @@ -42,6 +42,30 @@ might happen). | [Plugin documentation](https://github.com/postcss/postcss-custom-properties) +## custom properties set & `@apply` + +Allows you to store a set of properties in a named variable, then reference them +in other style rules. + +```css +:root { + --danger-theme: { + color: white; + background-color: red; + }; +} + +.danger { + @apply --danger-theme; +} +``` + +(The same DOM restrictions as the custom properties plugin apply). + +[Specification](https://tabatkins.github.io/specs/css-apply-rule) +| +[Plugin documentation](https://github.com/pascalduez/postcss-apply) + ## reduced `calc()` Allows you to use safely calc with custom properties by optimizing previously diff --git a/docs/content/index.md b/docs/content/index.md index 513859d..88af42f 100644 --- a/docs/content/index.md +++ b/docs/content/index.md @@ -51,7 +51,10 @@ title: cssnext - Use tomorrow’s CSS syntax, today. automatic vendor prefixes
var()
+ custom properties & var()
+ @apply
calc()
diff --git a/docs/content/playground.html b/docs/content/playground.html
index a288eb6..95a2ee6 100644
--- a/docs/content/playground.html
+++ b/docs/content/playground.html
@@ -16,6 +16,19 @@
--highlightColor: hwb(190, 35%, 20%);
}
+/* custom properties set & @apply rule */
+:root {
+ --centered: {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ };
+}
+
+.centered {
+ @apply --centered;
+}
+
/* custom media queries */
@custom-media --viewport-medium (width <= 50rem);
@@ -65,7 +78,7 @@
/* overflow-wrap fallback */
body {
-overflow-wrap: break-word;
+overflow-wrap: break-word;
}
diff --git a/package.json b/package.json
index 963bf5d..78383a3 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
"pixrem": "^3.0.0",
"pleeease-filters": "^3.0.0",
"postcss": "^5.0.4",
+ "postcss-apply": "^0.3.0",
"postcss-calc": "^5.0.0",
"postcss-color-function": "^2.0.0",
"postcss-color-gray": "^3.0.0",
diff --git a/src/__tests__/fixtures/features/apply-rule.css b/src/__tests__/fixtures/features/apply-rule.css
new file mode 100644
index 0000000..f2f8531
--- /dev/null
+++ b/src/__tests__/fixtures/features/apply-rule.css
@@ -0,0 +1,10 @@
+:root {
+ --foo-set: {
+ color: tomato;
+ content: 'foo';
+ };
+}
+
+.foo {
+ @apply --foo-set;
+}
diff --git a/src/__tests__/fixtures/features/apply-rule.expected.css b/src/__tests__/fixtures/features/apply-rule.expected.css
new file mode 100644
index 0000000..f6f4aa3
--- /dev/null
+++ b/src/__tests__/fixtures/features/apply-rule.expected.css
@@ -0,0 +1,4 @@
+.foo {
+ color: tomato;
+ content: 'foo';
+}
diff --git a/src/features.js b/src/features.js
index bf23960..5074a8b 100644
--- a/src/features.js
+++ b/src/features.js
@@ -9,6 +9,9 @@ export default {
// https://npmjs.com/package/postcss-custom-properties
customProperties: (options) => require("postcss-custom-properties")(options),
+ // https://npmjs.com/package/postcss-apply
+ applyRule: (options) => require("postcss-apply")(options),
+
// https://npmjs.com/package/postcss-calc
calc: (options) => require("postcss-calc")(options),