From 55bacd061a844a3f1bef5609f5a88ebc819fc4fa Mon Sep 17 00:00:00 2001
From: Gleb Bahmutov <gleb.bahmutov@gmail.com>
Date: Thu, 11 Aug 2022 11:32:47 -0400
Subject: [PATCH 1/2] feat: add CSS code block support

---
 README.md                             | 22 ++++++++++++++++++++++
 cypress/integration/css-code-block.md | 21 +++++++++++++++++++++
 src/markdown-utils.js                 | 10 ++++++++++
 3 files changed, 53 insertions(+)
 create mode 100644 cypress/integration/css-code-block.md

diff --git a/README.md b/README.md
index aab6531..9c09ee6 100644
--- a/README.md
+++ b/README.md
@@ -110,6 +110,28 @@ You can hide the HTML code block from the source view, yet still have it part of
 
     <!-- fiddle-end -->
 
+### CSS block
+
+You can add CSS to be applied to the HTML application. The CSS block is not shown on the output page.
+
+    <!-- fiddle CSS Code block -->
+    ```html
+    <div id="greeting">Hello</div>
+    ```
+    ```css
+    #greeting {
+    color: #f0f;
+    padding: 1rem;
+    font-weight: bold;
+    }
+    ```
+    ```js
+    cy.get('div#greeting')
+    .should('have.text', 'Hello')
+    .and('have.css', 'color', 'rgb(255, 0, 255)')
+    ```
+    <!-- fiddle-end -->
+
 ### Suites
 
 To create suites of tests, use `/` to separate the suite name from the test name. Tests with the same suite name are grouped together automatically.
diff --git a/cypress/integration/css-code-block.md b/cypress/integration/css-code-block.md
new file mode 100644
index 0000000..1bc1e6b
--- /dev/null
+++ b/cypress/integration/css-code-block.md
@@ -0,0 +1,21 @@
+<!-- fiddle CSS Code block -->
+
+```html
+<div id="greeting">Hello</div>
+```
+
+```css
+#greeting {
+  color: #f0f;
+  padding: 1rem;
+  font-weight: bold;
+}
+```
+
+```js
+cy.get('div#greeting')
+  .should('have.text', 'Hello')
+  .and('have.css', 'color', 'rgb(255, 0, 255)')
+```
+
+<!-- fiddle-end -->
diff --git a/src/markdown-utils.js b/src/markdown-utils.js
index 7a12976..030256c 100644
--- a/src/markdown-utils.js
+++ b/src/markdown-utils.js
@@ -260,12 +260,21 @@ function extractFiddles(md) {
   const isJavaScript = (n) =>
     n.type === 'CodeBlock' &&
     (n.lang === 'js' || n.lang === 'javascript')
+  const isCssCodeBlock = (n) =>
+    n.type === 'CodeBlock' && n.lang === 'css'
 
   fiddles.forEach((fiddle) => {
     const ast = parse(fiddle.fiddle)
     // console.log('markdown fiddle AST')
     // console.log(ast)
 
+    const cssMaybe = ast.children
+      .filter(isCssCodeBlock)
+      .filter(shouldIncludeBlock)
+      .map((codeBlock) => codeBlock.value)
+      .join('\n')
+    // console.log(cssMaybe)
+
     const htmlMaybe = ast.children
       .filter(isHtmlCodeBlock)
       .filter(shouldIncludeBlock)
@@ -313,6 +322,7 @@ function extractFiddles(md) {
           ? htmlMaybe
           : null,
         commonHtml,
+        css: cssMaybe || null,
         only: fiddle.only,
         skip: fiddle.skip,
         export: fiddle.export,

From 5f6cb3bda94f57a7d098df34c76e8ece7b9401d6 Mon Sep 17 00:00:00 2001
From: Gleb Bahmutov <gleb.bahmutov@gmail.com>
Date: Thu, 11 Aug 2022 11:36:06 -0400
Subject: [PATCH 2/2] update the extract fiddle spec

---
 cypress/integration/extract-fiddles.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/cypress/integration/extract-fiddles.js b/cypress/integration/extract-fiddles.js
index d4ff867..10bbed8 100644
--- a/cypress/integration/extract-fiddles.js
+++ b/cypress/integration/extract-fiddles.js
@@ -129,6 +129,7 @@ describe('extractFiddles', () => {
           test: "console.log('1')",
           html: null,
           commonHtml: null,
+          css: null,
           only: false,
           skip: false,
           export: false,
@@ -161,6 +162,7 @@ describe('extractFiddles', () => {
         },
       ],
       commonHtml: null,
+      css: null,
       only: false,
       skip: false,
       export: false,
@@ -182,6 +184,7 @@ describe('extractFiddles', () => {
         },
       ],
       commonHtml: null,
+      css: null,
       only: false,
       skip: false,
       export: false,