From 723ed1d908a2217727f06ec54bc5095395baaa08 Mon Sep 17 00:00:00 2001
From: Sana Javed <sanajaved7@gmail.com>
Date: Sat, 25 Feb 2023 13:44:14 +0100
Subject: [PATCH] Adding compatibility helper

---
 eleventy.config.cjs                 | 23 ++++++++++++++++++++
 source/_includes/impl_status.liquid | 33 +++++++++++++++++++++++++++++
 source/guide.liquid                 |  5 ++++-
 source/helpers/sass_helpers.ts      | 16 ++++++++++++++
 4 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 source/_includes/impl_status.liquid
 create mode 100644 source/helpers/sass_helpers.ts

diff --git a/eleventy.config.cjs b/eleventy.config.cjs
index 83b4749..5eefcba 100644
--- a/eleventy.config.cjs
+++ b/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) => {
diff --git a/source/_includes/impl_status.liquid b/source/_includes/impl_status.liquid
new file mode 100644
index 0000000..7329580
--- /dev/null
+++ b/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  %}
+
diff --git a/source/guide.liquid b/source/guide.liquid
index 7c99a9a..50bd644 100644
--- a/source/guide.liquid
+++ b/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! 
 
diff --git a/source/helpers/sass_helpers.ts b/source/helpers/sass_helpers.ts
new file mode 100644
index 0000000..01cb30f
--- /dev/null
+++ b/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 };