Merge branch 'master' of https://github.com/BilelJegham/storybook-des…

…ign-token into BilelJegham-master

README.md

@@ -56,7 +56,8 @@ export const parameters = {
 };
 ```
 
-The last step is to annotate your design tokens with a category name and a presenter. You can do this by adding special comment blocks to your stylesheets. Below is an example of a css stylesheet defining two categories ("Animations" and "Colors"). It works the same way for scss and less files.
+The last step is to annotate your design tokens with a category name and a presenter. You can do this by adding special comment blocks to your stylesheets. Below is an example of a css stylesheet defining three categories ("Animations", "Colors", "Others"). It works the same way for scss and less files.
+
 
 ```css
 :root {
@@ -72,9 +73,15 @@ The last step is to annotate your design tokens with a category name and a prese
   * @presenter Color
   */
 
-  --b100: hsl(240, 100%, 90%); /* Token Description Example */
+  --b100: hsl(240, 100%, 90%); /* Token Description Example  @presenter Color */
   --b200: hsl(240, 100%, 80%);
   --b300: hsl(240, 100%, 70%);
+
+  /**
+  * @tokens Others
+  */
+  --border-normal: 3px dashed red;/* Token Description Example @presenter BorderRadius */
+
 }
 ```
 

addon/src/parsers/postcss.parser.ts

@@ -109,14 +109,25 @@ function determineTokensForCategory(
     const description = comments.find(
       (comment) => comment.source?.start?.line === declaration.source?.end?.line
     );
-
     const value = determineTokenValue(declaration.value, declarations);
+    let presenterToken: TokenPresenter | undefined;
+
+    if(description){
+      const presenterResultsToken = /@presenter (.+)/g.exec(description.text);
+      if (presenterResultsToken){
+        presenterToken = presenterResultsToken[1] as TokenPresenter;
+        description.text = description.text.replace(
+          presenterResultsToken[0] || '',
+          ''
+        );
+      }
+    }
 
     return {
       description: description?.text,
       isAlias: value !== declaration.value,
       name: declaration.prop,
-      presenter,
+      presenter: presenterToken|| presenter,
       rawValue: declaration.value,
       sourceType,
       value
@@ -139,6 +150,8 @@ function determineTokenValue(
     referencedVariableResult?.[5] ||
     referencedVariableResult?.[7];
 
+
+
   if (referencedVariable) {
     const value =
       declarations.find(

demo/src/tokens.css

@@ -119,6 +119,13 @@
   */
 
   --z-index: 1000;
+
+
+  /**
+  * @tokens Others
+  */
+  --border-normal: 3px dashed red;/* Token Description Example @presenter Border */
+
 }
 
 @keyframes rotate {