feat: Add css code block support (#114)

* feat: add CSS code block support

* update the extract fiddle spec

Author: bahmutov

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.

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 -->

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,

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,