├── .babelrc
├── .editorconfig
├── .gitignore
├── .npmrc
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── .stylelintignore
├── .stylelintrc
├── .travis.yml
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── package.json
├── src
    ├── images
    │   └── favicon.ico
    ├── markup
    │   └── index.html.ejs
    ├── scripts
    │   ├── charts
    │   │   └── index.js
    │   ├── fontLoader.js
    │   └── main.js
    └── styles
    │   ├── _animations.css
    │   ├── _charts.css
    │   ├── _content-block.css
    │   ├── _elements.css
    │   ├── _form.css
    │   ├── _header.css
    │   ├── _variables.css
    │   ├── _wrapper.css
    │   ├── main.css
    │   └── vendor
    │       └── _normalize.css
├── webpack.config.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["@babel/preset-env"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | .vscode/
3 | 
4 | dist/
5 | node_modules/
6 | 
7 | .DS_Store
8 | package-lock.json
9 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 10
2 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | .vscode/
3 | 
4 | package-lock.json
5 | 
6 | build/
7 | dist/
8 | node_modules/
9 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "http://json.schemastore.org/prettierrc",
 3 |   "printWidth": 100,
 4 |   "tabWidth": 2,
 5 |   "useTabs": false,
 6 |   "semi": false,
 7 |   "singleQuote": true,
 8 |   "trailingComma": "all"
 9 | }
10 | 


--------------------------------------------------------------------------------
/.stylelintignore:
--------------------------------------------------------------------------------
1 | src/styles/vendor
2 | 


--------------------------------------------------------------------------------
/.stylelintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "plugins": [
 3 |     "stylelint-order"
 4 |   ],
 5 |   "extends": "stylelint-config-standard",
 6 |   "rules": {
 7 |     "at-rule-no-unknown": [
 8 |       true,
 9 |       {
10 |         ignoreAtRules: [
11 |           "mixin",
12 |           "include"
13 |         ]
14 |       }
15 |     ],
16 |     "number-leading-zero": "never",
17 |     "order/properties-alphabetical-order": true
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - 10
 4 | cache:
 5 |   directories:
 6 |   - node_modules
 7 | before_install:
 8 |   - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.9.4
 9 |   - export PATH="$HOME/.yarn/bin:$PATH"
10 | script:
11 |   - yarn build
12 | deploy:
13 |   provider: pages
14 |   skip_cleanup: true
15 |   github_token: $github_token
16 |   local_dir: dist
17 |   on:
18 |     branch: master
19 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
 6 | 
 7 | ## Our Standards
 8 | 
 9 | Examples of behavior that contributes to creating a positive environment include:
10 | 
11 | * Using welcoming and inclusive language
12 | * Being respectful of differing viewpoints and experiences
13 | * Gracefully accepting constructive criticism
14 | * Focusing on what is best for the community
15 | * Showing empathy towards other community members
16 | 
17 | Examples of unacceptable behavior by participants include:
18 | 
19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | * Trolling, insulting/derogatory comments, and personal or political attacks
21 | * Public or private harassment
22 | * Publishing others’ private information, such as a physical or electronic address, without explicit permission
23 | * Other conduct which could reasonably be considered inappropriate in a professional setting
24 | 
25 | ## Our Responsibilities
26 | 
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 | 
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 | 
31 | ## Scope
32 | 
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 | 
35 | ## Enforcement
36 | 
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at francesco.schwarz@posteo.de. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 | 
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project’s leadership.
40 | 
41 | ## Attribution
42 | 
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [https://contributor-covenant.org/version/1/4][version]
44 | 
45 | [homepage]: https://contributor-covenant.org
46 | [version]: https://contributor-covenant.org/version/1/4/
47 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | Pull requests go into the `master` branch. The `gh-pages` branch is a presentation of the `master` branch at the last given push.
 4 | 
 5 | ## Prerequisites
 6 | 
 7 | - You must have [**Node.js**](https://nodejs.org/) and [**Yarn**](https://yarnpkg.com/lang/en/) installed to run the *Specificity Visualizer* locally.
 8 | - Clone the repository with
 9 | `git clone https://github.com/isellsoap/specificity-visualizer.git`
10 | - Go into the folder with
11 | `cd specificity-visualizer`
12 | 
13 | ## Developing
14 | 
15 | - **`yarn start`** starts the application in development mode and continuously watches all files.
16 | 
17 | ## Building
18 | 
19 | - **`yarn build`** builds the application in production mode.
20 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2017 Francesco Schwarz
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 6 | 
 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 📈 Specificity Visualizer
 2 | 
 3 | [![Travis CI Build Status](https://travis-ci.org/isellsoap/specificity-visualizer.svg?branch=master)](https://travis-ci.org/isellsoap/specificity-visualizer)
 4 | 
 5 | A visual way to analyze the specificity of selectors in CSS.
 6 | 
 7 | - [Website](https://isellsoap.github.io/specificity-visualizer/)
 8 | - [Introductory blog post](https://francescoschwarz.com/articles/introducing-the-specificity-visualizer/)
 9 | - [Features](#features)
10 | - [Contributing](#contributing)
11 | - [Download](#download)
12 | 
13 | ---
14 | 
15 | The _Specificity Visualizer_ enables you to identify patterns, trends and inconsistencies across a CSS file in bird’s-eye view. It’s especially useful for analyzing big and complex stylesheets. The underlying concept of the [specificity graph](https://csswizardry.com/2014/10/the-specificity-graph/) has been coined by Harry Roberts.
16 | 
17 | ## Features
18 | 
19 | - 😍 It’s a pretty fun and nice visual experience and potentially changes the way how you look into and think about (your) stylesheets.
20 | - 🔍 Hover over single data points to see the exact selector or zoom into areas of interest, e.g. you can look at only the selectors of the first half of the file or you can zoom into all selectors with the specificity of `0,2,1` across the entire file.
21 | - 📊 To better distinguish different specificity categories the data points are using proper colors and forms. You can also click on a legend item to toggle its visibility, e.g. if you only want to see all ID selectors.
22 | - 📸️ Taking screenshots of the chart is great to track progress, e.g. you could save a snapshot of your stylesheet before and after a major refactoring to visualize the difference. Also, you could use it for presentations to effectively communicate to other developers and/or stakeholders.
23 | - 📏 Specificities are treated as proper categories on the `y` axis and aren’t simply “added up” (after all, no amount of class selectors can overrule an ID selector). Also, selectors inside of `@media`, `@supports` and `@document` blocks are counted, selectors inside of `@keyframes` blocks aren’t.
24 | 
25 | ## Contributing
26 | 
27 | Pull requests go into the `master` branch. The `gh-pages` branch is a presentation of the `master` branch at the last given push.
28 | 
29 | ### Prerequisites
30 | 
31 | - You must have [**Node.js**](https://nodejs.org/) and [**Yarn**](https://yarnpkg.com/lang/en/) installed to run the _Specificity Visualizer_ locally.
32 | - Clone the repository with
33 |   `git clone https://github.com/isellsoap/specificity-visualizer.git`
34 | - Go into the folder with
35 |   `cd specificity-visualizer`
36 | 
37 | ### Developing
38 | 
39 | - **`yarn start`** starts the application in development mode and continuously watches all files.
40 | 
41 | ### Building
42 | 
43 | - **`yarn build`** builds the application in production mode.
44 | 
45 | ## Download
46 | 
47 | You can simply [download the latest version of the website as a ZIP file](https://github.com/isellsoap/specificity-visualizer/archive/gh-pages.zip).
48 | 
49 | ## License
50 | 
51 | This repository is published under the [MIT license](https://github.com/isellsoap/specificity-visualizer/LICENSE.md).
52 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "specificity-visualizer",
 3 |   "repository": "isellsoap/specificity-visualizer",
 4 |   "author": "Francesco Schwarz",
 5 |   "description": "A visual way to analyze the specificity of selectors in CSS.",
 6 |   "homepage": "https://isellsoap.github.io/specificity-visualizer/",
 7 |   "bugs": {
 8 |     "url": "https://github.com/isellsoap/specificity-visualizer/issues"
 9 |   },
10 |   "license": "MIT",
11 |   "engines": {
12 |     "node": "10",
13 |     "yarn": ">= 1.9.4"
14 |   },
15 |   "browserslist": [
16 |     "IE >= 10"
17 |   ],
18 |   "scripts": {
19 |     "build": "yarn && cross-env NODE_ENV=production webpack",
20 |     "start": "yarn && cross-env NODE_ENV=development webpack-dev-server"
21 |   },
22 |   "dependencies": {
23 |     "highcharts": "6.1.2",
24 |     "javascript-natural-sort": "0.7.1",
25 |     "lodash": "4.17.10",
26 |     "normalize.css": "8.0.0",
27 |     "parsel-js": "^1.0.1",
28 |     "webfontloader": "1.6.28"
29 |   },
30 |   "devDependencies": {
31 |     "@babel/core": "7.0.0",
32 |     "@babel/preset-env": "7.0.0",
33 |     "@types/webpack": "4.4.11",
34 |     "autoprefixer": "9.1.5",
35 |     "babel-loader": "8.0.2",
36 |     "clean-webpack-plugin": "0.1.19",
37 |     "cross-env": "^5.2.0",
38 |     "css-loader": "1.0.0",
39 |     "html-webpack-plugin": "3.2.0",
40 |     "mini-css-extract-plugin": "0.4.2",
41 |     "postcss": "^8.2.8",
42 |     "postcss-custom-media": "^8.0.0",
43 |     "postcss-custom-properties": "^11.0.0",
44 |     "postcss-hexrgba": "^2.0.1",
45 |     "postcss-import": "^14.0.0",
46 |     "postcss-loader": "4.x",
47 |     "postcss-mixins": "^7.0.3",
48 |     "prettier": "^2.2.1",
49 |     "style-loader": "0.23.0",
50 |     "stylelint": "9.5.0",
51 |     "stylelint-config-standard": "18.2.0",
52 |     "stylelint-order": "1.0.0",
53 |     "stylelint-webpack-plugin": "0.10.5",
54 |     "terser-webpack-plugin": "^4.x",
55 |     "ts-node": "7.0.1",
56 |     "typescript": "3.0.3",
57 |     "webpack": "4.17.2",
58 |     "webpack-cli": "3.1.0",
59 |     "webpack-dev-server": "3.1.8"
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/src/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/isellsoap/specificity-visualizer/470c5b8c806b03df932c3d0f93aee335b242eb35/src/images/favicon.ico


--------------------------------------------------------------------------------
/src/markup/index.html.ejs:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" class="no-js">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <title>Specificity Visualizer</title>
  6 |     <link rel="shortcut icon" href="favicon.ico" />
  7 |     <meta http-equiv="x-ua-compatible" content="ie=edge" />
  8 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9 |     <link rel="canonical" href="https://isellsoap.github.io/specificity-visualizer/" />
 10 |     <script>
 11 |       // The following scripts are inline because they need to get executed as
 12 |       // fast as possible by the browser.
 13 | 
 14 |       // Immediately add the webfont class if Noto Sans has already been
 15 |       // loaded.
 16 |       ;(function () {
 17 |         if (sessionStorage.robotoMonoLoaded) {
 18 |           document.documentElement.classList.add('wf-active')
 19 |         }
 20 |       })()
 21 | 
 22 |       // Substitute the `o-Js-is-disabled` with the `o-Js-is-enabled` class on the `html` element.
 23 |       ;(function (H) {
 24 |         H.className = H.className.replace(/\bno-js\b/, 'js')
 25 |       })(document.documentElement)
 26 |     </script>
 27 |     <script
 28 |       src="<%= htmlWebpackPlugin.files.chunks['scripts/webfontloader'].entry %>"
 29 |       async
 30 |     ></script>
 31 |     <noscript>
 32 |       <link
 33 |         rel="stylesheet"
 34 |         href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i"
 35 |       />
 36 |     </noscript>
 37 |     <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>" />
 38 |   </head>
 39 |   <body>
 40 |     <header
 41 |       role="banner"
 42 |       class="header content-block content-block_highlighted content-block_narrow"
 43 |     >
 44 |       <div class="wrapper">
 45 |         <h1 class="header__title">📈 Specificity Visualizer</h1>
 46 |         <p class="header__text">
 47 |           A visual way to analyze the specificity of selectors in <abbr>CSS</abbr>.
 48 |         </p>
 49 |         <ul class="header__list">
 50 |           <li class="header__list-item">
 51 |             <a href="https://github.com/isellsoap/specificity-visualizer">GitHub</a>
 52 |           </li>
 53 |           <li class="header__list-item">
 54 |             <a href="https://francescoschwarz.com/articles/introducing-the-specificity-visualizer/"
 55 |               >Blog post</a
 56 |             >
 57 |           </li>
 58 |         </ul>
 59 |       </div>
 60 |     </header>
 61 |     <main role="main">
 62 |       <section class="content-block content-block_narrow">
 63 |         <div class="wrapper">
 64 |           <form action="./" accept-charset="utf-8" class="form js-form">
 65 |             <h2 class="content-block__title content-block__title_label">
 66 |               <label for="form-textarea"
 67 |                 ><span class="content-block__index-pointing-down">👇</span> Paste your CSS
 68 |                 here</label
 69 |               >
 70 |             </h2>
 71 |             <textarea
 72 |               id="form-textarea"
 73 |               class="form__textarea js-form-textarea"
 74 |               placeholder="Yep, right here."
 75 |               required
 76 |             ></textarea>
 77 |             <div class="form__button-group">
 78 |               <button class="form__button">Visualize it!</button>
 79 |               <p class="form__error form__error_hidden js-form-error">
 80 |                 💥 Please make sure to paste in valid <abbr>CSS</abbr>.
 81 |               </p>
 82 |             </div>
 83 |           </form>
 84 |         </div>
 85 |       </section>
 86 |       <section class="charts charts_hidden js-charts">
 87 |         <div class="wrapper wrapper_charts">
 88 |           <div class="charts__wrapper">
 89 |             <div class="charts__main-scatter-plot" id="js-specificity-graph"></div>
 90 |             <div class="charts__specificity-groups-column" id="js-specificity-groups-column"></div>
 91 |             <div class="charts__specificity-groups-pie" id="js-specificity-groups-pie"></div>
 92 |           </div>
 93 |         </div>
 94 |       </section>
 95 |       <section class="content-block content-block_highlighted" id="about-this-tool">
 96 |         <div class="wrapper">
 97 |           <h2 class="content-block__title">🌟 About this tool</h2>
 98 |           <p class="content-block__text">
 99 |             With the above tool you get a quick overview of selectors and their specificities across
100 |             a <abbr>CSS</abbr> file in bird’s-eye view.
101 |           </p>
102 |           <p class="content-block__text">
103 |             It’s a visual way to identify potentially problematic patterns and especially useful for
104 |             analyzing very big and complex stylesheets.
105 |           </p>
106 |           <p class="content-block__text">
107 |             Be sure to read the
108 |             <a href="https://francescoschwarz.com/articles/introducing-the-specificity-visualizer/"
109 |               >blog post introducing the <cite>Specificity Visualizer</cite></a
110 |             >.
111 |           </p>
112 |           <h3 class="content-block__subtitle">Main features and differences to other tools</h3>
113 |           <ul class="content-block__list">
114 |             <li>
115 |               🤩 It’s a pretty fun and nice visual experience and potentially changes the way how
116 |               you look into and think about your stylesheets.
117 |             </li>
118 |             <li>
119 |               🔍 Hover over single data points to see the exact selector or zoom into areas of
120 |               interest, e.g. you can look at only the selectors of the first half of the file or you
121 |               can zoom into all selectors with the specificity of <code>0,2,1</code> across the
122 |               entire file.
123 |             </li>
124 |             <li>
125 |               📊 To better distinguish different specificity categories the data points are using
126 |               proper colors and forms. You can also click on a legend item to toggle its visibility,
127 |               e.g. if you want to only see <abbr>ID</abbr> selectors.
128 |             </li>
129 |             <li>
130 |               📸️ Taking screenshots of the chart is great to track progress, e.g. you could save a
131 |               snapshot of your stylesheet before and after a major refactoring to visualize the
132 |               difference. Also, you could use it for presentations to effectively communicate to
133 |               other developers and/or stakeholders.
134 |             </li>
135 |             <li>
136 |               📏 Specificities aren’t simply “added up” but rather treated as proper categories.
137 |               After all, no amount of class selectors can overrule an <abbr>ID</abbr> selector.
138 |               Also, selectors inside of <code>@media</code>, <code>@supports</code> and
139 |               <code>@document</code> blocks are counted, selectors inside of
140 |               <code>@keyframes</code> blocks aren’t.
141 |             </li>
142 |           </ul>
143 |           <h3 class="content-block__subtitle">How to read the chart</h3>
144 |           <ul class="content-block__list">
145 |             <li>
146 |               The x-axis shows the physical location of selectors as they are written in the
147 |               <abbr>CSS</abbr>. On the left side is the first one, on the right side the last one.
148 |             </li>
149 |             <li>
150 |               The y-axis shows the specificity of selectors, beginning with the least specific one
151 |               at the bottom and ending with the most specific one at the top.
152 |             </li>
153 |           </ul>
154 |           <h3 class="content-block__subtitle">What is considered a “good” or “bad” graph?</h3>
155 |           <ul class="content-block__list">
156 |             <li>
157 |               First off, think of the chart more as a rough conceptual model and not as an exact
158 |               tool.
159 |             </li>
160 |             <li>
161 |               A spiky graph with an overall high specificity and high amount of noise can be
162 |               considered as potentially “bad”.
163 |             </li>
164 |             <li>
165 |               An upward-trending graph with overall low specificity and low amount of noise can be
166 |               considered potentially “good”.
167 |             </li>
168 |           </ul>
169 |           <p class="content-block__text">
170 |             Please be sure to read the
171 |             <a href="#additional-articles-on-this-topic">additional articles on this topic</a>.
172 |           </p>
173 |         </div>
174 |       </section>
175 | 
176 |       <section class="content-block" id="additional-articles-on-this-topic">
177 |         <div class="wrapper">
178 |           <h2 class="content-block__title">🤓 Additional articles on this topic</h2>
179 |           <p class="content-block__text">
180 |             Check out these resources if you want to dig deeper into how specificity graphs can help
181 |             you getting an overview of big stylesheets and what the reasoning behind it is:
182 |           </p>
183 |           <ul class="content-block__list">
184 |             <li>
185 |               If you are not sure what specificity in <abbr>CSS</abbr> is all about, be sure to read
186 |               the following articles:
187 |               <a
188 |                 href="https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/"
189 |                 ><cite><abbr>CSS</abbr> Specificity: Things You Should Know</cite></a
190 |               >
191 |               by Vitaly Friedman, and
192 |               <a href="https://www.smashingmagazine.com/2010/04/css-specificity-and-inheritance/"
193 |                 ><cite><abbr>CSS</abbr> Specificity And Inheritance</cite></a
194 |               >
195 |               by Inayaili de León.
196 |             </li>
197 |             <li>
198 |               <a href="https://csswizardry.com/2014/10/the-specificity-graph/"
199 |                 ><cite>The Specificity Graph</cite></a
200 |               >
201 |               by Harry Roberts
202 |             </li>
203 |             <li>
204 |               <a href="https://snook.ca/archives/html_and_css/specificity-graphs"
205 |                 ><cite>Specificity Graphs</cite></a
206 |               >
207 |               by Jonathan Snook
208 |             </li>
209 |             <li>
210 |               <a href="https://decadecity.net/blog/2014/11/26/css-specificity-graphs"
211 |                 ><cite><abbr>CSS</abbr> specificity graphs in practice</cite></a
212 |               >
213 |               by Orde Saunders
214 |             </li>
215 |           </ul>
216 |           <p class="content-block__text">
217 |             Do you know of any other articles that are missing here?
218 |             <a href="#contributing">Feel free to suggest one!</a>
219 |           </p>
220 |         </div>
221 |       </section>
222 |       <section class="content-block content-block_highlighted">
223 |         <div class="wrapper">
224 |           <h2 class="content-block__title">🔨 Other tools you might find useful</h2>
225 |           <p class="content-block__text">
226 |             There are a ton of other tools out there that can help you analyzing your
227 |             <abbr>CSS</abbr> and the specificity of your selectors:
228 |           </p>
229 |           <ul class="content-block__list">
230 |             <li>
231 |               <a href="http://cssstats.com/"
232 |                 ><cite><abbr>CSS</abbr> Stats</cite></a
233 |               >
234 |               by Adam Morse, Brent Jackson, and John Otander
235 |             </li>
236 |             <li>
237 |               <a href="http://graphmycss.com/"
238 |                 ><cite>Graph My <abbr>CSS</abbr></cite></a
239 |               >
240 |               by Jared Wilcurt
241 |             </li>
242 |             <li>
243 |               <a href="https://jonassebastianohlsson.com/specificity-graph/"
244 |                 ><cite><abbr>CSS</abbr> Specificity Graph Generator</cite></a
245 |               >
246 |               by Jonas Ohlsson
247 |             </li>
248 |             <li>
249 |               <a href="https://github.com/springload/css-reporter"
250 |                 ><cite><abbr>CSS</abbr> Reporter</cite></a
251 |               >
252 |               by Josh Barr
253 |             </li>
254 |             <li>
255 |               <a href="https://github.com/katiefenn/parker"><cite>Parker</cite></a> by Katie Fenn
256 |             </li>
257 |             <li>
258 |               <a href="https://decadecity.net/sprue/css-specificity-graph"
259 |                 ><cite><abbr>CSS</abbr> specificity graph generator</cite></a
260 |               >
261 |               by Orde Saunders
262 |             </li>
263 |             <li>
264 |               <a href="https://github.com/tomgenoni/cssdig-chrome"
265 |                 ><cite><abbr>CSS</abbr> Dig</cite></a
266 |               >
267 |               by Tom Genoni
268 |             </li>
269 |             <li>
270 |               <a href="https://specificity.keegan.st/"><cite>Specificity Calculator</cite></a> by
271 |               Keegan Street
272 |             </li>
273 |             <li>
274 |               <a href="https://www.projectwallace.com"><cite>Project Wallace - <abbr>CSS</abbr> Analytics</cite></a> 
275 |               by Bart Veneman
276 |             </li>
277 |           </ul>
278 |           <p class="content-block__text">
279 |             Do you know of any other tools that are missing here?
280 |             <a href="#contributing">Feel free to suggest one!</a>
281 |           </p>
282 |         </div>
283 |       </section>
284 |       <section class="content-block" id="contributing">
285 |         <div class="wrapper">
286 |           <h2 class="content-block__title">💕 Contributing</h2>
287 |           <p class="content-block__text">
288 |             Did you spot an error? Do you miss a feature? Please be sure to check out
289 |             <a href="https://github.com/isellsoap/specificity-visualizer/issues"
290 |               >the list of existing issues</a
291 |             >
292 |             before creating
293 |             <a href="https://github.com/isellsoap/specificity-visualizer/issues/new"
294 |               >one of your own</a
295 |             >. Any feedback and help is appreciated.
296 |           </p>
297 |         </div>
298 |       </section>
299 |       <section class="content-block content-block_highlighted">
300 |         <div class="wrapper">
301 |           <h2 class="content-block__title">🤝 Credits and further links</h2>
302 |           <ul class="content-block__list">
303 |             <li>
304 |               Read the blog post
305 |               <a
306 |                 href="https://francescoschwarz.com/articles/introducing-the-specificity-visualizer/"
307 |                 >introducing the <cite>Specificity Visualizer</cite></a
308 |               >.
309 |             </li>
310 |             <li>
311 |               Check out the
312 |               <a href="https://github.com/isellsoap/specificity-visualizer">GitHub repository</a>.
313 |             </li>
314 |             <li>
315 |               <a href="https://github.com/isellsoap/specificity-visualizer/archive/gh-pages.zip"
316 |                 >Download this page</a
317 |               >
318 |               as a <abbr>ZIP</abbr> file.
319 |             </li>
320 |             <li>Created by <a href="https://twitter.com/isellsoap">Francesco Schwarz</a>.</li>
321 |             <li>
322 |               Many thanks to <a href="https://csswizardry.com/">Harry Roberts</a> for coming up with
323 |               the concept of the specificity graph.
324 |             </li>
325 |             <li>
326 |               Charts are powered by <a href="https://www.highcharts.com/">Highcharts</a> under the
327 |               <a href="https://creativecommons.org/licenses/by-nc/3.0/">CC BY-NC 3.0 license</a>.
328 |             </li>
329 |             <li>
330 |               The type face in use is
331 |               <a href="https://fonts.google.com/specimen/Roboto+Mono">Roboto Mono</a> by Christian
332 |               Robertson.
333 |             </li>
334 |           </ul>
335 |         </div>
336 |       </section>
337 |       <section class="content-block">
338 |         <div class="wrapper">
339 |           <h2 class="content-block__title">📖 License</h2>
340 |           <p class="content-block__text">
341 |             This repository is published under the
342 |             <a href="https://github.com/isellsoap/specificity-visualizer/LICENSE.md"
343 |               ><abbr>MIT</abbr> license</a
344 |             >.
345 |           </p>
346 |         </div>
347 |       </section>
348 |     </main>
349 |     <script src="<%= htmlWebpackPlugin.files.chunks['scripts/main'].entry %>"></script>
350 |   </body>
351 | </html>
352 | 


--------------------------------------------------------------------------------
/src/scripts/charts/index.js:
--------------------------------------------------------------------------------
  1 | import Highcharts from 'highcharts';
  2 | 
  3 | export function renderMainChart(specificities, yAxisCategories, dataSeries) {
  4 |   Highcharts.chart('js-specificity-graph', {
  5 |     chart: {
  6 |       borderColor: '#cccccc',
  7 |       borderWidth: 1,
  8 |       borderRadius: 4,
  9 |       type: 'scatter',
 10 |       zoomType: 'xy'
 11 |     },
 12 |     title: {
 13 |       text: 'Specificity graph'
 14 |     },
 15 |     xAxis: {
 16 |       title: {
 17 |         text: 'Location in stylesheet'
 18 |       }
 19 |     },
 20 |     plotOptions: {
 21 |       scatter: {
 22 |         marker: {
 23 |           radius: 5,
 24 |           states: {
 25 |             hover: {
 26 |               enabled: true,
 27 |               lineColor: 'rgb(100,100,100)'
 28 |             }
 29 |           }
 30 |         }
 31 |       }
 32 |     },
 33 |     tooltip: {
 34 |       formatter() {
 35 |         return `Selector: <b>${specificities[this.x].selector}</b><br>
 36 |         Specificity: <b>${yAxisCategories[this.y]}</b>`;
 37 |       }
 38 |     },
 39 |     yAxis: {
 40 |       title: {
 41 |         text: 'Specificity'
 42 |       },
 43 |       categories: yAxisCategories,
 44 |       labels: {
 45 |         align: 'right'
 46 |       },
 47 |       tickmarkPlacement: 'on',
 48 |       endOnTick: false,
 49 |       maxPadding: 0
 50 |     },
 51 |     series: [
 52 |       {
 53 |         name: 'ID selectors',
 54 |         color: 'rgba(223, 83, 83, .5)',
 55 |         data: dataSeries.idCategory
 56 |       },
 57 |       {
 58 |         name: 'Class, attribute & pseudo-class selectors',
 59 |         color: 'rgba(119, 152, 191, .5)',
 60 |         data: dataSeries.classCategory
 61 |       },
 62 |       {
 63 |         name: 'Element & pseudo-element selectors',
 64 |         color: 'rgba(119, 0, 191, .5)',
 65 |         data: dataSeries.elementCategory
 66 |       }
 67 |     ]
 68 |   });
 69 | }
 70 | 
 71 | export function renderSpecificityGroupsColumnChart(dataSeries) {
 72 |   Highcharts.chart('js-specificity-groups-column', {
 73 |     chart: {
 74 |       type: 'column',
 75 |       borderColor: '#cccccc',
 76 |       borderWidth: 1,
 77 |       borderRadius: 4,
 78 |       zoomType: 'x'
 79 |     },
 80 |     title: {
 81 |       text: 'Usage of specificities, sorted from most used to least used'
 82 |     },
 83 |     legend: {
 84 |       enabled: false
 85 |     },
 86 |     tooltip: {
 87 |       formatter() {
 88 |         return `Specificity: <b>${this.point.name}</b><br>
 89 |         Usage: <b>${this.y} ${this.y > 1 ? 'times' : 'time'}</b>`;
 90 |       }
 91 |     },
 92 |     series: [{
 93 |       name: 'Specificities',
 94 |       colorByPoint: true,
 95 |       data: dataSeries
 96 |     }],
 97 |     yAxis: {
 98 |       title: {
 99 |         text: 'Usage'
100 |       }
101 |     },
102 |     xAxis: {
103 |       title: {
104 |         text: 'Specificity'
105 |       },
106 |       type: 'category'
107 |     }
108 |   });
109 | }
110 | 
111 | export function renderSpecificityGroupsPieChart(dataSeries) {
112 |   Highcharts.chart('js-specificity-groups-pie', {
113 |     chart: {
114 |       type: 'pie',
115 |       borderColor: '#cccccc',
116 |       borderWidth: 1,
117 |       borderRadius: 4
118 |     },
119 |     title: {
120 |       text: 'Usage of specificities, as % of total usage'
121 |     },
122 |     tooltip: {
123 |       formatter() {
124 |         return `Specificity: <b>${this.point.name}</b><br>
125 |         Usage: <b>${Math.round(this.percentage * 10) / 10}%</b>`;
126 |       }
127 |     },
128 |     series: [{
129 |       name: 'Specificities',
130 |       colorByPoint: true,
131 |       data: dataSeries
132 |     }],
133 |     plotOptions: {
134 |       pie: {
135 |         allowPointSelect: true,
136 |         cursor: 'pointer',
137 |         dataLabels: {
138 |           enabled: true,
139 |           format: '<b>{point.name}</b>: {point.percentage:.1f} %'
140 |         }
141 |       }
142 |     }
143 |   });
144 | }
145 | 


--------------------------------------------------------------------------------
/src/scripts/fontLoader.js:
--------------------------------------------------------------------------------
 1 | import WebFont from 'webfontloader';
 2 | 
 3 | WebFont.load({
 4 |   active: () => {
 5 |     sessionStorage.robotoMonoLoaded = true;
 6 |   },
 7 |   google: {
 8 |     families: ['Roboto Mono:400,400italic,700,700italic']
 9 |   }
10 | });
11 | 


--------------------------------------------------------------------------------
/src/scripts/main.js:
--------------------------------------------------------------------------------
  1 | import '../styles/main.css'
  2 | 
  3 | import naturalSort from 'javascript-natural-sort'
  4 | import uniq from 'lodash/uniq'
  5 | import indexOf from 'lodash/indexOf'
  6 | import postcss from 'postcss'
  7 | import { specificity } from 'parsel-js'
  8 | 
  9 | import {
 10 |   renderMainChart,
 11 |   renderSpecificityGroupsColumnChart,
 12 |   renderSpecificityGroupsPieChart,
 13 | } from 'charts'
 14 | 
 15 | const classFormErrorHidden = 'form__error_hidden'
 16 | const classChartsHidden = 'charts_hidden'
 17 | 
 18 | const selectorForm = '.js-form'
 19 | const selectorTextarea = '.js-form-textarea'
 20 | const selectorErrorMessage = '.js-form-error'
 21 | const selectorCharts = '.js-charts'
 22 | 
 23 | const elementForm = document.querySelector(selectorForm)
 24 | const elementTextarea = document.querySelector(selectorTextarea)
 25 | const elementErrorMessage = document.querySelector(selectorErrorMessage)
 26 | const elementCharts = document.querySelector(selectorCharts)
 27 | 
 28 | let mainChartDataSeries
 29 | let specificityUsages
 30 | let specificityUsagesDataSeries
 31 | let textareaContent
 32 | let ast
 33 | let specificities
 34 | let mainChartYAxisCategories
 35 | 
 36 | const isValidAtRule = (rule) =>
 37 |   rule.parent.type === 'atrule' && ['media', 'supports', 'document'].includes(rule.parent.name)
 38 | 
 39 | const isValidSelector = (rule) => rule.parent.type === 'root' || isValidAtRule(rule)
 40 | 
 41 | // build up array with all valid selectors
 42 | const getAllSelectors = () => {
 43 |   const selectors = []
 44 | 
 45 |   ast.walkRules((rule) => {
 46 |     if (isValidSelector(rule)) {
 47 |       selectors.push(...rule.selectors.filter((item) => item !== ''))
 48 |     }
 49 |   })
 50 | 
 51 |   return selectors
 52 | }
 53 | 
 54 | const getSortedKeysByValue = (obj) =>
 55 |   Object.keys(obj).sort((keyA, keyB) => -(obj[keyA] - obj[keyB]))
 56 | 
 57 | // main form submit
 58 | elementForm.addEventListener('submit', (event) => {
 59 |   event.preventDefault()
 60 | 
 61 |   // reset variables
 62 |   mainChartDataSeries = {
 63 |     idCategory: [],
 64 |     classCategory: [],
 65 |     elementCategory: [],
 66 |   }
 67 |   specificityUsages = {}
 68 | 
 69 |   textareaContent = elementTextarea.value
 70 | 
 71 |   if (textareaContent.trim() === '') {
 72 |     elementErrorMessage.classList.remove(classFormErrorHidden)
 73 |     return
 74 |   }
 75 | 
 76 |   try {
 77 |     ast = postcss.parse(textareaContent)
 78 |   } catch (error) {
 79 |     if (error.name === 'CssSyntaxError') {
 80 |       elementErrorMessage.classList.remove(classFormErrorHidden)
 81 |       return
 82 |     }
 83 |   }
 84 | 
 85 |   // data is valid, make charts visible
 86 |   elementCharts.classList.remove(classChartsHidden)
 87 |   elementErrorMessage.classList.add(classFormErrorHidden)
 88 | 
 89 |   // calculate data for main chart
 90 |   specificities = getAllSelectors().map((selector) => {
 91 |     return {
 92 |       selector,
 93 |       specificity: specificity(selector).join(),
 94 |     }
 95 |   })
 96 | 
 97 |   mainChartYAxisCategories = uniq(specificities.map((element) => element.specificity)).sort(
 98 |     naturalSort,
 99 |   )
100 | 
101 |   specificities.forEach((element, index) => {
102 |     if (element.specificity.indexOf('0,0,') === 0) {
103 |       mainChartDataSeries.elementCategory.push([
104 |         index,
105 |         indexOf(mainChartYAxisCategories, element.specificity),
106 |       ])
107 |     } else if (element.specificity.indexOf('0,') === 0) {
108 |       mainChartDataSeries.classCategory.push([
109 |         index,
110 |         indexOf(mainChartYAxisCategories, element.specificity),
111 |       ])
112 |     } else {
113 |       mainChartDataSeries.idCategory.push([
114 |         index,
115 |         indexOf(mainChartYAxisCategories, element.specificity),
116 |       ])
117 |     }
118 | 
119 |     specificityUsages[element.specificity] = (specificityUsages[element.specificity] || 0) + 1
120 |   })
121 | 
122 |   specificityUsagesDataSeries = getSortedKeysByValue(specificityUsages).map((element) => {
123 |     return {
124 |       name: element,
125 |       y: specificityUsages[element],
126 |     }
127 |   })
128 | 
129 |   renderMainChart(specificities, mainChartYAxisCategories, mainChartDataSeries)
130 |   renderSpecificityGroupsColumnChart(specificityUsagesDataSeries)
131 |   renderSpecificityGroupsPieChart(specificityUsagesDataSeries)
132 | })
133 | 


--------------------------------------------------------------------------------
/src/styles/_animations.css:
--------------------------------------------------------------------------------
 1 | @keyframes point-down {
 2 |   from,
 3 |   60% {
 4 |     transform: translateY(0);
 5 |   }
 6 | 
 7 |   70% {
 8 |     transform: translateY(-2px);
 9 |   }
10 | 
11 |   75% {
12 |     transform: translateY(4px);
13 |   }
14 | 
15 |   90% {
16 |     transform: translateY(-2px);
17 |   }
18 | 
19 |   95% {
20 |     transform: translateY(4px);
21 |   }
22 | 
23 |   to {
24 |     transform: translateY(0);
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/styles/_charts.css:
--------------------------------------------------------------------------------
 1 | 
 2 | .charts_hidden {
 3 |   display: none;
 4 | }
 5 | 
 6 | .charts__wrapper {
 7 |   display: flex;
 8 |   flex-wrap: wrap;
 9 | }
10 | 
11 | .charts__main-scatter-plot,
12 | .charts__specificity-groups-column,
13 | .charts__specificity-groups-pie {
14 |   margin-bottom: 1rem;
15 |   width: 100%;
16 | }
17 | 
18 | .charts__main-scatter-plot {
19 |   height: 80vh;
20 | }
21 | 
22 | @media (--viewport-breakpoint-3) {
23 |   .charts__specificity-groups-column {
24 |     padding-right: .5rem;
25 |     width: 50%;
26 |   }
27 | 
28 |   .charts__specificity-groups-pie {
29 |     padding-left: .5rem;
30 |     width: 50%;
31 |   }
32 | }
33 | 
34 | @media (--viewport-breakpoint-4) {
35 |   .charts__specificity-groups-column {
36 |     width: 66.66667%;
37 |   }
38 | 
39 |   .charts__specificity-groups-pie {
40 |     width: 33.33333%;
41 |   }
42 | }
43 | 
44 | 


--------------------------------------------------------------------------------
/src/styles/_content-block.css:
--------------------------------------------------------------------------------
 1 | .content-block {
 2 |   padding: 2rem 0;
 3 | }
 4 | 
 5 | .content-block_narrow {
 6 |   padding: 1rem 0;
 7 | }
 8 | 
 9 | .content-block_highlighted {
10 |   background-color: rgba(#639, .0625);
11 | }
12 | 
13 | .content-block__title,
14 | .content-block__subtitle {
15 |   margin-bottom: .5rem;
16 | }
17 | 
18 | .content-block__title {
19 |   font-size: 1.25rem;
20 | }
21 | 
22 | .content-block__subtitle {
23 |   font-size: 1.125rem;
24 | }
25 | 
26 | .content-block__text,
27 | .content-block__list {
28 |   font-size: 1rem;
29 |   margin-bottom: .75rem;
30 | }
31 | 
32 | .content-block__list {
33 |   margin-left: 1.5rem;
34 | }
35 | 
36 | .content-block__index-pointing-down {
37 |   animation: point-down 4s 3;
38 |   display: inline-block;
39 | }
40 | 
41 | @media (--viewport-breakpoint-2) {
42 |   .content-block_narrow {
43 |     padding: 2rem 0;
44 |   }
45 | 
46 |   .content-block:not(.content-block_narrow) {
47 |     padding: 4rem 0;
48 |   }
49 | 
50 |   .content-block__title {
51 |     font-size: 1.5rem;
52 |   }
53 | 
54 |   .content-block__title:not(.content-block__title_label) {
55 |     margin-bottom: 1rem;
56 |   }
57 | 
58 |   .content-block__subtitle {
59 |     font-size: 1.25rem;
60 |   }
61 | 
62 |   .content-block__text,
63 |   .content-block__list {
64 |     font-size: 1.25rem;
65 |     margin-bottom: 1.5rem;
66 |   }
67 | 
68 |   .content-block__list {
69 |     margin-left: 2rem;
70 |   }
71 | }
72 | 
73 | @media (--viewport-breakpoint-4) {
74 |   .content-block:not(.content-block_narrow) {
75 |     padding: 5rem 0;
76 |   }
77 | }
78 | 
79 | 


--------------------------------------------------------------------------------
/src/styles/_elements.css:
--------------------------------------------------------------------------------
 1 | *,
 2 | *::before,
 3 | *::after {
 4 |   box-sizing: inherit;
 5 | }
 6 | 
 7 | * {
 8 |   font-size: 100%;
 9 |   margin: 0;
10 |   padding: 0;
11 | }
12 | 
13 | html {
14 |   background: #fdfdfd;
15 |   box-sizing: border-box;
16 |   color: #222;
17 |   font-family: monospace;
18 |   line-height: 1.5;
19 | }
20 | 
21 | html.wf-active,
22 | html.no-js {
23 |   font-family: 'Roboto Mono', monospace;
24 | }
25 | 
26 | @media (--viewport-breakpoint-4) {
27 |   html {
28 |     font-size: 112.5%;
29 |   }
30 | }
31 | 
32 | @media (--viewport-breakpoint-5) {
33 |   html {
34 |     font-size: 120%;
35 |   }
36 | }
37 | 
38 | @media (--viewport-breakpoint-6) {
39 |   html {
40 |     font-size: 125%;
41 |   }
42 | }
43 | 
44 | label,
45 | button {
46 |   cursor: pointer;
47 | }
48 | 
49 | button,
50 | textarea,
51 | code {
52 |   font-family: inherit;
53 | }
54 | 
55 | code {
56 |   font-weight: 700;
57 | }
58 | 
59 | h1,
60 | h2 {
61 |   line-height: 1.3;
62 |   margin: 0;
63 | }
64 | 
65 | a {
66 |   background-color: transparent;
67 |   border-bottom: 3px solid rgba(#639, .5);
68 |   color: #639;
69 |   font-weight: 700;
70 |   text-decoration: none;
71 |   transition: background-color 100ms ease-in, border-bottom 100ms ease-in;
72 | }
73 | 
74 | a:focus,
75 | a:hover {
76 |   background-color: rgba(#639, .125);
77 |   border-bottom-color: #639;
78 | }
79 | 


--------------------------------------------------------------------------------
/src/styles/_form.css:
--------------------------------------------------------------------------------
 1 | 
 2 | .form__textarea {
 3 |   border: 1px solid #ccc;
 4 |   border-radius: 4px;
 5 |   height: 10rem;
 6 |   margin-bottom: .5rem;
 7 |   padding: .75rem;
 8 |   resize: none;
 9 |   transition: border-color 100ms ease-in;
10 |   width: 100%;
11 | }
12 | 
13 | .form__textarea::placeholder {
14 |   color: #888;
15 | }
16 | 
17 | .form__textarea:focus,
18 | .form__textarea:hover {
19 |   border-color: #999;
20 | }
21 | 
22 | .form__button-group {
23 |   display: flex;
24 |   flex-direction: column;
25 | }
26 | 
27 | .form__button {
28 |   background-color: #639;
29 |   border: 0;
30 |   border-radius: 4px;
31 |   color: #fff;
32 |   display: inline-block;
33 |   flex-shrink: 0;
34 |   font-size: 1rem;
35 |   font-weight: 700;
36 |   margin-bottom: .5rem;
37 |   padding: 1rem 2rem;
38 |   transition: background-color 100ms ease-in;
39 | }
40 | 
41 | .form__button :focus,
42 | .form__button :hover {
43 |   background-color: #592d86;
44 | }
45 | 
46 | .form__error {
47 |   flex-grow: 1;
48 | }
49 | 
50 | .form__error_hidden {
51 |   display: none;
52 | }
53 | 
54 | @media (--viewport-breakpoint-1) {
55 |   .form__button-group {
56 |     align-items: center;
57 |     flex-direction: row;
58 |   }
59 | 
60 |   .form__button {
61 |     margin-bottom: 0;
62 |   }
63 | 
64 |   .form__error {
65 |     margin-left: 1rem;
66 |     text-align: right;
67 |   }
68 | }
69 | 
70 | @media (--viewport-breakpoint-2) {
71 |   .form__button {
72 |     font-size: 1.25rem;
73 |   }
74 | }
75 | 
76 | 


--------------------------------------------------------------------------------
/src/styles/_header.css:
--------------------------------------------------------------------------------
 1 | 
 2 | .header__title,
 3 | .header__text,
 4 | .header__list {
 5 |   margin-bottom: .5rem;
 6 | }
 7 | 
 8 | .header__title {
 9 |   font-size: 2rem;
10 |   font-weight: 700;
11 | }
12 | 
13 | .header__text,
14 | .header__list {
15 |   font-size: 1.125rem;
16 | }
17 | 
18 | .header__list {
19 |   display: flex;
20 |   list-style-type: none;
21 | }
22 | 
23 | .header__list-item {
24 |   margin-right: 1.5rem;
25 | }
26 | 
27 | @media (--viewport-breakpoint-2) {
28 |   .header__title {
29 |     font-size: 2.5rem;
30 |   }
31 | 
32 |   .header__text,
33 |   .header__list {
34 |     font-size: 1.25rem;
35 |   }
36 | }
37 | 
38 | 


--------------------------------------------------------------------------------
/src/styles/_variables.css:
--------------------------------------------------------------------------------
1 | @custom-media --viewport-breakpoint-1 screen and (min-width: 28.125em);
2 | @custom-media --viewport-breakpoint-2 screen and (min-width: 43.75em);
3 | @custom-media --viewport-breakpoint-3 screen and (min-width: 53.125em);
4 | @custom-media --viewport-breakpoint-4 screen and (min-width: 87.5em);
5 | @custom-media --viewport-breakpoint-5 screen and (min-width: 125em);
6 | @custom-media --viewport-breakpoint-6 screen and (min-width: 156.25em);
7 | 


--------------------------------------------------------------------------------
/src/styles/_wrapper.css:
--------------------------------------------------------------------------------
 1 | .wrapper {
 2 |   margin: 0 auto;
 3 |   max-width: 50rem;
 4 |   padding: 0 1rem;
 5 | }
 6 | 
 7 | .wrapper_charts {
 8 |   max-width: 180rem;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/styles/main.css:
--------------------------------------------------------------------------------
 1 | @charset "UTF-8";
 2 | 
 3 | @import "vendor/_normalize.css";
 4 | @import "_variables.css";
 5 | @import "_animations.css";
 6 | @import "_elements.css";
 7 | @import "_wrapper.css";
 8 | @import "_header.css";
 9 | @import "_form.css";
10 | @import "_content-block.css";
11 | @import "_charts.css";
12 | 


--------------------------------------------------------------------------------
/src/styles/vendor/_normalize.css:
--------------------------------------------------------------------------------
 1 | @import '../../../node_modules/normalize.css/normalize.css';
 2 | 
 3 | /* override unfortunate normalize.css rules */
 4 | h1,
 5 | small {
 6 |   font-size: 100%;
 7 | }
 8 | 
 9 | h1 {
10 |   margin: 0;
11 | }
12 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | // node packages
 2 | const path = require('path')
 3 | 
 4 | // webpack plugins
 5 | const CleanPlugin = require('clean-webpack-plugin')
 6 | const HtmlPlugin = require('html-webpack-plugin')
 7 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 8 | 
 9 | // postcss
10 | const autoprefixer = require('autoprefixer')
11 | const postcssCustomMedia = require('postcss-custom-media')
12 | const postcssCustomProperties = require('postcss-custom-properties')
13 | const postcssImport = require('postcss-import')
14 | const postcssMixins = require('postcss-mixins')
15 | const postcssHexRgba = require('postcss-hexrgba')
16 | 
17 | // minification
18 | const TerserPlugin = require('terser-webpack-plugin')
19 | 
20 | module.exports = () => {
21 |   return {
22 |     mode: process.env.NODE_ENV,
23 |     entry: {
24 |       'scripts/main': './src/scripts/main.js',
25 |       'scripts/webfontloader': './src/scripts/fontLoader.js',
26 |     },
27 |     output: {
28 |       path: `${__dirname}/dist`,
29 |       filename: '[name].[chunkhash].js',
30 |     },
31 |     module: {
32 |       rules: [
33 |         // scripts
34 |         {
35 |           test: /\.js$/,
36 |           use: 'babel-loader',
37 |           exclude: /node_modules/,
38 |         },
39 | 
40 |         // styles
41 |         {
42 |           test: /\.css$/,
43 |           use: [
44 |             MiniCssExtractPlugin.loader,
45 |             'css-loader',
46 |             {
47 |               loader: 'postcss-loader',
48 |               options: {
49 |                 postcssOptions: {
50 |                   plugins: [
51 |                     postcssImport(), // should be first in the list
52 |                     postcssMixins(),
53 |                     autoprefixer(),
54 |                     postcssCustomProperties({ preserve: false }),
55 |                     postcssHexRgba(),
56 |                     postcssCustomMedia(),
57 |                   ],
58 |                 },
59 |               },
60 |             },
61 |           ],
62 |         },
63 |       ],
64 |     },
65 |     plugins: [
66 |       new CleanPlugin(['./dist']),
67 |       new MiniCssExtractPlugin({
68 |         filename: 'styles/main.[contenthash].css',
69 |       }),
70 |       new HtmlPlugin({
71 |         inject: false,
72 |         template: './src/markup/index.html.ejs',
73 |         filename: 'index.html',
74 |         favicon: 'src/images/favicon.ico',
75 |       }),
76 |     ],
77 |     resolve: {
78 |       modules: [path.join(__dirname, 'src/scripts'), 'node_modules'],
79 |     },
80 |     optimization: {
81 |       minimize: true,
82 |       minimizer: [
83 |         new TerserPlugin({
84 |           parallel: true,
85 |         }),
86 |       ],
87 |     },
88 |   }
89 | }
90 | 


--------------------------------------------------------------------------------