├── .babelrc ├── assets ├── banner.ai └── banner.svg ├── .npmrc ├── .eslintignore ├── .prettierignore ├── .remarkignore ├── .github ├── CODEOWNERS ├── PULL_REQUEST_TEMPLATE.md ├── ISSUE_TEMPLATE │ ├── enhancement.md │ └── bugs.md └── ISSUE_TEMPLATE.md ├── .gitattributes ├── .gitignore ├── .remarkrc.js ├── .travis.yml ├── .mailmap ├── .editorconfig ├── prettier.config.js ├── .eslintrc.js ├── .circleci └── config.yml ├── LICENSE.md ├── package.json ├── src └── index.js ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── README.md └── CONTRIBUTING.md /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env"], 3 | "plugins": [["styled-components", { "ssr": true }]] 4 | } 5 | -------------------------------------------------------------------------------- /assets/banner.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arcticicestudio/styled-modern-normalize/HEAD/assets/banner.ai -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | ; Copyright (c) 2018-present Arctic Ice Studio 2 | ; Copyright (c) 2018-present Sven Greb 3 | ; 4 | ; Project: styled-modern-normalize 5 | ; Repository: https://github.com/arcticicestudio/styled-modern-normalize 6 | ; License: MIT 7 | 8 | package-lock=true 9 | save-exact=true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2018-present Arctic Ice Studio 2 | # Copyright (c) 2018-present Sven Greb 3 | # 4 | # Project: styled-modern-normalize 5 | # Repository: https://github.com/arcticicestudio/styled-modern-normalize 6 | # License: MIT 7 | 8 | build/* 9 | dist/* 10 | node_modules/* 11 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2018-present Arctic Ice Studio 2 | # Copyright (c) 2018-present Sven Greb 3 | # 4 | # Project: styled-modern-normalize 5 | # Repository: https://github.com/arcticicestudio/styled-modern-normalize 6 | # License: MIT 7 | 8 | build/* 9 | dist/* 10 | node_modules/* 11 | -------------------------------------------------------------------------------- /.remarkignore: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2018-present Arctic Ice Studio 2 | # Copyright (c) 2018-present Sven Greb 3 | # 4 | # Project: styled-modern-normalize 5 | # Repository: https://github.com/arcticicestudio/styled-modern-normalize 6 | # License: MIT 7 | 8 | # +---------+ 9 | # + Node.js + 10 | # +---------+ 11 | node_modules/* 12 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # Configuration for the GitHub feature to automatically request reviews from the code owners when a pull request 2 | # changes any owned files. 3 | # 4 | # References: 5 | # https://github.com/blog/2392-introducing-code-owners 6 | # https://help.github.com/articles/about-codeowners 7 | 8 | # +--------------------+ 9 | # + Default Code Owner + 10 | # +--------------------+ 11 | * @arcticicestudio 12 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2018-present Arctic Ice Studio 2 | # Copyright (c) 2018-present Sven Greb 3 | # 4 | # Project: styled-modern-normalize 5 | # Repository: https://github.com/arcticicestudio/styled-modern-normalize 6 | # License: MIT 7 | 8 | # Automatically perform line feed (LF) normalization for files detected as text and leave all files detected as binary 9 | # untouched. 10 | * text=auto 11 | 12 | # +-------------------+ 13 | # + Adobe Illustrator + 14 | # +-------------------+ 15 | # Project Map 16 | *.ai binary 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2018-present Arctic Ice Studio 2 | # Copyright (c) 2018-present Sven Greb 3 | # 4 | # Project: styled-modern-normalize 5 | # Repository: https://github.com/arcticicestudio/styled-modern-normalize 6 | # License: MIT 7 | 8 | # +------+ 9 | # + Logs + 10 | # +------+ 11 | logs/ 12 | *.log 13 | npm-debug.log* 14 | 15 | # +---------+ 16 | # + Node.js + 17 | # +---------+ 18 | node_modules/ 19 | .npm/ 20 | 21 | # +-------------------+ 22 | # + Project Structure + 23 | # +-------------------+ 24 | build/ 25 | dist/ 26 | -------------------------------------------------------------------------------- /.remarkrc.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2018-present Arctic Ice Studio 3 | * Copyright (c) 2018-present Sven Greb 4 | * 5 | * Project: styled-modern-normalize 6 | * Repository: https://github.com/arcticicestudio/styled-modern-normalize 7 | * License: MIT 8 | */ 9 | 10 | /** 11 | * @file The remark-lint configuration. 12 | * @author Arctic Ice Studio 13 | * @author Sven Greb 14 | */ 15 | 16 | module.exports = { 17 | plugins: ["remark-preset-lint-arcticicestudio"] 18 | }; 19 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2018-present Arctic Ice Studio 2 | # Copyright (c) 2018-present Sven Greb 3 | # 4 | # Project: styled-modern-normalize 5 | # Repository: https://github.com/arcticicestudio/styled-modern-normalize 6 | # License: MIT 7 | # References: 8 | # https://docs.travis-ci.com/user/languages/javascript-with-nodejs 9 | 10 | language: node_js 11 | dist: trusty 12 | sudo: false 13 | node_js: 14 | - "node" 15 | os: 16 | - linux 17 | before_install: 18 | - rm -rf ./node_modules 19 | before_script: 20 | - npm install 21 | script: 22 | - npm run lint 23 | - npm run dist 24 | -------------------------------------------------------------------------------- /.mailmap: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2018-present Arctic Ice Studio 2 | # Copyright (c) 2018-present Sven Greb 3 | # 4 | # Project: styled-modern-normalize 5 | # Repository: https://github.com/arcticicestudio/styled-modern-normalize 6 | # License: MIT 7 | 8 | # Configuration for Git mail mapping feature to coalesce together commits by the same person in the shortlog, where their name and/or email address was spelled differently. 9 | # 10 | # References: 11 | # https://git-scm.com/docs/git-shortlog#_mapping_authors 12 | Arctic Ice Studio 13 | Sven Greb 14 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2018-present Arctic Ice Studio 2 | # Copyright (c) 2018-present Sven Greb 3 | # 4 | # Project: styled-modern-normalize 5 | # Repository: https://github.com/arcticicestudio/styled-modern-normalize 6 | # License: MIT 7 | 8 | # +--------------------+ 9 | # + Base Configuration + 10 | # +--------------------+ 11 | [*] 12 | charset = utf-8 13 | end_of_line = lf 14 | indent_size = 2 15 | indent_style = space 16 | insert_final_newline = true 17 | max_line_length = 120 18 | trim_trailing_whitespace = true 19 | 20 | # +-----------+ 21 | # + Languages + 22 | # +-----------+ 23 | # +--- Markdown ---+ 24 | [*.{md,gfm}] 25 | trim_trailing_whitespace = false 26 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2018-present Arctic Ice Studio 3 | * Copyright (c) 2018-present Sven Greb 4 | * 5 | * Project: styled-modern-normalize 6 | * Repository: https://github.com/arcticicestudio/styled-modern-normalize 7 | * License: MIT 8 | * References: 9 | * https://prettier.io/docs/en/configuration.html 10 | * https://prettier.io/docs/en/options.html 11 | */ 12 | 13 | /** 14 | * @file The Prettier configuration. 15 | * @author Arctic Ice Studio 16 | * @author Sven Greb 17 | * @see https://prettier.io/docs/en/configuration.html 18 | */ 19 | 20 | module.exports = { 21 | printWidth: 120 22 | }; 23 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2018-present Arctic Ice Studio 3 | * Copyright (c) 2018-present Sven Greb 4 | * 5 | * Project: styled-modern-normalize 6 | * Repository: https://github.com/arcticicestudio/styled-modern-normalize 7 | * License: MIT 8 | */ 9 | 10 | /** 11 | * @file The ESLint configuration. 12 | * @author Arctic Ice Studio 13 | * @author Sven Greb 14 | */ 15 | 16 | const path = require("path"); 17 | 18 | module.exports = { 19 | extends: "arcticicestudio-base", 20 | plugins: ["prettier"], 21 | parser: "babel-eslint", 22 | env: { 23 | browser: true, 24 | node: true 25 | }, 26 | rules: { 27 | "prettier/prettier": "error" 28 | } 29 | }; 30 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2018-present Arctic Ice Studio 2 | # Copyright (c) 2018-present Sven Greb 3 | 4 | # Project: styled-modern-normalize 5 | # Repository: https://github.com/arcticicestudio/styled-modern-normalize 6 | # License: MIT 7 | # References: 8 | # https://circleci.com/docs/2.0 9 | # https://circleci.com/docs/2.0/circleci-images/#nodejs 10 | 11 | version: 2 12 | jobs: 13 | build: 14 | docker: 15 | - image: circleci/node:latest 16 | steps: 17 | - checkout 18 | - run: 19 | name: preprocess-clean-node-modules 20 | command: rm -rf node_modules 21 | - run: 22 | name: preprocess-npm-install 23 | command: npm install 24 | - run: 25 | name: lint 26 | command: npm run lint 27 | - run: 28 | name: dist 29 | command: npm run dist 30 | - store_artifacts: 31 | path: dist 32 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License (MIT) 2 | 3 | Copyright (c) 2018-present Arctic Ice Studio (http://arcticicestudio.com) 4 | Copyright (c) 2018-present Sven Greb (http://svengreb.de) 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "styled-modern-normalize", 3 | "version": "0.2.0", 4 | "description": "modern-normalize.css for styled-components", 5 | "author": { 6 | "name": "Arctic Ice Studio", 7 | "email": "development@arcticicestudio.com", 8 | "url": "http://arcticicestudio.com" 9 | }, 10 | "homepage": "https://github.com/arcticicestudio/styled-modern-normalize", 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/arcticicestudio/styled-modern-normalize.git" 14 | }, 15 | "bugs": { 16 | "url": "https://github.com/arcticicestudio/styled-modern-normalize/issues" 17 | }, 18 | "license": "MIT", 19 | "keywords": [ 20 | "styled", 21 | "components", 22 | "modern", 23 | "normalize", 24 | "css", 25 | "react", 26 | "styled", 27 | "import", 28 | "export" 29 | ], 30 | "main": "dist/index.js", 31 | "files": [ 32 | "dist/index.js" 33 | ], 34 | "scripts": { 35 | "clean": "del build dist", 36 | "dev": "npm run clean && babel --source-maps --watch src --out-dir build", 37 | "dist": "npm run clean && cross-env NODE_ENV=production babel src --out-dir dist", 38 | "lint:js": "eslint . src", 39 | "lint:md": "remark --no-stdout *.md src .github", 40 | "lint": "npm run lint:js && npm run lint:md", 41 | "prepublishOnly": "npm run lint && npm run dist" 42 | }, 43 | "devDependencies": { 44 | "babel-cli": "^6.26.0", 45 | "babel-eslint": "8.2.3", 46 | "babel-plugin-styled-components": "^1.5.1", 47 | "babel-preset-env": "^1.7.0", 48 | "cross-env": "5.1.5", 49 | "del-cli": "1.1.0", 50 | "eslint": "4.19.1", 51 | "eslint-config-arcticicestudio-base": "0.2.0", 52 | "eslint-plugin-import": "2.12.0", 53 | "eslint-plugin-prettier": "2.6.0", 54 | "prettier": "^1.12.1", 55 | "react": "^16.3.2", 56 | "remark-cli": "5.0.0", 57 | "remark-preset-lint-arcticicestudio": "0.1.0", 58 | "styled-components": "^4.1.2" 59 | }, 60 | "peerDependencies": { 61 | "react": ">= 0.14.0 < 17.0.0-0", 62 | "styled-components": "^2.0.0 || ^3.2.6 || ^4.1.2" 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | > **Please read the [contribution guidelines](https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md) before filling out this pull request template**. 4 | 5 | ## Prerequisites 6 | 7 | This section and the instructions in the sections below are only part of this pull request template. Please ensure to **delete this whole section, all pre-filled instructions of the sections below and sections you have not filled out before submitting** to ensure a clear structure and overview. 8 | 9 | Please do your best to provide as much information as possible and use a clear and descriptive title for your enhancement suggestion or bug fix to help maintainers and the community understand and reproduce the behavior, find related pull requests and to merge it faster. 10 | 11 | * **Ensure the pull request has not already been reported by using the [GitHub Pull Request search](https://github.com/arcticicestudio/styled-modern-normalize/pulls)** — if it has **and the pull request is still open**, add a comment to the existing pull request instead of opening this new one. If you find a closed pull request that seems to be similar to this one, include a link to it in the [metadata head](#metadata-head) section of this pull request. 12 | * **Ensure the contribution belongs to the [correct repository](https://github.com/arcticicestudio?tab=repositories&q=styled-modern-normalize).** 13 | * **Ensure to adhere to the [pull request contribution guidelines](https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#pull-requests)**, especially the one for tests and documentations. 14 | 15 | ## Metadata Head 16 | 17 | The metadata head should be added to the top of the pull request as [Markdown text quote](https://help.github.com/articles/basic-writing-and-formatting-syntax) containing the [GitHub issue keyword(s)](https://help.github.com/articles/closing-issues-using-keywords) to link to the related enhancements suggestions (`Closes`) or bug reports (`Fixes`). You can add additional details like dependencies to other pull requests and the order it needs to be merged. 18 | 19 | > Closes/Fixes ISSUE_ID 20 | > Must be merged **after**/**before** ISSUE_ID 21 | > Blocked by ISSUE_ID 22 | 23 | ## Description 24 | 25 | Describe the changes as in many relevant details as possible. If this is a enhancement suggestion add specific use-cases and explain why this feature or improvement would be useful. If this is a bug fix ensure to provide a _before/after_ comparison by describing the current behavior and the new behavior. 26 | 27 | ## References 28 | 29 | Add any other references and links which are relevant for this issue. 30 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/enhancement.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | name: Enhancement Suggestions 4 | about: Submit an enhancement suggestion for new features or minor improvements to existing functionality 5 | 6 | --- 7 | 8 | 9 | 10 | > **Please read the [contribution guidelines](https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md) before filling out this issue template**. 11 | 12 | ## Prerequisites 13 | 14 | This section and the instructions in the sections below are only part of this issue template. Please ensure to **delete this whole section, all pre-filled instructions of the sections below and sections you have not filled out before submitting** to ensure a clear structure and overview. 15 | 16 | Please do your best to provide as much information as possible and use a clear and descriptive title for your enhancement suggestion to help maintainers and the community understand and reproduce the behavior, find related reports and to resolve the ticket faster. 17 | 18 | * **Ensure the issue has not already been reported by using the [GitHub Issues search](https://github.com/arcticicestudio/styled-modern-normalize/issues)** — if it has **and the issue is still open**, add a comment to the existing issue instead of opening this new one. If you find a closed issue that seems to be similar to this one, include a link to the original issue in the [metadata head](#metadata-head) section of this issue. 19 | * **Ensure the contribution belongs to the [correct repository](https://github.com/arcticicestudio?tab=repositories&q=styled-modern-normalize).** 20 | * If your feature request 21 | * **Ensure the issue is reproducible** — try to use the [latest version](https://github.com/arcticicestudio/styled-modern-normalize/releases/latest) and [`develop`](https://github.com/arcticicestudio/styled-modern-normalize/tree/develop) branch. 22 | 23 | ## Metadata Head 24 | 25 | The metadata head can be added to the top of the issue as [Markdown text quote](https://help.github.com/articles/basic-writing-and-formatting-syntax) containing the ID of other related issues or additional details like dependencies to other issues/pull requests and the order it needs to be processed. 26 | 27 | > Related issues: 28 | > Must be processed **after**/**before** ISSUE_ID 29 | > Blocked by ISSUE_ID 30 | 31 | ## Description 32 | 33 | Describe the enhancement in many relevant details as possible. 34 | 35 | ### Benefits 36 | 37 | Add specific use-cases and explain why this feature or improvement would be useful and maybe include references to related known problems or bug reports. 38 | 39 | ### Possible Drawbacks 40 | 41 | Describe possible negative impacts regarding e.g. functionality or usability. 42 | 43 | ### Alternative Solutions 44 | 45 | If you've considered alternative features or solutions please describe it clearly and concise. 46 | 47 | ## Example 48 | 49 | Provide a [MCVE - The Minimal, Complete, and Verifiable Example](https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#mcve) 50 | 51 | This is a **optional section, but it can drastically increase the speed at which this issue can be processed** since it takes away the **time-consuming reconstruction** to reproduce the enhancement. 52 | 53 | The recommended way is to upload it as [Gist](https://gist.github.com) or new repository to GitHub, but of course you can [attach it to this issue](https://help.github.com/articles/file-attachments-on-issues-and-pull-requests), use any free file hosting service or paste the code in [Markdown code blocks](https://help.github.com/articles/basic-writing-and-formatting-syntax) into this issue. 54 | 55 | ## Additional Context 56 | 57 | Add any other context, screenshots or screencasts which are relevant for this issue. 58 | 59 | ## References 60 | 61 | Add any other references and links which are relevant for this issue. 62 | 63 | ## Potential Solution 64 | 65 | Maybe include references to other projects where this enhancement already exists. 66 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2018-present Arctic Ice Studio 3 | * Copyright (c) 2018-present Sven Greb 4 | * 5 | * Project: styled-modern-normalize 6 | * Repository: https://github.com/arcticicestudio/styled-modern-normalize 7 | * License: MIT 8 | */ 9 | 10 | /** 11 | * @file Exports the CSS defintions and compatible version of the "modern-normalize" package. 12 | * This is the main entry point of the package. 13 | * @version 0.2.0 14 | * @author Arctic Ice Studio 15 | * @author Sven Greb 16 | * @copyright 2018-present Arctic Ice Studio 17 | * @copyright 2018-present Sven Greb 18 | * @license MIT 19 | * @see {@link https://github.com/sindresorhus/modern-normalize modern-normalize} 20 | * @see {@link https://www.npmjs.com/package/modern-normalize modern-normalize on npm} 21 | */ 22 | 23 | import { css } from "styled-components"; 24 | 25 | const MODERN_NORMALIZE_VERSION = "0.5.0"; 26 | 27 | const modernNormalize = css` 28 | html { 29 | box-sizing: border-box; 30 | } 31 | 32 | *, 33 | *::before, 34 | *::after { 35 | box-sizing: inherit; 36 | } 37 | 38 | :root { 39 | -moz-tab-size: 4; 40 | tab-size: 4; 41 | } 42 | 43 | html { 44 | line-height: 1.15; 45 | -webkit-text-size-adjust: 100%; 46 | } 47 | 48 | body { 49 | margin: 0; 50 | } 51 | 52 | body { 53 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, 54 | "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 55 | } 56 | 57 | hr { 58 | height: 0; 59 | } 60 | 61 | abbr[title] { 62 | text-decoration: underline dotted; 63 | } 64 | 65 | b, 66 | strong { 67 | font-weight: bolder; 68 | } 69 | 70 | code, 71 | kbd, 72 | samp, 73 | pre { 74 | font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; 75 | font-size: 1em; 76 | } 77 | 78 | small { 79 | font-size: 80%; 80 | } 81 | 82 | sub, 83 | sup { 84 | font-size: 75%; 85 | line-height: 0; 86 | position: relative; 87 | vertical-align: baseline; 88 | } 89 | 90 | sub { 91 | bottom: -0.25em; 92 | } 93 | 94 | sup { 95 | top: -0.5em; 96 | } 97 | 98 | button, 99 | input, 100 | optgroup, 101 | select, 102 | textarea { 103 | font-family: inherit; 104 | font-size: 100%; 105 | line-height: 1.15; 106 | margin: 0; 107 | } 108 | 109 | button, 110 | select { 111 | text-transform: none; 112 | } 113 | 114 | button, 115 | [type="button"], 116 | [type="reset"], 117 | [type="submit"] { 118 | -webkit-appearance: button; 119 | } 120 | 121 | button::-moz-focus-inner, 122 | [type="button"]::-moz-focus-inner, 123 | [type="reset"]::-moz-focus-inner, 124 | [type="submit"]::-moz-focus-inner { 125 | border-style: none; 126 | padding: 0; 127 | } 128 | 129 | button:-moz-focusring, 130 | [type="button"]:-moz-focusring, 131 | [type="reset"]:-moz-focusring, 132 | [type="submit"]:-moz-focusring { 133 | outline: 1px dotted ButtonText; 134 | } 135 | 136 | fieldset { 137 | padding: 0.35em 0.75em 0.625em; 138 | } 139 | 140 | legend { 141 | padding: 0; 142 | } 143 | 144 | progress { 145 | vertical-align: baseline; 146 | } 147 | 148 | [type="number"]::-webkit-inner-spin-button, 149 | [type="number"]::-webkit-outer-spin-button { 150 | height: auto; 151 | } 152 | 153 | [type="search"] { 154 | -webkit-appearance: textfield; 155 | outline-offset: -2px; 156 | } 157 | 158 | [type="search"]::-webkit-search-decoration { 159 | -webkit-appearance: none; 160 | } 161 | 162 | ::-webkit-file-upload-button { 163 | -webkit-appearance: button; 164 | font: inherit; 165 | } 166 | 167 | summary { 168 | display: list-item; 169 | } 170 | `; 171 | 172 | export { modernNormalize, MODERN_NORMALIZE_VERSION }; 173 | 174 | export default modernNormalize; 175 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bugs.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | name: Bug Report 4 | about: Report a bug that is caused by the code in this repository 5 | 6 | --- 7 | 8 | 9 | 10 | > **Please read the [contribution guidelines](https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md) before filling out this issue template**. 11 | 12 | ## Prerequisites 13 | 14 | This section and the instructions in the sections below are only part of this issue template. Please ensure to **delete this whole section, all pre-filled instructions of the sections below and sections you have not filled out before submitting** to ensure a clear structure and overview. 15 | 16 | Please do your best to provide as much information as possible and use a clear and descriptive title for your bug report to help maintainers and the community understand and reproduce the behavior, find related reports and to resolve the ticket faster. 17 | 18 | * **Ensure the issue has not already been reported by using the [GitHub Issues search](https://github.com/arcticicestudio/styled-modern-normalize/issues)** — if it has **and the issue is still open**, add a comment to the existing issue instead of opening this new one. If you find a closed issue that seems to be similar to this one, include a link to the original issue(s) in the [metadata head](#metadata-head) section of this issue. 19 | * **Ensure the contribution belongs to the [correct repository](https://github.com/arcticicestudio?tab=repositories&q=styled-modern-normalize).** 20 | * **Ensure the issue is reproducible** — try to use the [latest version](https://github.com/arcticicestudio/styled-modern-normalize/releases/latest) and [`develop`](https://github.com/arcticicestudio/styled-modern-normalize/tree/develop) branch. 21 | 22 | ## Metadata Head 23 | 24 | The metadata head can be added to the top of the issue as [Markdown text quote](https://help.github.com/articles/basic-writing-and-formatting-syntax) containing the the ID of other related issues or additional details like dependencies to other issues/pull requests and the order it needs to be processed. 25 | 26 | > Related issues: 27 | > Must be processed **after**/**before** ISSUE_ID 28 | > Blocked by ISSUE_ID 29 | 30 | ## Description 31 | 32 | Describe the bug as in many relevant details as possible with a clear and concise description. Ensure to fill in the [steps to reproduce](#steps-to-reproduce) it. 33 | 34 | ### Steps to Reproduce 35 | 36 | 1. Step One 37 | 2. Step Two 38 | 3. ... 39 | 40 | ### Expected Behavior 41 | 42 | What you expect to happen? 43 | 44 | ### Actual Behavior 45 | 46 | What actually happens? 47 | 48 | ## Example 49 | 50 | Provide a [MCVE - The Minimal, Complete, and Verifiable Example](https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#mcve) 51 | 52 | This is a **optional section, but it can drastically increase the speed at which this issue can be processed** since it takes away the **time-consuming reconstruction** to reproduce the bug. 53 | 54 | The recommended way is to upload it as [Gist](https://gist.github.com) or new repository to GitHub, but of course you can [attach it to this issue](https://help.github.com/articles/file-attachments-on-issues-and-pull-requests), use any free file hosting service or paste the code in [Markdown code blocks](https://help.github.com/articles/basic-writing-and-formatting-syntax) into this issue. 55 | 56 | ## Environment and Versions 57 | 58 | * What is the version of _styled-modern-normalize_ you are running? 59 | * What is the name and the version of your OS? 60 | * Have you tried to reproduce it on different OS environments and if yes is the behavior the same for all? 61 | * Have you installed all [required peer dependencies](https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#peer-dependencies)? 62 | * Please add the versions of the installed packages. 63 | * If the problem is related to [Node.js](https://nodejs.org) please provide the Node.js version you're running. 64 | * Are you using any additional CLI arguments for Node.js? 65 | * ... any additional information 66 | 67 | ## Stack Trace and Error Messages 68 | 69 | ```raw 70 | Paste the full stack trace, error messages or the logfile here ... 71 | ``` 72 | 73 | ... or [attach them as files](https://help.github.com/articles/file-attachments-on-issues-and-pull-requests) to this issue. 74 | 75 | ## Additional Context 76 | 77 | Add any other context, screenshots or screencasts which are relevant for this issue. 78 | 79 | ## References 80 | 81 | Add any other references and links which are relevant for this issue. 82 | 83 | ## Potential Solution 84 | 85 | Maybe include the lines of code that you have identified as causing the bug or references to other projects where this bug has already been reported. 86 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

modern-normalize.css for styled-components

4 | 5 |

6 | 7 |

8 | 9 | # 0.2.0 10 | 11 | ![Release Date: 2018-12-01](https://img.shields.io/badge/Release_Date-2018--12--01-88C0D0.svg?style=flat-square) [![Project Board](https://img.shields.io/badge/Project_Board-0.2.0-88C0D0.svg?style=flat-square)](https://github.com/arcticicestudio/styled-modern-normalize/projects/4) [![Milestone](https://img.shields.io/badge/Milestone-0.2.0-88C0D0.svg?style=flat-square)](https://github.com/arcticicestudio/styled-modern-normalize/milestone/2) 12 | 13 | > Detailed information can be found in the [project documentation][docs]. 14 | 15 | ### Features 16 | 17 | ❯ Updated to the latest [modern-normalize][gh-modern-normalize] upstream version [0.5.0][gh-modern-normalize-v0.5.0]. For details about included changes see the upstream repository and changelog. (#4 in PR #5, 08a48963, @azdanov) 18 | 19 | ❯ Added support for the latest [styled-components][] major version [4.x.x][gh-styled-components-v4.0.0] by adding instructions to the documentation how to use the styled with the new [`createGlobalStyle`][sc-docs-api-cgs] API function. (#6 in PR #7, cb3716c3, @azdanov) 20 | 21 | Details about new awesome features and performance boosts can be found in the [announcement blog post][med-sc-announce-v4] and the [migration guide][sc-docs-migr-v4]. 22 | 23 | # 0.1.0 24 | 25 | ![Release Date: 2018-05-19](https://img.shields.io/badge/Release_Date-2018--05--19-88C0D0.svg?style=flat-square) [![Project Board](https://img.shields.io/badge/Project_Board-0.1.0-88C0D0.svg?style=flat-square)](https://github.com/arcticicestudio/styled-modern-normalize/projects/3) [![Milestone](https://img.shields.io/badge/Milestone-0.1.0-88C0D0.svg?style=flat-square)](https://github.com/arcticicestudio/styled-modern-normalize/milestone/1) 26 | 27 | > Detailed information can be found in the [project documentation][docs]. 28 | 29 | ### Features 30 | 31 | ❯ Implemented the initial API for the CSS definitions based on [modern-normalize][gh-modern-normalize] version [0.4.0][npm-modern-normalize-v0.4.0]. 32 | 33 | The package exposes the following API exports. (#1 in PR #2, 8768a8f7) 34 | 35 | * default export `modernNormalize` 36 | * `MODERN_NORMALIZE_VERSION` to provide the currently supported _modern-normalize.css_ version 37 | * both are also available as named exports 38 | 39 | Detailed usage instructions can be found in the [usage documentation][docs-usage]. 40 | 41 |

42 | 43 |

Copyright © 2018-present Arctic Ice Studio & Sven Greb

44 | 45 |

46 | 47 | [docs]: https://github.com/arcticicestudio/styled-modern-normalize#readme 48 | [docs-usage]: https://github.com/arcticicestudio/styled-modern-normalize#usage 49 | [gh-modern-normalize]: https://github.com/sindresorhus/modern-normalize 50 | [gh-modern-normalize-v0.5.0]: https://github.com/sindresorhus/modern-normalize/releases/tag/v0.5.0 51 | [gh-styled-components-v4.0.0]: https://github.com/styled-components/styled-components/releases/tag/v4.0.0 52 | [med-sc-announce-v4]: https://medium.com/styled-components/styled-components-v4-new-final-finalest-for-real-final-final-psd-fa4d83398a77 53 | [npm-modern-normalize-v0.4.0]: https://www.npmjs.com/package/modern-normalize/v/0.4.0 54 | [sc-docs-api-cgs]: https://www.styled-components.com/docs/api#createglobalstyle 55 | [sc-docs-migr-v4]: https://www.styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v4 56 | [styled-components]: https://www.styled-components.com 57 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | > **Please read the [contribution guidelines](https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md) before filling out this issue template**. 4 | 5 | ## Prerequisites 6 | 7 | This section and the instructions in the sections below are only part of this issue template. Please ensure to **delete this whole section, all pre-filled instructions of the sections below and sections you have not filled out before submitting** to ensure a clear structure and overview. 8 | 9 | Please do your best to provide as much information as possible and use a clear and descriptive title for your enhancement suggestion or bug report to help maintainers and the community understand and reproduce the behavior, find related reports and to resolve the ticket faster. 10 | 11 | * **Ensure the issue has not already been reported by using the [GitHub Issues search](https://github.com/arcticicestudio/styled-modern-normalize/issues)** — if it has **and the issue is still open**, add a comment to the existing issue instead of opening this new one. If you find a closed issue that seems to be similar to this one, include a link to the original issue in the [metadata head](#metadata-head) section of this issue. 12 | * **Ensure the contribution belongs to the [correct repository](https://github.com/arcticicestudio?tab=repositories&q=styled-modern-normalize).** 13 | * **Ensure the issue is reproducible** — try to use the [latest version](https://github.com/arcticicestudio/styled-modern-normalize/releases/latest) and [`develop`](https://github.com/arcticicestudio/styled-modern-normalize/tree/develop) branch. 14 | * **Remove not fitting sections of this template based on the type of the issue** 15 | 16 | ## Metadata Head 17 | 18 | The metadata head should be added to the top of the issue as [Markdown text quote](https://help.github.com/articles/basic-writing-and-formatting-syntax) containing the [issue type](#issue-type) and if necessary the ID of other related issues or additional details like dependencies to other issues/pull requests and the order it needs to be processed. 19 | 20 | > Issue type: 21 | > Related issues: 22 | > Must be processed **after**/**before** ISSUE_ID 23 | > Blocked by ISSUE_ID 24 | 25 | ### Issue Type 26 | 27 | Set the _type_ of this issue. It determines which information will be required in the following sections when it is an [bug report](https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#bug-reports) or an [enhancement suggestion](https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#enhancement-suggestions). 28 | 29 | * _bug_ 30 | * _feature_ 31 | * _improvement_ 32 | * _proposal_ 33 | * _question_ 34 | * _rfc_ 35 | * _subtask_ 36 | * _task_ 37 | 38 | ## Description 39 | 40 | Describe the enhancement or bug as in many relevant details as possible. If this is a bug provide ensure to fill in the [steps to reproduce](#steps-to-reproduce) it. 41 | 42 | ### Benefits 43 | 44 | If this is a enhancement suggestion add specific use-cases and explain why this feature or improvement would be useful and maybe include references to related known problems or bug reports. 45 | 46 | ### Possible Drawbacks 47 | 48 | If this is a enhancement suggestion describe possible negative impacts regarding e.g. functionality or usability. 49 | 50 | ### Alternative Solutions 51 | 52 | If this is a enhancement suggestion please describe clearly and concise if you've considered alternative features or solutions. 53 | 54 | ### Steps to Reproduce 55 | 56 | 1. Step One 57 | 2. Step Two 58 | 3. ... 59 | 60 | ### Expected Behavior 61 | 62 | What you expect to happen? 63 | 64 | ### Actual Behavior 65 | 66 | What actually happens? 67 | 68 | ## Example 69 | 70 | Provide a [MCVE - The Minimal, Complete, and Verifiable Example](https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#mcve) 71 | 72 | This is a **optional section, but it can drastically increase the speed at which this issue can be processed** since it takes away the **time-consuming reconstruction** to reproduce the enhancement or bug. 73 | 74 | The recommended way is to upload it as [Gist](https://gist.github.com) or new repository to GitHub, but of course you can [attach it to this issue](https://help.github.com/articles/file-attachments-on-issues-and-pull-requests), use any free file hosting service or paste the code in [Markdown code blocks](https://help.github.com/articles/basic-writing-and-formatting-syntax) into this issue. 75 | 76 | ## Environment and Versions 77 | 78 | * What is the version of _styled-modern-normalize_ you are running? 79 | * What is the name and the version of your OS? 80 | * Have you tried to reproduce it on different OS environments and if yes is the behavior the same for all? 81 | * Have you installed all [required peer dependencies](https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#peer-dependencies)? 82 | * Please add the versions of the installed packages. 83 | * If the problem is related to [Node.js](https://nodejs.org) please provide the Node.js version you're running. 84 | * Are you using any additional CLI arguments for Node.js? 85 | * ... any additional information 86 | 87 | ## Stack Trace and Error Messages 88 | 89 | ```raw 90 | Paste the full stack trace, error messages or the logfile here ... 91 | ``` 92 | 93 | ... or [attach them as files](https://help.github.com/articles/file-attachments-on-issues-and-pull-requests) to this issue. 94 | 95 | ## Additional Context 96 | 97 | Add any other context, screenshots or screencasts which are relevant for this issue. 98 | 99 | ## References 100 | 101 | Add any other references and links which are relevant for this issue. 102 | 103 | ## Potential Solution 104 | 105 | If this is a bug report this might include the lines of code that you have identified as causing the bug or in case of an enhancement suggestion references to other projects where this enhancement already exists. 106 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | 3 | All members, committers and volunteers in this project are required to act according to the following Code of Conduct. We ask you to follow these guidelines which help steer our interactions and strive to keep _styled-modern-normalize_ a positive and growing project and help us provide and ensure a safe environment for everyone. 4 | 5 | If you are being harassed, notice that someone else is being harassed, or have any other concerns, please contact one of the core team members via [email][]. Your reports will be taken seriously and not dismissed or argued with. 6 | 7 | ## What we believe in and how we act 8 | 9 | * In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make 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. We welcome people regardless of these or other attributes. 10 | * Our community is based on mutual respect, tolerance, and encouragement. 11 | * We believe that a diverse community where people treat each other with respect is stronger, more vibrant and has more potential contributors and more sources for ideas. We aim for more diversity. 12 | * We are kind, welcoming and courteous to everyone. 13 | * We are respectful of others, their positions, their skills, their commitments and their efforts. 14 | * We are attentive in our communications, whether in person or online, and we are tactful and respectful when approaching differing views and experiences. 15 | * We are aware that language shapes reality. Thus, we use inclusive, gender-neutral language in the documents we provide and when we talk to people. When referring to a group of people, we aim to use gender-neutral terms like "team", "folks" or "everyone". [1][ref-gender-neutral-docs] 16 | * We respect that people have differences of opinion and criticize constructively. 17 | 18 | ## Unacceptable Behavior 19 | 20 | * Do not be mean or rude. 21 | * Do not discriminate against anyone. 22 | * Sexism and racism of any kind (including sexist and racist "jokes"), demeaning or insulting behaviour and harassment are seen as direct violations to this Code of Conduct. Harassment includes offensive verbal comments related to age, body size, culture, ethnicity, gender expression, gender identity, level of experience, nationality, personal ability or disability, physical appearance, physical or mental difference, race, religion, set of skills, sexual orientation, socio-economic status, and subculture. Harassment also includes sexual images in public spaces, deliberate intimidation, stalking, following, harassing photography or recording, inappropriate physical contact, and unwelcome sexual attention. 23 | * Respect that some individuals and cultures consider the casual use of profanity offensive and off-putting. 24 | * Derailing, tone arguments and otherwise playing on people's desires to be nice are not welcome, especially in discussions about violations to this Code of Conduct. 25 | * Please avoid unstructured critique. 26 | * Likewise any spamming, trolling, flaming, baiting or other attention-stealing behaviour is not welcome. 27 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 28 | * Other conduct which could reasonably be considered inappropriate in a professional setting 29 | 30 | ## Responsibilities 31 | 32 | The members of the core team and 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. 33 | 34 | ## Enforcement 35 | 36 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project core team members or owner via [email][]. 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. 37 | 38 | 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. 39 | 40 | ## Consequences for Violations 41 | 42 | If a participant engages in any behaviour violating this Code of Conduct, the core team members and project owner of this project may take any action they deem appropriate, including warning the offender or expulsion from the project, exclusion from any interaction and loss of all rights in this project. 43 | 44 | 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. 45 | 46 | Decisions about consequences of violations of this Code of Conduct are made by this projects core team members and project owner as named above and will not be discussed with the person responsible for the violation. 47 | 48 | ## Scope 49 | 50 | 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. 51 | 52 | --- 53 | 54 | Thanks for the inspirations and attributions to GitHub's [Open Source Guides](https://opensource.guide), [Hoodie's Code of Conduct](http://hood.ie/code-of-conduct) and the [Contributor Covenant Version 1.4](http://contributor-covenant.org/version/1/4/). 55 | 56 | [email]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/.mailmap 57 | [ref-gender-neutral-docs]: https://modelviewculture.com/pieces/gendered-language-feature-or-bug-in-software-documentation 58 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

modern-normalize.css for styled-components

4 | 5 |

6 | 7 |

8 | 9 |

10 | 11 | A common import method for `modern-normalize.css` is to use [unnamed imports][mdn-import] which works fine for projects with _vanilla_ CSS or pre-processors workflows like Sass/Less and a bundler like [webpack][], but it doesn't make use of the advantages of CSS-in-JS libraries like _styled-components_, e.g. auto-prefixing and CSS optimizing. 12 | 13 | [styled-modern-normalize][npm-styled-modern-normalize] is a proxy package of [modern-normalize.css][npm-modern-normalize] for [styled-components][] to provide the CSS as template literal with interpolation by using _styled-component_'s [`css`][sc-doc-api-css] API function. This allows to import and use it via [`injectGlobal`][sc-doc-api-injectglobal] or any other styled component. 14 | 15 | The package is based on and compatible with _modern-normalize.css_ version 0.5.0. The provided styles are compatible with _styled-components_ v2, v3 and v4. 16 | 17 | ## Getting Started 18 | 19 | ### Installation 20 | 21 | Add the package as dependency to your project: 22 | 23 | ```sh 24 | npm install --save styled-modern-normalize 25 | ``` 26 | 27 | Run `npm install` from within the project root to bootstrap the project and install the development- and runtime dependencies. Note that **this will not install the required [styled-components][npm-styled-components]** package which is defined as [peer dependency][nodejs-blog-peerdeps] and must be installed separately as described in the [peer dependencies](#peer-dependencies) section below. 28 | 29 | #### Peer Dependencies 30 | 31 | This package uses [styled-components][npm-styled-components] API functions that return [React][] components. 32 | 33 | Therefore this package depends on the [styled-components][npm-styled-components] and [react][npm-react] packages defined as [peer dependencies][nodejs-blog-peerdeps]. 34 | 35 | Linux & macOS users can easily install all peer dependencies by using the [npx][npm-npx] which comes prebundled with **npm 5** or higher: 36 | 37 | ```sh 38 | npx install-peerdeps styled-modern-normalize 39 | ``` 40 | 41 | When using **npm < 5** the _npx_ tool is not prebundled, but users can either simply install it globally and then run the above command or install the [install-peerdeps][npm-install-peerdeps] package locally/globally to let it handle the installation of all peer dependencies. 42 | 43 | ```sh 44 | # Via local installation… 45 | npm install install-peerdeps 46 | ./node_modules/.bin/install-peerdeps styled-modern-normalize 47 | 48 | # …or globally. 49 | npm install -g install-peerdeps 50 | install-peerdeps styled-modern-normalize 51 | ``` 52 | 53 | #### Manually 54 | 55 | All peer dependencies can also be installed manually (e.g. for users running a Microsoft Windows based system) by installing the correct version of each package: 56 | 57 | ```sh 58 | npm info "styled-modern-normalize@latest" peerDependencies 59 | ``` 60 | 61 | ### Usage 62 | 63 | _styled-modern-normalize_ can be used by importing the [default or named export][mdn-export] `modernNormalize`. 64 | 65 | ```js 66 | // With default export… 67 | import modernNormalize from "styled-modern-normalize"; 68 | 69 | // …or via named export. 70 | import { modernNormalize } from "styled-modern-normalize"; 71 | ``` 72 | 73 | To inject the styles when using _styled-components_ v4 the [`createGlobalStyle`][sc-doc-api-createglobalstyle] API function can be used that generates a `StyledComponent` Reach component: 74 | 75 | ```js 76 | // Usage with the latest "styled-components" v4. 77 | import { createGlobalStyle } from "styled-components"; 78 | 79 | const ModernNormalize = createGlobalStyle` 80 | ${modernNormalize} 81 | /* ... */ 82 | `; 83 | 84 | // Use the generated component in your rendering logic to inject the styles. 85 | /* ... */ 86 | 87 | 88 | ; 89 | /* ... */ 90 | ``` 91 | 92 | When using _styled-components_ v2 or v3 the styles can be injected using the [`injectGlobal`][sc-doc-api-injectglobal] API: 93 | 94 | ```js 95 | // Usage with "styled-components" v2 or v3. 96 | import { injectGlobal } from "styled-components"; 97 | 98 | const cssBaseline = injectGlobal` 99 | ${modernNormalize} 100 | /* ... */ 101 | `; 102 | ``` 103 | 104 | The version of _modern-normalize.css_ this package is currently based is exported as `MODERN_NORMALIZE_VERSION`: 105 | 106 | ```js 107 | import { MODERN_NORMALIZE_VERSION } from "styled-modern-normalize"; 108 | 109 | // Example: 110 | console.log(MODERN_NORMALIZE_VERSION); // "0.5.0" 111 | ``` 112 | 113 | ### Development Workflow 114 | 115 | Run `npm install` from within the project root to bootstrap the project and install the development- and runtime dependencies. To start the development with automatic recompilation on any source file change in the `src/` directory run 116 | 117 | ```sh 118 | npm run dev 119 | ``` 120 | 121 | The project is also configured for the opinionated code formatter [Prettier][] which provides [integration support for many editors][prettier-doc-editors] to e.g. automatically format the source file on save. 122 | 123 | #### Building 124 | 125 | A distribution build can be created by running 126 | 127 | ```sh 128 | npm run dist 129 | ``` 130 | 131 | Continuous integration builds are running at [Circle CI][circle-ci] and [Travis CI][travis-ci]. 132 | 133 | #### Testing 134 | 135 | ##### Linting 136 | 137 | JavaScript sources are linted with [ESLint][] using the [arcticicestudio-base][npm-eslint-config-arcticicestudio-base] configuration which can be run with 138 | 139 | ```sh 140 | npm run lint:js 141 | ``` 142 | 143 | Markdown sources are linted with [remark-lint][npm-remark-lint] using the [arcticicestudio preset][npm-remark-preset-lint-arcticicestudio] which can be run with 144 | 145 | ```sh 146 | npm run lint:md 147 | ``` 148 | 149 | All linting tasks can be run with 150 | 151 | ```sh 152 | npm run lint 153 | ``` 154 | 155 | ## Contributing 156 | 157 | Read the [contributing guide][gh-contrib] to learn about the development process and how to propose [enhancement suggestions][gh-contrib-enhancements] and [report bugs][gh-contrib-bug-reports], how to [submit pull requests][gh-contrib-pr] and the project's [styleguides][gh-contrib-styleguides], [branch organization][gh-contrib-branch-org] and [versioning][gh-contrib-versioning] model. 158 | 159 | The guide also includes information about [minimal, complete, and verifiable examples][gh-contrib-mcve] and other ways to contribute to the project like [improving existing issues][gh-contrib-improve-issues] and [giving feedback on issues and pull requests][gh-contrib-feedback]. 160 | 161 |

162 | 163 |

Copyright © 2018-present Arctic Ice Studio & Sven Greb

164 | 165 |

166 | 167 | [circle-ci]: https://circleci.com/gh/arcticicestudio/styled-modern-normalize 168 | [eslint]: https://eslint.org 169 | [gh-contrib]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md 170 | [gh-contrib-branch-org]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#branch-organization 171 | [gh-contrib-bug-reports]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#bug-reports 172 | [gh-contrib-enhancements]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#enhancement-suggestions 173 | [gh-contrib-feedback]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#give-feedback-on-issues-and-pull-requests 174 | [gh-contrib-improve-issues]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#improve-issues 175 | [gh-contrib-mcve]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#mcve 176 | [gh-contrib-pr]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#pull-requests 177 | [gh-contrib-styleguides]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#styleguides 178 | [gh-contrib-versioning]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#versioning 179 | [mdn-export]: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export 180 | [mdn-import]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import 181 | [nodejs-blog-peerdeps]: https://nodejs.org/en/blog/npm/peer-dependencies 182 | [npm-eslint-config-arcticicestudio-base]: https://www.npmjs.com/package/eslint-config-arcticicestudio-base 183 | [npm-install-peerdeps]: https://www.npmjs.com/package/install-peerdeps 184 | [npm-modern-normalize]: https://www.npmjs.com/package/modern-normalize 185 | [npm-npx]: https://www.npmjs.com/package/npx 186 | [npm-react]: https://www.npmjs.com/package/react 187 | [npm-remark-lint]: https://www.npmjs.com/package/remark-lint 188 | [npm-remark-preset-lint-arcticicestudio]: https://www.npmjs.com/package/remark-preset-lint-arcticicestudio 189 | [npm-styled-components]: https://www.npmjs.com/package/styled-components 190 | [npm-styled-modern-normalize]: https://www.npmjs.com/package/styled-modern-normalize 191 | [prettier]: https://prettier.io/docs/en/editors 192 | [prettier-doc-editors]: https://prettier.io/docs/en/editors 193 | [react]: https://reactjs.org 194 | [sc-doc-api-createglobalstyle]: https://www.styled-components.com/docs/api#createglobalstyle 195 | [sc-doc-api-css]: https://www.styled-components.com/docs/api#css 196 | [sc-doc-api-injectglobal]: https://www.styled-components.com/docs/api#injectglobal 197 | [styled-components]: https://www.styled-components.com 198 | [travis-ci]: https://travis-ci.org/arcticicestudio/styled-modern-normalize 199 | [webpack]: https://webpack.js.org 200 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to styled-modern-normalize 2 | 3 | Thanks for contributing to styled-modern-normalize! 4 | 5 | This is a set of guidelines for contributing to styled-modern-normalize. Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved. 6 | 7 | Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue, assessing changes, and helping you finalize your pull requests. 8 | 9 | As for everything else in the project, the contributions to styled-modern-normalize are governed by our [Code of Conduct][code-of-conduct]. By participating, you are expected to uphold this code. Please report unacceptable behavior to one of the core team members via [email][]. 10 | 11 | ## Getting Started 12 | 13 | styled-modern-normalize is an open source project and we love to receive contributions from the community! There are many ways to contribute, from [writing- and improving documentation and tutorials](#documentations), [reporting bugs](#bug-reports), [submitting enhancement suggestions](#enhancement-suggestions) which can be incorporated into styled-modern-normalize itself by [submitting a pull request](#pull-requests). 14 | 15 | The project development workflow and process uses [GitHub Issues][gh-issues]- and [Pull Requests][gh-pr] management to track issues and pull requests. 16 | 17 | Before you continue with these contribution guidelines we highly recommend to read the awesome GitHub [Open Source Guide](https://opensource.guide) on how to [making open source contributions][gh-osguide-contribute]. 18 | 19 | ### Bug Reports 20 | 21 | A bug is a _demonstrable problem_ that is caused by the code in the repository. This section guides you through submitting a bug report for styled-modern-normalize. Following these guidelines helps maintainers and the community understand your report, reproduce the behavior and find related reports. 22 | 23 | **Do NOT report security vulnerabilities in public issues!** Please contact one of the core team members or the project owner in a responsible manner by [email][] only. We will assess the issue as soon as possible on a best-effort basis and will give you an estimate for when we have a fix and release available for an eventual public disclosure. 24 | 25 | * **Use the [GitHub Issues search][gh-issues]** — check if the issue has already been reported. If it has **and the issue is still open**, add a comment to the existing issue instead of opening a new one. If you find a closed issue that seems like it is the same thing that you are experiencing, open a new issue and include a link to the original issue in the body of your new one. 26 | * **Determine [which repository the contribution belongs to](#port-projects).** 27 | * **Check if the issue has been fixed** — try to reproduce it using the [latest version][version-latest] and [`develop`][branch-develop] branch in the repository. 28 | * **Isolate the problem** — ideally create a [MCVE](#mcve). 29 | 30 | When you are creating a bug report, please provide as much detail and context as possible. Fill out [the required template][template-issue], the information it asks for helps maintainers to reproduce the problem and resolve issues faster. 31 | 32 | * **Use a clear and descriptive title** for the issue to identify the problem. 33 | * **Describe the exact steps which reproduce the problem** in as many details as possible. 34 | * **Include screenshots and animated GIFs** which show you following the described steps and clearly demonstrate the problem. 35 | * **Provide specific examples to demonstrate the steps**. Include links to files or GitHub projects, or copy/pasteable snippets. If you are providing snippets in the issue, use [Markdown code blocks][gh-help-markdown-code-blocks] or [attach files to the issue](https://help.github.com/articles/file-attachments-on-issues-and-pull-requests). 36 | 37 | If possible please provide more context by answering these questions: 38 | 39 | * **Did the problem start happening recently** e.g. after updating to a new version of styled-modern-normalize or was this always a problem? 40 | * If the problem started happening recently, **can you reproduce the problem in an older version of styled-modern-normalize?** 41 | * What is the most recent version in which the problem does not happen? 42 | * **Can you reliably reproduce the issue?** If not, please provide details about how often the problem happens and under which conditions it normally happens. 43 | 44 | Please include details about your configuration and environment based on the [issue template][template-issue]. 45 | 46 | ### Enhancement Suggestions 47 | 48 | This section guides you through submitting an enhancement suggestion, including completely new features and minor improvements to existing functionality. Following these guidelines helps maintainers and the community understand your suggestion and find related suggestions. 49 | 50 | * **Use the [GitHub Issues search][gh-issues]** — check if this enhancement has already been suggested. If it has **and the issue is still open**, add your additions as comment to the existing issue instead of opening a new one. 51 | * **Determine [which repository the contribution belongs to](#port-projects).** 52 | * **Check if the enhancement has already been implemented** — use the [latest version][version-latest] and [`develop`][branch-develop] branch to ensure that the feature or improvement has not already been added. 53 | * **Provide a reduced show case** — ideally create a [MCVE](#mcve). 54 | 55 | Before creating enhancement suggestions, please check if your idea fits with the scope and provide as much detail and context as possible using a structured layout like the [the issue template][template-issue]. 56 | 57 | * **Use a clear and descriptive title** for the issue to identify the suggestion. 58 | * **Provide a step-by-step description of the suggested enhancement** in as many details as possible and provide use-cases. 59 | * **Provide examples to demonstrate the need of an enhancement**. Include copy/pasteable snippets which you use in those examples, use [Markdown code blocks][gh-help-markdown-code-blocks] or [attach files to the issue][gh-help-attach-files]. 60 | * **Describe the current behavior** and **explain which behavior you expected to see instead** and why. 61 | * **Explain why this enhancement would be useful** to most styled-modern-normalize users. 62 | * **Maybe list some other projects where this enhancement exists.** 63 | 64 | ### Pull Requests 65 | 66 | This section guides you through submitting an pull request. Following these guidelines helps maintainers and the community to better understand your code. 67 | 68 | **Please [suggest an enhancement](#enhancement-suggestions) or [report a bug](#bug-reports) first before embarking on any significant pull request** (e.g. implementing features, refactoring code, fixing a bug), otherwise you risk spending a lot of time working on something that the core team members and project owner might not want to merge into the project. 69 | 70 | When you are submitting an pull request, please provide as much detail and context as possible. Fill out [the required template][template-pr] to help maintainers to understand your submitted code. 71 | 72 | * **Use a clear and descriptive title for the pull request** 73 | * **Do not include issue numbers in the pull request title** but fill in the metadata section at the top of the [required pull request template][template-pr] making use of the [GitHub issue keywords][gh-help-issue-keywords] to link to specific [enhancement suggestions](#enhancement-suggestions) or [bug reports](#bug-reports). 74 | * **Include screenshots and animated GIFs** which show you following the described steps and clearly demonstrate the change. 75 | * **Make sure to follow the [Java Checkstyle](#java-code-style) and [Git commit message](#git-commit-messages) style guides**. 76 | * **Remain focused in scope and avoid to include unrelated commits**. 77 | * **Features and improvements should always be accompanied with tests and documentation**. If the pull request improves the performance consider to include a benchmark test, optimally including a chart. 78 | * **Lint and test before submitting the pull request**. 79 | * **Make sure to create the pull request from a [topic branch][git-docs-branching-workflows]**. 80 | 81 | **All pull requests must be send against the `develop` branch** - Please read the [branch organization](#branch-organization) section below for details about the branching model. 82 | 83 | ### Documentations 84 | 85 | styled-modern-normalize's documentation consists of guides, which helps users to learn about the project, and the project docs, which serves as a reference. 86 | 87 | You can help improve the docs and guides by making them more coherent, consistent or readable, adding missing information, correcting factual errors, fixing typos, bringing them up to date when there are differences to the latest version. This can be done by submitting a [enhancement suggestion](#enhancement-suggestions) and then opening a [pull request](#pull-requests) for it. 88 | 89 | ## Branch Organization 90 | 91 | styled-modern-normalize uses the [gitflow][gitflow] branching model. The repository consists of two core branches with an infinite development lifecycle: 92 | 93 | * `master` - The source code of `HEAD` always reflects a tagged release version. 94 | * `develop` - The default branch where the source code of `HEAD` always reflects a state with the latest development state. 95 | 96 | **All [pull requests](#pull-requests) for the limited development lifecycle _story_/_topic_ branches must be send against the `develop` branch**. 97 | 98 | ## How else can I help? 99 | 100 | ### Improve Issues 101 | 102 | Some issues are created with missing information, not reproducible, or plain invalid. You can help to make it easier for maintainer to understand and resolve them faster. since handling issues takes a lot of time that could rather spend on writing code. 103 | 104 | ### Give Feedback On Issues and Pull Requests 105 | 106 | We're always looking for more opinions on discussions in issues and pull request reviews which is a good opportunity to influence the future direction of styled-modern-normalize. 107 | 108 | The [type-question][gh-issues-label-question] issue label is a good place to find ongoing discussions and questions. 109 | 110 | ## Styleguides 111 | 112 | Every major open source project has its own style guide, a set of standards and conventions for the writing and design of code, documentations and Git commit messages. It is much easier to understand a large codebase when all the code in it is in a consistent style. 113 | 114 | A style guide establishes and enforces style to improve the intelligibility and communication within the project community. It ensures consistency and enforces best practice in usage and language composition. 115 | 116 | ### JavaScript Code Style 117 | 118 | styled-modern-normalize adheres to the [Arctic Ice Studio JavaScript Style Guide][styleguide-javascript-github]. 119 | 120 | [![Arctic Ice Studio JavaScript Style Guide Badge][styleguide-javascript-badge]][styleguide-javascript-github] 121 | 122 | ### Git Commit Messages 123 | 124 | A well-crafted Git commit message is the best way to communicate _context_ about a change to the maintainers. The code will tell what changed, but only the commit message can properly tell why. Re-establishing the context of a piece of code is wasteful. We can't avoid it completely, so our efforts should go to reducing it as much as possible. 125 | 126 | There are many guides and articles like e.g. the [Arctic Ice Studio Git Style Guide][styleguide-git-github]. The style guide assumes that you are familiar with the [gitflow][gitflow] branching model. 127 | 128 | [![Arctic Ice Studio Git Style Guide][styleguide-git-badge]][styleguide-git-github] 129 | 130 | ## MCVE 131 | 132 | A Minimal, Complete, and Verifiable Example. 133 | 134 | When [reporting a bug](#bug-reports), somtimes even when [suggestig a enhancement](#enhancement-suggestions), the issue can be processed faster if you provide code for reproduction. That code should be… 135 | 136 | * …Minimal – Use as little code as possible that still produces the same behavior 137 | * …Complete – Provide all parts needed to reproduce the behavior 138 | * …Verifiable – Test the code you're about to provide to make sure it reproduces the behavior 139 | 140 | A MCVE is a common practice like on [Stack Overflow][stackoverflow-mcve] and sometimes it is also called [SSCCE][sscce], a _Short, Self Contained, Correct (Compilable), Example_. 141 | 142 | The recommened way for GitHub based projects is to create it as [Gist](https://gist.github.com) or new repository, but of course you can [attach it to issues and pull requests as files](https://help.github.com/articles/file-attachments-on-issues-and-pull-requests), use any free code paste- or file hosting service or paste the code in [Markdown code blocks][gh-help-markdown-code-blocks] into the issue. 143 | 144 | ### Minimal 145 | 146 | The more code there is to go through, the less likely developers can understand your enhancement or find the bug. Streamline your example in one of two ways: 147 | 148 | * **Restart from scratch**. Create new code, adding in only what is needed to demonstrate the behavior and is also useful if you can't post the original code publicly for legal or ethical reasons. 149 | * **Divide and conquer**. When you have a small amount of code, but the source of the bug is entirely unclear, start removing code a bit at a time until the problem disappears – then add the last part back and document this behavior to help developers to trace- and debug faster. 150 | 151 | #### Minimal and readable 152 | 153 | Minimal does not mean terse – don't sacrifice communication to brevity. Use consistent naming and indentation following the [styleguide](#styleguides), and include comments if needed to explain portions of the code. 154 | 155 | ### Complete 156 | 157 | Make sure all resources and code necessary to reproduce the behavior is included. The problem might not be in the part you suspect it is, but another part entirely. 158 | 159 | ### Verifiable 160 | 161 | To entirely understand your enhancement or bug report, developers will need to verify that it _exists_: 162 | 163 | * **Follow the contribution guidelines regarding the description and details**. Without information developers won't be able to understand and reproduce the behavior. 164 | * **Eliminate any issues that aren't relevant**. Ensure that there are no compile-time errors. 165 | * **Make sure that the example actually reproduces the problem**. Sometimes the bug gets fixed inadvertently or unconsciously while composing the example or does not occur when running on fresh machine environment. 166 | 167 | ## Versioning 168 | 169 | styled-modern-normalize follows the [Semantic Versioning Specification][semver] (SemVer). We release patch versions for bugfixes, minor versions for enhancements like new features and improvements, and major versions for any backwards incompatible changes. Deprecation warnings are introduced for breaking changes in a minor version so that users learn about the upcoming changes and migrate their code in advance. 170 | 171 | Every significant change is documented in the [changelog][changelog]. 172 | 173 | ## Credits 174 | 175 | Thanks for the inspirations and attributions to GitHub's [Open Source Guides](https://opensource.guide) and various contribution guides of large open source projects like [Atom][ref-atom-contributing], [React][ref-react-contributing] and [Ruby on Rails][ref-rubyonrails-contributing]. 176 | 177 | [branch-develop]: https://github.com/arcticicestudio/styled-modern-normalize/tree/develop 178 | [changelog]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CHANGELOG.md 179 | [code-of-conduct]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CODE_OF_CONDUCT.md 180 | [email]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/.mailmap 181 | [gh-help-attach-files]: https://help.github.com/articles/file-attachments-on-issues-and-pull-requests 182 | [gh-help-issue-keywords]: https://help.github.com/articles/closing-issues-using-keywords 183 | [gh-help-markdown-code-blocks]: https://help.github.com/articles/basic-writing-and-formatting-syntax 184 | [gh-issues]: https://github.com/arcticicestudio/styled-modern-normalize/issues 185 | [gh-issues-label-question]: https://github.com/arcticicestudio/styled-modern-normalize/labels/type-question 186 | [gh-pr]: https://github.com/arcticicestudio/styled-modern-normalize/pulls 187 | [gh-osguide-contribute]: https://opensource.guide/how-to-contribute 188 | [git-docs-branching-workflows]: https://git-scm.com/book/en/v2/Git-Branching-Branching-Workflows 189 | [gitflow]: http://nvie.com/posts/a-successful-git-branching-model 190 | [ref-atom-contributing]: https://github.com/atom/atom/blob/master/CONTRIBUTING.md 191 | [ref-react-contributing]: https://facebook.github.io/react/contributing/how-to-contribute.html 192 | [ref-rubyonrails-contributing]: http://guides.rubyonrails.org/contributing_to_ruby_on_rails.html 193 | [semver]: http://semver.org 194 | [stackoverflow-mcve]: https://stackoverflow.com/help/mcve 195 | [styleguide-git-badge]: https://raw.githubusercontent.com/arcticicestudio/styleguide-git/develop/src/assets/styleguide-git-banner-typography-badge.svg?sanitize=true 196 | [styleguide-git-github]: https://github.com/arcticicestudio/styleguide-git 197 | [styleguide-javascript-badge]: https://raw.githubusercontent.com/arcticicestudio/styleguide-javascript/develop/assets/styleguide-javascript-banner-typography-badge.svg?sanitize=true 198 | [styleguide-javascript-github]: https://github.com/arcticicestudio/styleguide-javascript 199 | [sscce]: http://sscce.org 200 | [template-issue]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/.github/ISSUE_TEMPLATE.md 201 | [template-pr]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/.github/PULL_REQUEST_TEMPLATE.md 202 | [version-latest]: https://github.com/arcticicestudio/styled-modern-normalize/releases/latest 203 | -------------------------------------------------------------------------------- /assets/banner.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | --------------------------------------------------------------------------------