Add unused properties (exercism#7848)

* Add unused properties

* Update configs

* Remove console log

---------

Co-authored-by: dem4ron <[email protected]>

Author: iHiD

app/javascript/components/bootcamp/CSSExercisePage/checks/css/illegalPropertiesUsed.ts

@@ -0,0 +1,25 @@
+import postcss from 'postcss'
+import postcssNested from 'postcss-nested'
+
+export async function illegalPropertiesUsed(
+  css: string,
+  allowed: string[]
+): Promise<string | null> {
+  const usedProps = new Set<string>()
+
+  const result = await postcss([postcssNested]).process(css, {
+    from: undefined,
+  })
+
+  result.root.walkDecls((decl) => {
+    usedProps.add(decl.prop)
+  })
+
+  for (const used of usedProps) {
+    if (!allowed.includes(used)) {
+      return used
+    }
+  }
+
+  return null
+}

app/javascript/components/bootcamp/CSSExercisePage/checks/runChecks.ts

@@ -11,7 +11,7 @@ export type ChecksResult = {
 
 export type Check = {
   function: string
-  matcher: 'toBeTrue' | 'toBeFalse'
+  matcher: 'toBeTrue' | 'toBeFalse' | 'toBeUndefined'
   errorHtml: string
 }
 
@@ -21,6 +21,9 @@ export function evaluateMatch(result: boolean, matcher: string): boolean {
       return result === true
     case 'toBeFalse':
       return result === false
+    case 'toBeUndefined':
+      return result === undefined || result === null
+
     default:
       throw new Error(`Unimplemented matcher: ${matcher}`)
   }
@@ -63,7 +66,9 @@ export async function runChecks(
       return {
         result,
         passes,
-        error_html: passes ? null : check.errorHtml,
+        error_html: passes
+          ? null
+          : check.errorHtml.replaceAll('%result%', result),
       }
     } catch (error: any) {
       return {

app/javascript/components/bootcamp/CSSExercisePage/checks/runCssChecks.ts

@@ -4,13 +4,15 @@ import {
 } from './css/elementHasProperty'
 import { onlyPropertyGroupsUsed } from './css/onlyPropertyGroupsUsed'
 import { onlyPropertiesUsed } from './css/onlyPropertiesUsed'
+import { illegalPropertiesUsed } from './css/illegalPropertiesUsed'
 import { Check, ChecksResult, runChecks } from './runChecks'
 
 const cssCheckFunctions: Record<string, Function> = {
   elementHasProperty,
   elementHasPropertyValue,
   onlyPropertyGroupsUsed,
   onlyPropertiesUsed,
+  illegalPropertiesUsed,
 }
 
 export async function runCssChecks(

bootcamp_content/projects/flexy-flags/exercises/flexy-armenia/config.json

@@ -9,9 +9,9 @@
   },
   "checks": [
     {
-      "function": "onlyPropertiesUsed(['background','display','flex-direction','flex-grow'])",
-      "matcher": "toBeTrue",
-      "errorHtml": "You used a CSS property that is not allowed for this exercise."
+      "function": "illegalPropertiesUsed(['background','display','flex-direction','flex-grow'])",
+      "matcher": "toBeUndefined",
+      "errorHtml": "You used a CSS property that is not allowed for this exercise (%result%)."
     }
   ]
 }

bootcamp_content/projects/flexy-flags/exercises/flexy-bangladesh/config.json

@@ -9,9 +9,9 @@
   },
   "checks": [
     {
-      "function": "onlyPropertiesUsed(['background','border-radius','display','justify-content','align-items','flex-basis','flex-grow','aspect-ratio'])",
-      "matcher": "toBeTrue",
-      "errorHtml": "You used a CSS property that is not allowed for this exercise."
+      "function": "illegalPropertiesUsed(['background','border-radius','display','justify-content','align-items','flex-basis','flex-grow','aspect-ratio'])",
+      "matcher": "toBeUndefined",
+      "errorHtml": "You used a CSS property that is not allowed for this exercise (%result%)."
     }
   ]
 }

bootcamp_content/projects/flexy-flags/exercises/flexy-benin/config.json

@@ -9,9 +9,9 @@
   },
   "checks": [
     {
-      "function": "onlyPropertiesUsed(['background','display','flex-basis','flex-direction','flex-grow'])",
-      "matcher": "toBeTrue",
-      "errorHtml": "You used a CSS property that is not allowed for this exercise."
+      "function": "illegalPropertiesUsed(['background','display','flex-basis','flex-direction','flex-grow'])",
+      "matcher": "toBeUndefined",
+      "errorHtml": "You used a CSS property that is not allowed for this exercise (%result%)."
     }
   ]
 }

bootcamp_content/projects/flexy-flags/exercises/flexy-botswana/config.json

@@ -16,9 +16,9 @@
   ],
   "checks": [
     {
-      "function": "onlyPropertiesUsed(['background','display','flex-basis','flex-direction','flex-grow','gap'])",
-      "matcher": "toBeTrue",
-      "errorHtml": "You used a CSS property that is not allowed for this exercise."
+      "function": "illegalPropertiesUsed(['background','display','flex-basis','flex-direction','flex-grow','gap'])",
+      "matcher": "toBeUndefined",
+      "errorHtml": "You used a CSS property that is not allowed for this exercise (%result%)."
     }
   ]
 }

bootcamp_content/projects/flexy-flags/exercises/flexy-cameroon/config.json

@@ -9,9 +9,9 @@
   },
   "checks": [
     {
-      "function": "onlyPropertiesUsed(['background','display','flex-basis','flex-grow','justify-content','align-items','width'])",
-      "matcher": "toBeTrue",
-      "errorHtml": "You used a CSS property that is not allowed for this exercise."
+      "function": "illegalPropertiesUsed(['background','display','flex-basis','flex-grow','justify-content','align-items','width'])",
+      "matcher": "toBeUndefined",
+      "errorHtml": "You used a CSS property that is not allowed for this exercise (%result%)."
     }
   ]
 }

bootcamp_content/projects/flexy-flags/exercises/flexy-denmark/config.json

@@ -9,9 +9,9 @@
   },
   "checks": [
     {
-      "function": "onlyPropertiesUsed(['background','display','flex-basis','flex-wrap','flex-grow','gap'])",
-      "matcher": "toBeTrue",
-      "errorHtml": "You used a CSS property that is not allowed for this exercise."
+      "function": "illegalPropertiesUsed(['background','display','flex-basis','flex-wrap','flex-grow','gap'])",
+      "matcher": "toBeUndefined",
+      "errorHtml": "You used a CSS property that is not allowed for this exercise (%result%)."
     }
   ]
 }

bootcamp_content/projects/flexy-flags/exercises/flexy-guinea/config.json

@@ -9,9 +9,9 @@
   },
   "checks": [
     {
-      "function": "onlyPropertiesUsed(['background','display','flex-direction','flex-grow'])",
-      "matcher": "toBeTrue",
-      "errorHtml": "You used a CSS property that is not allowed for this exercise."
+      "function": "illegalPropertiesUsed(['background','display','flex-direction','flex-grow'])",
+      "matcher": "toBeUndefined",
+      "errorHtml": "You used a CSS property that is not allowed for this exercise (%result%)."
     }
   ]
 }