sanitize.css - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

CHANGELOG.md

@@ -1,3 +0,12 @@
-## 3.2.0 (2015-02-03)
+## 3.3.0 (2016-03-03)
 
+- Added: `b` and `strong` normalization
+- Added: `::-moz-focus-inner` normalization
+- Added: `hr` normalization
+- Added: `svg` fill as the current color
+- Updated: Organized rules into normalization, universal inheritance, opinionated defaults, and configurable defaults
+- Updated: Moved source and compiled libraries
+
+## 3.2.0 (2016-02-03)
+
 - Added: `selection.less`
@@ -7,7 +16,7 @@ - Updated: Use `root`-prefixed values across all formats
 
-## 3.1.1 (2015-02-01)
+## 3.1.1 (2016-02-01)
 
 - Updated: `box-sizing` variable corrected to `border-box` in sass, scss, styl
 
-## 3.1.0 (2015-02-01)
+## 3.1.0 (2016-02-01)
 
@@ -14,0 +23,0 @@ - Added: Project configuration (.editorconfig)

index.js

@@ -1,29 +0,13 @@
-var fs  = require('fs');
+var fs = require('fs');
+var cssnext = require('postcss-cssnext');
 
-require('postcss-cssnext')({
-	features: {
-		autoprefixer: {
-			remove: false
-		}
-	}
-}).process(fs.readFileSync('sanitize.css', 'utf8'), {
-	from: 'sanitize.css',
-	to:   'dist/sanitize.css',
-	map:  {
-		inline: false
-	},
-}).then(function (result) {
-	fs.writeFileSync('dist/sanitize.css', result.css);
-	fs.writeFileSync('dist/sanitize.css.map', result.map);
+var enc  = 'utf8';
 
-	require('cssnano')().process(result.css, {
-		from: 'dist/sanitize.css',
-		to:   'dist/sanitize.min.css',
-		map:  {
-			inline: false
-		},
-	}).then(function (result) {
-		fs.writeFileSync('dist/sanitize.min.css', result.css);
-		fs.writeFileSync('dist/sanitize.min.css.map', result.map);
-	});
+var opts = {
+	from: 'lib/sanitize.css',
+	to:   'sanitize.css'
+};
+
+cssnext.process(fs.readFileSync(opts.from, enc), opts).then(function (result) {
+	fs.writeFileSync(opts.to, result.css, enc);
 });

package.json

 {
   "name": "sanitize.css",
-  "version": "3.2.0",
-  "description": "Render elements consistently. Style with best practices.",
+  "version": "3.3.0",
+  "description": "Render elements consistently. Follow best practices.",
   "main": "index.js",
-  "style": "dist/sanitize.css",
+  "style": "sanitize.css",
   "files": [
-    "dist",
-    "LICENSE.md",
-    "README.md",
     "sanitize.css",
-    "sanitize.less",
-    "sanitize.sass",
-    "sanitize.scss",
-    "sanitize.styl"
+    "lib/sanitize.css",
+    "lib/sanitize.less",
+    "lib/sanitize.sass",
+    "lib/sanitize.scss",
+    "lib/sanitize.styl"
   ],
   "dependencies": {},
   "devDependencies": {
-    "cssnano": "^3.4.0",
-    "postcss": "^5.0.14",
+    "postcss": "^5.0.19",
     "postcss-cssnext": "^2.4.0",
-    "postcss-reporter": "^1.3.1",
-    "stylelint": "^4.1.0"
+    "postcss-reporter": "^1.3.3",
+    "stylelint": "^4.4.0"
   },
@@ -25,0 +22,0 @@ "scripts": {

README.md

 # sanitize.css
 
-<img align="right" width="128" height="128" src="http://10up.github.io/sanitize.css/logo.png" alt="">
+<a href="https://github.com/10up/sanitize.css"><img src="https://10up.github.io/sanitize.css/logo.svg" alt="PostHTML Logo" width="80" height="80" align="right"></a>
 
-[![npm][npm-image]][npm-url] [![bower][bower-image]][bower-url]
+> Render elements consistently. Follow best practices.
 
-Render elements consistently. Style with best practices.
+[![npm][npm-image]][npm-url] [![bower][bower-image]][bower-url] [![gitter][gitter-image]][gitter-url]
 
-## Installation
+**NPM**
 
+```sh
+npm install --save-dev sanitize.css
+```
+
 **Bower**
@@ -17,54 +21,34 @@
 
-**NPM**
+[sanitize.css] corrects broken and missing styles in all browsers so that elements always render consistently. Next, it adds new default styles based on modern best practices. Finally, it exposes opinionated defaults as governable variables.
 
-```sh
-npm install sanitize.css
-```
+```css
+*,
+::before,
+::after {
+	box-sizing: inherit;
+}
 
-**Sass**
-
-```scss
-@import 'vendors/sanitize.scss';
+:root {
+	box-sizing: var(--root-box-sizing, border-box);
+}
 ```
 
-**CSS**
+Each new default is easily configurable with variables available in your favorite CSS, Less, Sass, SCSS, and Stylus flavors.
 
 ```css
-@import url(vendors/sanitize.css);
-```
+@import url("node_modules/sanitize.css/sanitize.css");
 
-## Highlights
-
-- CSS inheritance is universal so that styles are easier to control.
-- The box model is more intuitive with border-box ([reference](http://www.paulirish.com/2012/box-sizing-border-box-ftw/)) ([reference](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)).
-- Smaller font-sizes display consistently across browsers ([reference](https://github.com/servo/servo/issues/3423#issuecomment-56321664)).
-- Monospace fonts render consistently ([reference](http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/)).
-- Border styles work as expected ([reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#Values)).
-- Text selections containing a drop shadow remain legible ([reference](https://twitter.com/miketaylr/status/12228805301)).
-- Content may be hidden from the screen but not screenreaders ([reference](http://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/)) ([reference](https://www.drupal.org/node/897638)).
-
-## Differences
-
-**Sanitize.css** styles browsers to render elements more consistently with developer expectations and preferences. **Normalize.css** styles browsers to render elements more consistently with each other. **Reset.css** unstyles every element. Each one has its own advantages.
-
-In **Sanitize.css**, CSS inheritance is assigned universally so that styles cascade naturally and consistently. Wherever possible, the box model operates more intuitively. Every normalization and opinionated default is carefully documented, and most are configurable from Sass.
-
-## Options
-
-To give you complete control, **sanitize.css** is available in every major style markup language, including CSS, Less, Sass, SCSS, and Stylus. Each flavor allows you to define your own defaults for every feature — box-sizing, font family, text rendering, selection, etc. — so you never need to re-write these rules later.
-
-```css
 /* overwrite defaults in sanitize.css */
 :root {
+	--root-box-sizing: border-box;
 	--root-font-family: "Open Sans", sans-serif;
 	--root-color: #333;
 }
-
-import url("vendors/sanitize.css");
 ```
 
 ```less
-import "vendors/sanitize.less"
+@import "node_modules/sanitize.css/sanitize.less";
 
 // overwrite defaults in sanitize.less
+@root-box-sizing: border-box;
 @root-font-family: sans-serif;
@@ -76,6 +60,7 @@ @root-color: #333333;
 // overwrite defaults in sanitize.sass
+$root-box-sizing: border-box
 $root-font-family: "Open Sans", sans-serif
 $root-color: #333333
 
-import "vendors/sanitize.scss"
+import "node_modules/sanitize.css/sanitize.scss"
 ```
@@ -85,6 +70,7 @@
 // overwrite defaults in sanitize.scss
+$root-box-sizing: border-box;
 $root-font-family: "Open Sans", sans-serif;
 $root-color: #333333;
 
-import "vendors/sanitize.scss";
+import "node_modules/sanitize.css/sanitize.scss";
 ```
@@ -94,36 +80,107 @@
 // overwrite defaults in sanitize.styl
+root-box-sizing = border-box;
 root-font-family = "Open Sans", sans-serif
 root-color = #333333
 
-@import "vendors/sanitize.styl"
+@import "node_modules/sanitize.css/sanitize.styl"
 ```
 
-- **root-background-color**: the default background color is `#ffffff`.
-- **root-box-sizing**: the default box-sizing is `border-box`.
-- **root-color**: the default text color is `#000000`.
-- **root-cursor**: the default cursor is `default`.
-- **root-font-family**: the default font family is `sans-serif`.
-- **root-font-size**: the default font size `100%`.
-- **root-line-height**: the default line height is `1.5`.
-- **anchor-text-decoration**: the default anchor text decoration is `none`.
-- **background-repeat**: the default background repeat is `no-repeat`.
-- **form-element-background-color**: the default form background color is `transparent`.
-- **form-element-min-height**: the default form element minimum height is `1.5em`
-- **media-element-vertical-align**: the default vertical alignment for media elements is `middle`.
-- **monospace-font-family**: the default font for code elements is `monospace`.
-- **nav-list-style**: the default list style for navigation lists is `none`.
-- **selection-background-color**: the default selection background color is `#b3d4fc`.
-- **selection-color**: the default selection text color is `#ffffff`.
-- **selection-text-shadow**: the default select text shadow is `none`.
-- **small-font-size**: the default font size for small elements is `75%`.
-- **table-border-collapse**: the default border collapse for tables is `collapse`.
-- **table-border-spacing**: the default border spacing for tables is `0`.
-- **textarea-resize**: the default resize for textarea’s is `vertical`.
+## Variables
 
+##### `root-background-color`
+
+Controls the page background color (default: `#ffffff`)
+
+##### `root-box-sizing`
+
+Controls the page box model inherited by all elements (default: `border-box`)
+
+##### `root-color`
+
+Controls the page text color inherited by all elements (default: `#ffffff`)
+
+##### `root-cursor`
+
+Controls the default page cursor (default: `default`)
+
+##### `root-font-family`
+
+Controls the page font inherited by all elements (default: `sans-serif`)
+
+##### `root-font-size`
+
+Controls the page text size inherited by all elements (default: `100%`)
+
+##### `root-line-height`
+
+Controls the page text line height inherited by all elements (default: `1.5`)
+
+##### `background-repeat`
+
+Controls how background images are repeated on all elements (default: `no-repeat`)
+
+##### `form-element-background-color`
+
+Controls the background color of form controls (`button`, `input`, `select`, `textarea`) (default: `transparent`)
+
+##### `form-element-color`
+
+Controls the text color of form controls (`button`, `input`, `select`, `textarea`) (default: `inherit`)
+
+##### `form-element-min-height`
+
+Controls the minimum height of form controls (`button`, `[type="button"]`, `[type="date"]`, `[type="datetime"]`, `[type="datetime-local"]`, `[type="email"]`, `[type="month"]`, `[type="number"]`, `[type="password"]`, `[type="reset"]`, `[type="search"]`, `[type="submit"]`, `[type="tel"]`, `[type="text"]`, `[type="time"]`, `[type="url"]`, `[type="week"]`, `select`, `textarea`) (default: `1.5em`)
+
+##### `media-element-vertical-align`
+
+Controls the vertical align of media elements (`audio`, `canvas`, `iframe`, `img`, `svg`, `video`) (default: `middle`)
+
+##### `monospace-font-family`
+
+Controls the font used by markup elements (`code`, `kbd`, `pre`, `samp`) (default: `monospace`)
+
+##### `nav-list-style`
+
+Controls the list style for navigation lists (`nav ol, nav ul`) (default: `none`)
+
+##### `selection-background-color`
+
+Controls the background color of selected text (default: `#b3d4fc`)
+
+##### `selection-color`
+
+Controls the text color of selected text (default: `#ffffff`)
+
+##### `selection-text-shadow`
+
+Controls the text shadow of selected text (default: `none`)
+
+##### `small-font-size`
+
+Controls the text size of `small` elements (default: `75%`)
+
+##### `table-border-collapse`
+
+Controls how borders collapse within `table` elements (default: `collapse`)
+
+##### `table-border-spacing`
+
+Controls the distance between borders within `table` elements (default: `0`)
+
+##### `textarea-resize`
+
+Controls the resizability of `textarea` elements (default: `vertical`)
+
+## Differences
+
+[sanitize.css] styles elements more consistently with developers’ expectations and preferences. [normalize.css] styles elements more consistently between browsers. [reset.css] unstyles every element. Both sanitize.css and normalize.css are maintained in sync, and both projects correct browser bugs while carefully testing and documenting every change.
+
 ## Support
 
-At present, we support the current and previous major releases of popular web browsers. When a new version is released, we begin supporting that version and stop supporting the third most recent version. Many older browsers happen to be remain supported using the same CSS without additional needs.
+At present, sanitize.css supports the current and previous major releases of common web browsers. When a new version is released, we begin supporting that newer version and stop supporting the third version back. Additionally, many older browsers remain supported without supplementary CSS.
 
-Currently tested and supported browsers include **Android 4.3-4.4+**, **Chrome 39-45+**, **Edge 12+**, **Firefox 34-40+**, **Internet Explorer 9-11**, **iOS 7-8+**, **Safari 7-9+**, **Windows Phone 8.1+**.
+Currently tested and supported browsers include **Android 4.3-4.4+**, **Chrome 47-48+**, **Edge 12-13+**, **Firefox 43-44+**, **Internet Explorer 10-11**, **iOS 7-8+**, **Opera 34-35+**, **Safari 8-9+**, and **Windows Phone 8.1+**.
 
+Additionally tested and supported browsers (requiring no supplementary CSS) include **Internet Explorer 9** and **Safari 7**.
+
 ## License
@@ -137,1 +194,6 @@
 [bower-url]: https://libraries.io/bower/sanitize-css
+[gitter-image]: https://img.shields.io/gitter/room/10up/sanitize.css.svg
+[gitter-url]: https://gitter.im/10up/sanitize.css
+[normalize.css]: https://github.com/necolas/normalize.css
+[reset.css]: http://meyerweb.com/eric/tools/css/reset/
+[sanitize.css]: https://github.com/10up/sanitize.css

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

4

decreased by-20%

Lines of code

542

increased by9.05%

Number of lines in readme file

195

increased by46.62%

Worsened metrics

Total package byte prevSize

51536

decreased by-18.41%

Number of package files

11

decreased by-21.43%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes