Adding compatibility helper

eleventy.config.cjs

@@ -8,6 +8,7 @@ const markdown = require('markdown-it');
 const markdownDefList = require('markdown-it-deflist');
 const typogrify = require('typogr');
 const sass = require('sass');
+const { getImplStatus } = require('./source/helpers/sass_helpers.ts');
 
 /** @param {import('@11ty/eleventy').UserConfig} eleventyConfig */
 module.exports = (eleventyConfig) => {
@@ -65,6 +66,28 @@ module.exports = (eleventyConfig) => {
     page.url.startsWith('/documentation/js-api/'),
   );
 
+  eleventyConfig.addLiquidFilter(
+    'implStatus',
+    (
+      dart = null,
+      libsass = null,
+      ruby = null,
+      node = null,
+      feature = null,
+      markdown = null,
+    ) => {
+      const data = {
+        dart: getImplStatus(dart),
+        libsass: getImplStatus(libsass),
+        ruby: getImplStatus(ruby),
+        node: getImplStatus(node),
+        feature: feature,
+        markdown: markdown,
+      };
+      return data;
+    },
+  );
+
   eleventyConfig.addLiquidFilter(
     'codeExample',
     (contents, autogenCSS = true, syntax = null) => {

source/_includes/impl_status.liquid

@@ -0,0 +1,33 @@
+<dl class="impl-status sl-c-description-list sl-c-description-list--horizontal">
+<div class="compatibility">Compatibility{% if implStatusData.feature %} ({{ implStatusData.feature }}){% endif %}:</div>
+{% if implStatusData.dart %}
+<div>
+<dt>Dart Sass</dt>
+<dd>{{ implStatusData.dart }}</dd>
+</div>
+{% endif %}
+{% if implStatusData.libsass %}
+<div>
+<dt>LibSass</dt> 
+<dd>{{ implStatusData.libsass }}</dd> 
+</div>
+{% endif %}
+{% if implStatusData.ruby %}
+<div>
+<dt>Ruby Sass</dt> 
+<dd>{{ implStatusData.ruby }}</dd> 
+</div>
+{% endif %}
+{% if implStatusData.markdown %}
+<div><a href="javascript:;">▶</a></div>
+{% endif %}
+</dl>
+
+{% if implStatusData.markdown %} 
+<div class="sl-c-callout sl-c-callout--impl-status" style="display:none">
+{% markdown %}
+{{ implStatusData.markdown }}
+{% endmarkdown %}
+</div>
+{% endif  %}
+

source/guide.liquid

@@ -191,7 +191,10 @@ nav
 {% markdown %}
 
 ## Modules
-<!-- TODO compatibility snippet -->
+{% assign implStatusData =  "1.23.0" | implStatus: false, false, false, false, "Only Dart Sass currently supports `@use`. Users of other implementations must use the [`@import` rule][] instead.
+
+[`@import` rule]: /documentation/at-rules/import" %}
+{% render 'impl_status', implStatusData: implStatusData %}
 
 You don't have to write all your Sass in a single file. You can split it up however you want with the `@use` rule. This rule loads another Sass file as a _module_, which means you can refer to its variables, [mixins][], and [functions][] in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output! 
 

source/helpers/sass_helpers.ts

@@ -0,0 +1,16 @@
+function getImplStatus(status) {
+  switch (status) {
+    case null:
+      return status;
+    case true:
+      return '✓';
+    case false:
+      return '✗';
+    case 'partial':
+      return 'partial';
+    default:
+      return `since ${status}`;
+  }
+}
+
+module.exports = { getImplStatus };