style-dictionary 3.7.0 → 3.7.2

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/auto-rebuild-watcher/README.md

@@ -0,0 +1,31 @@
+## How to use a watcher to auto-rebuild
+
+This example shows how to use a "watcher" to rebuild automatically the files every time a token file is updated.
+
+This is quite handy when there are continuous changes to the token values (e.g. during development) and we want to avoid to run the "build" command at every update.
+
+#### Running the example
+
+First of all, set up the required dependencies running the command `npm install` in your local CLI environment (if you prefer to use *yarn*, update the commands accordingly).
+
+At this point, if you want to build once the tokens you can run `npm run build`. This command will generate the files in the `build` folder.
+
+If instead you want to automatically build the tokens every time a token file is updated, run the command `npm run watch` in your CLI.
+
+This will start to watch the files in the "tokens" folder, and whenever a file is updated and saved, the files in `build` are re-generated with the new/updated values.
+
+If you want to see it in action, open one of the files generated in "build", open a token file and update one of the values: you will see immediately updated also the generated file.
+
+**Important**: when in "watch" mode, to interrupt and exit the process and get back to your command line, use the `ctrl-c` command in your terminal.
+
+#### How does it work
+
+The "watch" runner will start a process (using a special filesystem watcher called [Chokidar](https://github.com/paulmillr/chokidar)) that will listen to changes to a list of "watched" files. Whenever one of this file is changed/updated (more precisely, is saved to disk) the watch process will trigger a command specified by the user (as an argument passed to the watcher).
+
+In this example, we have selected all the JSON files in the `tokens` folder (using the glob pattern `tokens/**/*.json`) but you can specify your own path of watched files.
+
+The command that we automatically run at every update is the `npm run build` command, passed as parameter to the watcher via `-c 'npm run build'`.
+
+#### What to look at
+
+Open the `package.json` file and see how in the "scripts" block there is an additional entry for "watch". This is the way the "watch" mode is invoked and run.

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/auto-rebuild-watcher/config.json

@@ -0,0 +1,69 @@
+{
+  "source": ["tokens/**/*.json"],
+  "platforms": {
+    "scss": {
+      "transformGroup": "scss",
+      "buildPath": "build/scss/",
+      "files": [{
+        "destination": "_variables.scss",
+        "format": "scss/variables"
+      }]
+    },
+    "android": {
+      "transformGroup": "android",
+      "buildPath": "build/android/",
+      "files": [{
+        "destination": "font_dimens.xml",
+        "format": "android/fontDimens"
+      },{
+        "destination": "colors.xml",
+        "format": "android/colors"
+      }]
+    },
+    "ios": {
+      "transformGroup": "ios",
+      "buildPath": "build/ios/",
+      "files": [{
+        "destination": "StyleDictionaryColor.h",
+        "format": "ios/colors.h",
+        "className": "StyleDictionaryColor",
+        "type": "StyleDictionaryColorName",
+        "filter": {
+          "attributes": {
+            "category": "color"
+          }
+        }
+      },{
+        "destination": "StyleDictionaryColor.m",
+        "format": "ios/colors.m",
+        "className": "StyleDictionaryColor",
+        "type": "StyleDictionaryColorName",
+        "filter": {
+          "attributes": {
+            "category": "color"
+          }
+        }
+      },{
+        "destination": "StyleDictionarySize.h",
+        "format": "ios/static.h",
+        "className": "StyleDictionarySize",
+        "type": "float",
+        "filter": {
+          "attributes": {
+            "category": "size"
+          }
+        }
+      },{
+        "destination": "StyleDictionarySize.m",
+        "format": "ios/static.m",
+        "className": "StyleDictionarySize",
+        "type": "float",
+        "filter": {
+          "attributes": {
+            "category": "size"
+          }
+        }
+      }]
+    }
+  }
+}

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/auto-rebuild-watcher/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "style-dictionary-auto-rebuild-watcher",
+  "version": "1.0.0",
+  "description": "",
+  "main": "build/index.js",
+  "files": [
+    "build",
+    "properties"
+  ],
+  "scripts": {
+    "build": "node_modules/.bin/style-dictionary build",
+    "clean": "rm -rf build",
+    "watch": "npm run build && chokidar  \"tokens/**/*.json\" -c \"npm run build\"",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "chokidar-cli": "^1.2.0",
+    "style-dictionary": "3.7.1"
+  }
+}

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/auto-rebuild-watcher/tokens/color/base.json

@@ -0,0 +1,13 @@
+{
+  "color": {
+    "base": {
+      "gray": {
+        "light" : { "value": "#CCCCCC" },
+        "medium": { "value": "#999999" },
+        "dark"  : { "value": "#111111" }
+      },
+      "red": { "value": "#FF0000" },
+      "green": { "value": "#00FF00" }
+    }
+  }
+}

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/auto-rebuild-watcher/tokens/color/font.json

@@ -0,0 +1,9 @@
+{
+  "color": {
+    "font": {
+      "base"     : { "value": "{color.base.red.value}" },
+      "secondary": { "value": "{color.base.green.value}" },
+      "tertiary" : { "value": "{color.base.gray.light.value}" }
+    }
+  }
+}

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/auto-rebuild-watcher/tokens/size/font.json

@@ -0,0 +1,22 @@
+{
+  "size": {
+    "font": {
+      "small" : {
+        "value": "0.75",
+        "comment": "the small size of the font"
+      },
+      "medium": {
+        "value": "1",
+        "comment": "the medium size of the font"
+      },
+      "large" : {
+        "value": "2",
+        "comment": "the large size of the font"
+      },
+      "base"  : {
+        "value": "{size.font.medium.value}",
+        "comment": "the base size of the font"
+      }
+    }
+  }
+}

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/component-cti/README.md

@@ -0,0 +1,89 @@
+## Component CTI Structure
+
+This example will show you one way to define component tokens in a simple way while still using the CTI attributes for transforming the tokens. The CTI structure for Style Dictionary tokens makes defining component-level tokens cumbersome and not user-friendly. This is because the CTI of tokens is based on the object path of the token. Now, if you wanted to write tokens for a button component it would have to look something like this:
+
+```json
+{
+  "size": {
+    "padding" : {
+      "button": { "value": "{size.padding.base.value}" }
+    },
+    "font": {
+      "button": { "value": 2 }
+    }
+  },
+
+  "color": {
+    "font": {
+      "button": {
+        "primary": { "value": "{color.font.inverse.value}" },
+        "secondary": { "value": "{color.font.link.value}" }
+      }
+    },
+
+    "background": {
+      "button": {
+        "primary": { "value": "hsl(10, 80, 50)" },
+        "secondary": { "value": "{color.background.primary.value}" }
+      }
+    }
+  }
+}
+```
+
+Instead, when defining component tokens it makes more sense to structure them more like CSS. `component.button.background-color` makes more sense than `color.background.button`. Here is what the component tokens would look like in this new structure:
+
+```json
+{
+  "component": {
+    "button": {
+      "padding": { "value": "{size.padding.medium.value}" },
+      "font-size": { "value": 2 },
+      
+      "primary": {
+        "background-color": { "value": "hsl(10, 80, 50)" },
+        "color": { "value": "{color.font.inverse.value}" }
+      },
+      
+      "secondary": {
+        "background-color": { "value": "{color.background.primary.value}" },
+        "color": { "value": "{color.font.link.value}" }
+      }
+    }
+  }
+}
+```
+
+### Running the example
+
+First of all, set up the required dependencies running the command `npm install` in your local CLI environment (if you prefer to use *yarn*, update the commands accordingly).
+
+At this point, if you want to build the tokens run `npm run build`. This command will generate the files in the `build` folder.
+
+
+### How does it work
+
+All of the built-in transforms target tokens using the CTI attributes. The built-in [`attribute/cti`](https://amzn.github.io/style-dictionary/#/transforms?id=attributecti) transform adds the CTI attributes to each token based on the object path of the token. In this example we override the default behavior of the [`attribute/cti`](https://amzn.github.io/style-dictionary/#/transforms?id=attributecti) transform to apply CTI attributes based on token's key, or last part of the object path to generate the equivalent category and type. This way we can correctly map a token with an object path of `component.button.background-color` to a category of `color` and type of `background`. 
+
+Style Dictionary allows for extensibility through [monkey patching](https://en.wikipedia.org/wiki/Monkey_patch). This allows you to override the default behavior of the Style Dictionary library, and any built-in transforms and formats. You can override built-in transforms and formats by adding ones with the same name. Also, all of the built-in transforms, transformGroups, and formats are available by accessing them in the Style Dictionary library under the attributes `transform`, `transformGroup`, and `format` respectively. For example:
+
+```javascript
+const StyleDictionary = require('style-dictionary');
+
+const cti = StyleDictionary.transform['attribute/cti'];
+// {
+//   type: 'attribute',
+//   transformer: f () {}
+// }
+```
+
+In this example we monkey patch the `attribute/cti` transform to look at the top-level namespace of the token and if it is 'component', instead of running the default `attribute/cti` transform, it instead looks at the last part of the object path to generate the equivalent category and type.
+
+For example, if the key of the token (the last part of the object path) is "background-color", the monkey patched `attribute/cti` transform will return a category of 'color' and type of 'background'. This example uses CSS property names, but you could also change it to use similar React/CSS-in-JS names like 'backgroundColor' instead of 'background-color'.
+
+### What to look at
+
+* `config.js`:
+  * `propertiesToCTI`: A plain object where we map the CSS property name to the proper category and type.
+  * `CTITransform`: A transform object that defines a transformer method, which will override the default `attribute/cti` transform. This is similar to creating a child class with some custom logic and then calling `super`. In the transformer function it first looks at the top-level namespace, the first item in the object path, and if it is 'component' we run our custom logic using the `propertiesToCTI` map. If it is not 'component', use the built-in `attribute/cti`.
+* `tokens/component/button.json`: Take a look at how it defines the component tokens and uses the last part of the object path as the CSS property. Notice how we can define token values in here that are not references, but they still get transformed properly: font-size uses 'rem' and background-color uses hex in the output.

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/component-cti/config.js

@@ -0,0 +1,71 @@
+const StyleDictionary = require('style-dictionary');
+const transformer = StyleDictionary.transform['attribute/cti'].transformer;
+
+const propertiesToCTI = {
+  'width': {category: 'size', type: 'dimension'},
+  'min-width': {category: 'size', type: 'dimension'},
+  'max-width': {category: 'size', type: 'dimension'},
+  'height': {category: 'size', type: 'dimension'},
+  'min-height': {category: 'size', type: 'dimension'},
+  'max-height': {category: 'size', type: 'dimension'},
+  'border-width': {category: 'size', type: 'border', item: 'width'},
+  'border-radius': { category: 'size', type: 'border', item: 'width' },
+  'border-color': {category: 'color', type: 'border'},
+  'background-color': {category: 'color', type: 'background'},
+  'color': {category: 'color', type: 'font'},
+  'text-color': { category: 'color', type: 'font' },
+  'padding': {category: 'size', type: 'padding'},
+  'padding-vertical': {category: 'size', type: 'padding'},
+  'padding-horizontal': {category: 'size', type: 'padding'},
+  'icon': {category: 'content', type: 'icon'},
+  'font-size': {category: 'size', type: 'font'},
+  'line-height': { category: 'size', type: 'line-height' },
+  'size': {category: 'size', type: 'icon'}
+}
+
+const CTITransform = {
+  type: `attribute`,
+  transformer: (prop) => {
+    // Only do this custom functionality in the 'component' top-level namespace.
+    if (prop.path[0] === 'component') {
+      // When defining component tokens, the key of the token is the relevant CSS property
+      // The key of the token is the last element in the path array
+      return propertiesToCTI[prop.path[prop.path.length - 1]];
+    } else {
+      // Fallback to the original 'attribute/cti' transformer
+      return transformer(prop);
+    }
+  }
+}
+
+// We can call .registerTransform here
+// or apply the custom transform directly in the configuration below
+//
+// StyleDictionary.registerTransform({
+//   name: 'attribute/cti',
+//   type: 'attribute',
+//   transformer: CTITransform.transformer
+// });
+
+module.exports = {
+  // Rather than calling .registerTransform() we can apply the new transform
+  // directly in our configuration. Using .registerTransform() with the same
+  // transform name, 'attribute/cti', would work as well.
+  transform: {
+    // Override the attribute/cti transform
+    'attribute/cti': CTITransform
+  },
+  source: ['tokens/**/*.json'],
+  platforms: {
+    scss: {
+      // We can still use this transformGroup because we are overriding
+      // the underlying transform
+      transformGroup: "scss",
+      buildPath: 'build/',
+      files: [{
+        destination: 'variables.scss',
+        format: 'scss/variables'
+      }]
+    }
+  }
+}

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/component-cti/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "style-dictionary-component-cti",
+  "version": "1.0.0",
+  "description": "",
+  "main": "build/index.js",
+  "files": [
+    "build",
+    "properties"
+  ],
+  "scripts": {
+    "build": "style-dictionary build --config ./config.js",
+    "clean": "rm -rf build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "style-dictionary": "3.7.1"
+  }
+}

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/component-cti/tokens/color/background.json

@@ -0,0 +1,9 @@
+{
+  "color": {
+    "background": {
+      "primary": { "value": "#ffffff" },
+      "link": { "value": "#0366d6" },
+      "inverse": { "value": "#111111" }
+    }
+  }
+}

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/component-cti/tokens/color/core.json

@@ -0,0 +1,10 @@
+{
+  "color": {
+    "core": {
+      "white": { "value": "#ffffff" },
+      "black": { "value": "#111111" },
+      "gray": { "value": "#dddddd" },
+      "blue": { "value": "#0366d6" }
+    }
+  }
+}

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/component-cti/tokens/color/font.json

@@ -0,0 +1,9 @@
+{
+  "color": {
+    "font": {
+      "primary": { "value": "{color.core.black.value}" },
+      "link": { "value": "{color.core.blue.value}" },
+      "inverse": { "value": "{color.core.white.value}" }
+    }
+  }
+}

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/component-cti/tokens/component/button.json

@@ -0,0 +1,19 @@
+{
+  "component": {
+    "button": {
+      "padding": { "value": "{size.padding.medium.value}" },
+      "font-size": { "value": 2 },
+      "text-align": { "value": "center" },
+      
+      "primary": {
+        "background-color": { "value": "hsl(10, 80, 50)" },
+        "color": { "value": "{color.font.inverse.value}" }
+      },
+      
+      "secondary": {
+        "background-color": { "value": "{color.background.primary.value}" },
+        "color": { "value": "{color.font.link.value}" }
+      }
+    }
+  }
+}

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/component-cti/tokens/size/font.json

@@ -0,0 +1,9 @@
+{
+  "size": {
+    "font": {
+      "small": { "value": 0.75 },
+      "medium": { "value": 1 },
+      "large": { "value": 1.5 }
+    }
+  }
+}

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/component-cti/tokens/size/padding.json

@@ -0,0 +1,9 @@
+{
+  "size": {
+    "padding": {
+      "small": { "value": 0.5 },
+      "medium": { "value": 1 },
+      "large": { "value": 2 }
+    }
+  }
+}

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/create-react-app/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/create-react-app/README.md

@@ -0,0 +1,56 @@
+## How to consume Style Dictionary properties in React
+
+This example shows how to consume design tokens, generated via Style Dictionary, in a React application. 
+
+To setup the app we have used [Create React App](https://facebook.github.io/create-react-app/) (CRA); we then have added to the default page three similar components, styled via [Sass](http://sass-lang.com/), [CSS Modules](https://github.com/css-modules/css-modules) and [Styled Components](https://www.styled-components.com). The CSS for these three different stylings is consuming the same set of tokens generated from design properties.
+
+#### Running the example
+
+First of all, set up the required dependencies running the command `npm install` in your local CLI environment (if you prefer to use *yarn*, update the commands accordingly).
+
+At this point, if you want to build the tokens and launch the React application, you can run `npm run start`. This command will first generate the tokens files, then compile the React application, and finally launch the local web server and open the application in a browser window.
+
+This is what you should see:
+
+<img alt="screenshot of the React application" src="README.media/react-app-screenshot.png" />
+
+If instead you want to build the tokens only, you can run `npm run build-dictionary`. This command will generate the files in the `src/style-dictionary-dist` folder, inside the CRA source folder.
+
+**Important**: the file `.env` in this folder is to have CRA run inside another project; if want to use this example as standalone codebase please remove it.
+
+
+#### What to look at
+
+In the **`style-dictionary`** folder you can find the properties files (`color/font/spacing.json`) and the configuration file (`config.json`) used by Style Dictionary to build the design tokens.
+
+In the **`src`** folder you can find the source files of the React application created via CRA. These files have been modified and updated to contain three different examples of components, each one styled in a different way, but all consuming the same set of tokens.
+
+The file **`App.js`** is the main app file. You can see the three component in the code:
+
+```
+<main>
+    <ComponentWithSass />
+    <ComponentWithStyledComponents />
+    <ComponentWithCssModules />
+</main>
+```
+
+The folder `components` contains the code for the three components used in the app:
+
+- The **`components/with-sass`** folder contains the example React component, styled using CSS/Sass. Look at how the design tokens are consumed inside the Sass file as Sass variables. The Sass file is then imported in the component which will be compiled to CSS at build time and included in the resulting web app page.
+
+- The **`components/with-css-modules`** folder contains the example React component, styled using CSS Modules. Look at how the styles are imported in the component, and the class names are applied to the HTML elements. The CSS styles are declared in Sass by which the design tokens can be consumed directly as Sass variables.<br>*If you want to know more about how CSS Modules works with React, and how it applies CSS styles to the JSX elements, [please refer to the documentation](https://github.com/css-modules/css-modules/blob/master/docs/css-modules-with-react.md).*
+
+* The **`components/with-styled-components`** folder contains the example React component, styled using Styled Components. Look at how in this case the styles are declared directly in the component, as template literal "objects", and how the design tokens are consumed as JavaScript variables.<br>*If you want to know more about how Styled Components works, and how it applies CSS styles to the HTML elements, [please refer to the documentation](https://www.styled-components.com/docs/basics#getting-started).*
+
+--
+
+
+### Some useful links
+
+- [Official documentation for Create React App](https://github.com/facebook/create-react-app)
+- [How to use Sass and CSS Modules with create-react-app
+](https://blog.bitsrc.io/how-to-use-sass-and-css-modules-with-create-react-app-83fa8b805e5e)
+- [CSS Modules and create-react-app](https://www.robinwieruch.de/create-react-app-css-modules/)
+- [Getting started with Styled Components and Create React App](https://medium.com/styled-components/styled-components-getting-started-c9818acbcbbd)
+- [How do I use styled-components with create-react-app?](https://www.styled-components.com/docs/faqs#how-do-i-use-styledcomponents-with-createreactapp)

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/create-react-app/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "style-dictionary-create-react-app",
+  "description": "",
+  "version": "1.0.0",
+  "dependencies": {
+    "node-sass": "^7.0.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "^4.0.3",
+    "styled-components": "^5.3.0"
+  },
+  "devDependencies": {
+    "style-dictionary": "3.7.1"
+  },
+  "resolutions": {
+    "immer": "8.0.1",
+    "is-svg": ">=4.2.2",
+    "ssri": ">=8.0.1"
+  },
+  "scripts": {
+    "preinstall": "npx npm-force-resolutions",
+    "build-dictionary": "style-dictionary build --config ./style-dictionary/config.json",
+    "start": "npm run build-dictionary && react-scripts start",
+    "build": "npm run build-dictionary && react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "license": "Apache-2.0"
+}

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/create-react-app/public/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/create-react-app/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/examples/advanced/custom-file-header/node_modules/style-dictionary/examples/advanced/create-react-app/src/App.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.scss';
+
+// custom components for demo
+import ComponentWithSass from './components/with-sass/ComponentWithSass';
+import ComponentWithStyledComponents from './components/with-styled-components/ComponentWithStyledComponents';
+import ComponentWithCssModules from './components/with-css-modules/ComponentWithCssModules';
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <header className="App-header">
+          <a href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
+            <img className="App-logo" src={logo} alt="React logo" />
+          </a>
+          <div>
+            <h3 className="App-description">
+              This app is built with Create React App (CRA)
+            </h3>
+            <code>More information about CRA: <a href="https://github.com/facebook/create-react-app" target="_blank" rel="noopener noreferrer">github.com/facebook/create-react-app</a></code>
+          </div>
+        </header>
+        <main>
+          <ComponentWithSass />
+          <ComponentWithStyledComponents />
+          <ComponentWithCssModules />
+        </main>
+      </div>
+    );
+  }
+}
+
+export default App;