backpack.css - npm Package Compare versions

Comparing version 2.2.0 to 3.0.0

CHANGELOG.md

 # Changes to backpack.css 🎒
 
+## 3.0.0 (November 24, 2020)
+
+- Replace [Normalize.css](https://necolas.github.io/normalize.css/) with [sanitize.css](https://csstools.github.io/sanitize.css/) as sanitize.css is being actively developed on compared to Normalize.css. Plus, sanitize.css contains many useful opinionated styles, and in general, it's a more modern CSS library. Adopting sanitize.css also meant that quite a few of the backpack.css styles got removed. To see exactly what backpack.css uses from sanitize.css visit the library's entry point [`src/index.css`](src/index.css) file. ([#70](https://github.com/chris-pearce/backpack.css/issues/70)).
+- In keeping with backpack.css's philosophy of starting on an even playing field when it comes to styling, the following changes got made:
+  - Make table headers be left-aligned and not bold ([#68](https://github.com/chris-pearce/backpack.css/issues/68)).
+  - Make button elements be left-aligned instead of their default center-alignment ([#55](https://github.com/chris-pearce/backpack.css/issues/55)).
+- Remove all print styles as backpack.css is an opinionated CSS foundation that is best suited to applications. Therefore, the need for print styles isn't there compared to a content-heavy site, such as a blog ([#74](https://github.com/chris-pearce/backpack.css/issues/74)).
+- Introduce a [`postcss.config.js`](postcss.config.js) file considering two PostCSS plugins are used and maybe more in the future ([#72](https://github.com/chris-pearce/backpack.css/issues/72)).
+- Turn off margins, paddings, and borders on only the elements that need it instead of the prior `*:not(input)` selector.
+- Remove all IE related CSS and update the Browserslist query as backpack.css moves to a more modern support policy. See the "Browser support" section in the [`README.md`](README.md) ([#62](https://github.com/chris-pearce/backpack.css/issues/62)).
+- Began work on the new test suite; this will be a work-in-progress for a while. In the meantime, to test for visual regressions when adding new styles to backpack.css, or to see your changes, use the [HTML5 Test Page](https://github.com/cbracco/html5-test-page) which can be accessed in the browser when running `yarn test` (is available at http://localhost:3000/html5-test-page.html) ([#20](https://github.com/chris-pearce/backpack.css/issues/20)). See the "Testing" section in [`CONTRIBUTING.md`](CONTRIBUTING.md).
+- Add ESLint as there are a few JS files now, mainly configuration files. Plus, JS linting is needed for the new test suite mentioned in the preceding bullet point ([#65](https://github.com/chris-pearce/backpack.css/issues/65)). Also, add linting for HTML files ([#66](https://github.com/chris-pearce/backpack.css/issues/66)).
+- Introduce [logical properties and values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties#:~:text=CSS%20Logical%20Properties%20and%20Values%20is%20a%20module%20of%20CSS,previously%20defined%20in%20CSS%202.1.) where applicable.
+- Apply a pointer cursor to labels with a `for` attribute to indicate that a label will shift focus to its associated control ([#59](https://github.com/chris-pearce/backpack.css/issues/59)).
+- Bring back the license comment in the library's entrypoint [`src/index.css`](src/index.css) file ([#63](https://github.com/chris-pearce/backpack.css/issues/63)).
+- Apply a more readable underline for links using `text-decoration-skip-ink: auto;`.
+- Change the built CSS file from `backpack.css` to `index.css`.
+- Move any tooling configuration applied in `package.json` to specific config files. For example, `lint-stage` and `husky`.
+- Add to the `.vscode` settings and extensions.
+- Bump dependencies.
+- It's possible a few updates got missed. However, the library's `.css` files are very well-documented if more information is needed.
+
 ## 2.2.0 (April 02, 2020)
 
-- Improve the publishing experience ([#22](https://github.com/chris-pearce/backpack.css/issues/22))
+- Improve the publishing experience ([#22](https://github.com/chris-pearce/backpack.css/issues/22)).
 
 ## 2.1.0 (March 29, 2020)
 
-- Set up linting ([#9](https://github.com/chris-pearce/backpack.css/issues/9))
+- Set up linting ([#9](https://github.com/chris-pearce/backpack.css/issues/9)).
 - Update the `CODE_OF_CONDUCT.md` to the latest version.
@@ -11,0 +33,0 @@ - Grammar and punctuation fix applied across the board.

package.json

 {
   "name": "backpack.css",
-  "main": "dist/backpack.css",
-  "version": "2.2.0",
+  "main": "dist/index.css",
+  "version": "3.0.0",
   "description": "A lightweight and somewhat opinionated CSS foundation that is best suited to applications 🎒.",
@@ -17,57 +17,53 @@ "keywords": [
   "scripts": {
-    "autoprefix": "postcss dist/backpack.css --use autoprefixer --no-map --replace",
-    "bundle": "postcss src/index.css --use postcss-import --no-map --output dist/backpack.css",
+    "prebuild": "yarn clean",
+    "build": "postcss src/index.css --no-map --output dist/index.css",
+    "bump-browser-data": "npx browserslist@latest --update-db",
+    "bump-version": "replace-in-files --regex='v\\d+\\.\\d+\\.\\d+' --replacement=v$npm_package_version src/index.css",
     "clean": "rimraf dist",
-    "lint": "stylelint \"**/*.css\"",
-    "build": "yarn bundle && yarn autoprefix",
-    "prebuild": "yarn clean",
-    "prerelease": "yarn build && git add . && git commit -m \"add release notes to CHANGELOG\"",
-    "release": "np",
+    "lint:css": "stylelint \"**/*.css\"",
+    "lint:html": "htmlhint \"**/*.html\"",
+    "lint:js": "eslint .",
+    "lint": "yarn lint:css && yarn lint:html && yarn lint:js",
+    "prerelease": "yarn bump-version && yarn build && git add . && git commit -m \"add release notes to CHANGELOG and bump version in index.css\"",
+    "release": "np --no-tests",
     "postrelease": "yarn clean",
-    "test": "echo \"No test specified\""
+    "pretest": "yarn clean",
+    "test": "concurrently \"postcss src/index.css --no-map --output test/styles/lib-compiled.css --watch\" \"browser-sync start --server 'test' --files 'test'\""
   },
-  "browserslist": [
-    "last 4 versions and > 0.5%",
-    "Firefox ESR",
-    "not ie < 11",
-    "not op_mini all",
-    "not dead"
-  ],
   "repository": "[e-mail]:chris-pearce/backpack.css.git",
   "author": "Chris Pearce <[e-mail]>",
   "license": "MIT",
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
   },
-  "lint-staged": {
-    "*.{md,html,css}": [
-      "prettier --write"
-    ],
-    "*.css": [
-      "stylelint --fix"
-    ]
-  },
   "devDependencies": {
-    "autoprefixer": "^9.7.5",
-    "husky": "^4.2.3",
-    "lint-staged": "^10.1.1",
-    "normalize.css": "^8.0.1",
-    "np": "^6.2.0",
-    "postcss-cli": "^7.1.0",
-    "postcss-import": "^12.0.1",
-    "prettier": "^2.0.2",
+    "autoprefixer": "^10.0.2",
+    "browser-sync": "^2.26.13",
+    "concurrently": "^5.3.0",
+    "eslint": "^7.14.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "htmlhint": "^0.14.2",
+    "husky": "^4.3.0",
+    "lint-staged": "^10.5.1",
+    "np": "^7.0.0",
+    "postcss": "^8.1.9",
+    "postcss-cli": "^8.3.0",
+    "postcss-import": "^13.0.0",
+    "prettier": "^2.2.0",
     "prettier-stylelint": "^0.4.2",
+    "replace-in-files-cli": "^1.0.0",
     "rimraf": "^3.0.2",
-    "stylelint": "^13.2.1",
+    "sanitize.css": "^12.0.1",
+    "stylelint": "^13.8.0",
     "stylelint-a11y": "^1.2.3",
     "stylelint-at-rule-no-children": "^0.3.1",
-    "stylelint-config-prettier": "^8.0.1",
-    "stylelint-csstree-validator": "^1.8.0",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-csstree-validator": "^1.9.0",
     "stylelint-declaration-block-no-ignored-properties": "^2.3.0",
-    "stylelint-high-performance-animation": "^1.5.0",
-    "stylelint-order": "^4.0.0",
+    "stylelint-high-performance-animation": "^1.5.2",
+    "stylelint-order": "^4.1.0",
     "stylelint-prettier": "^1.1.2"
-  }
+  },
+  "dependencies": {}
 }

README.md

@@ -7,7 +7,7 @@ [![NPM
 
-# backpack.css 🎒 <!-- omit in toc -->
+# 🎒 backpack.css <!-- omit in toc -->
 
 A lightweight and somewhat opinionated CSS foundation that is best suited to applications.
 
-## Table of contents <!-- omit in toc -->
+# Table of contents <!-- omit in toc -->
 
@@ -18,4 +18,4 @@ - [Installation](#installation)
   - [CDN](#cdn)
-- [How to use](#how-to-use)
-  - [With a bundler (webpack)](#with-a-bundler-webpack)
+  - [How to use](#how-to-use)
+  - [With a bundler _(e.g., webpack, Parcel, etc.)_](#with-a-bundler-eg-webpack-parcel-etc)
     - [JS](#js)
@@ -29,3 +29,2 @@ - [CSS](#css)
   - [OpenType features](#opentype-features)
-- [Evolution](#evolution)
 - [Browser support](#browser-support)
@@ -37,5 +36,5 @@ - [Contributing](#contributing)
 
-## Installation
+# Installation
 
-### npm
+## npm
 
@@ -54,3 +53,3 @@ Run the following command using [npm](https://www.npmjs.com/):
 
-### Download
+## Download
 
@@ -60,3 +59,3 @@ - [Unminified](https://cdn.jsdelivr.net/npm/backpack.css/lib/backpack.css)
 
-### CDN
+## CDN
 
@@ -72,5 +71,5 @@ - [jsDelivr](https://www.jsdelivr.com/package/npm/backpack.css)
 
-### With a bundler (webpack)
+## With a bundler _(e.g., webpack, Parcel, etc.)_
 
-#### JS
+### JS
 
@@ -82,3 +81,3 @@ ```js
 
-#### CSS
+### CSS
 
@@ -92,3 +91,3 @@ If you're using webpack, then use the tilde (`~`) prefix at the start of the path, e.g.:
 
-### No bundler
+## No bundler
 
@@ -105,7 +104,7 @@ Link to backpack.css using a `<link>` element in your HTML Head, e.g.:
 
-### Overriding
+## Overriding
 
 backpack.css is just CSS so you can easily override any of its styles just as you would override any CSS, as in, via the rules of the cascade and specificity.
 
-For example, if you don't want to use the global system font-stack defined in [`main-root.css`](src/main-root.css) then override it in your project CSS like so:
+For example, if you don't want to use the global system font-stack defined by [sanitize.css](https://github.com/csstools/sanitize.css/blob/0d2d781758ab9cd36c6138bedaa26b0aae30bfc3/typography.css#L1-L19) then override it in your project CSS like so:
 
@@ -118,25 +117,23 @@ ```css
 
-## Bundle size
+# Bundle size
 
 [![Bundle size minified](https://img.shields.io/bundlephobia/min/backpack.css.svg?longCache=true&style=popout-square)](https://bundlephobia.com/result?p=backpack.css) [![Bundle size minified](https://img.shields.io/bundlephobia/minzip/backpack.css.svg?longCache=true&style=popout-square)](https://bundlephobia.com/result?p=backpack.css)
 
-## Motivation
+# Motivation
 
-Nowadays I'm building [React](https://reactjs.org/) applications that have highly componentised User Interfaces (UI) making use of native CSS layout mechanisms such as [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and [Grid](https://css-tricks.com/snippets/css/complete-guide-grid/). I'm no longer finding the need for heavy-handed CSS frameworks that handle most of my UI concerns, especially layout and utilities. Instead, I build components with a smidgen of global styles.
+Nowadays, I'm building [React](https://reactjs.org/) applications that have highly componentised User Interfaces (UI) making use of native CSS layout mechanisms such as [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and [Grid](https://css-tricks.com/snippets/css/complete-guide-grid/). I'm no longer finding the need for heavy-handed CSS frameworks that handle most of my UI concerns, especially layout and utilities. Instead, I build components with a smidgen of global styles.
 
-What I do need, however, are a bunch of smart and sensible foundational styles suited for applications that I would typically forget project to project—think [Normalize.css](http://necolas.github.io/normalize.css/) and then some. Something lightweight, super easy to integrate, and can easily be overridden or allow for modular use, thus giving birth to backpack.css 🙂🎒.
+What I do need, however, are a bunch of smart and sensible foundational styles suited for applications that I would typically forget project to project—think [sanitize.css](https://csstools.github.io/sanitize.css/) and then some. Something lightweight, super easy to integrate, and can easily be overridden or allow for modular use, thus giving birth to backpack.css 🙂🎒.
 
-## What it does
+# What it does
 
-- Applies sensible form element resets, normalisations, and fixes, e.g. _remove all user-agent styles from buttons_.
-- Applies sensible interactive styles, e.g. _avoid 300ms click delay on touch devices_.
-- Applies foundational print styles.
-- Applies a system font, including monospace fonts.
-- Applies the nicer `border-box` value for the `box-sizing` property to all elements.
-- Applies sensible OpenType features (see [OpenType features](#opentype-features) below).
-- Makes all images and videos responsive.
-- Removes margins, paddings, and borders from all elements except `<input>` so that everything is on an even playing field.
-- Removes the bullets from lists.
-- Removes all user-agent styles from heading elements and resets them to have the same styles as the body copy.
-- Removes the "focus ring" for mouse users.
+- Apply sensible form element resets, normalisations, and fixes.
+- Apply a system font, including monospace fonts.
+- Apply the more agreeable `border-box` value for the `box-sizing` property to all elements.
+- Apply sensible OpenType features (see [OpenType features](#opentype-features) below).
+- Make embeddable elements responsive.
+- Remove margins, paddings, and borders from all elements that come with those styles.
+- Remove markers from lists.
+- Remove all user-agent styles from heading elements and reset them to have the same styles as the body copy.
+- Where applicable, use [CSS logical properties and values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties).
 
@@ -147,3 +144,3 @@ _And more…_
 
-### OpenType features
+## OpenType features
 
@@ -160,24 +157,8 @@ As mentioned above, backpack.css applies sensible OpenType features. However, due to the poor support of the `font-variant-` properties, backpack.css has to declare their equivalents via the better supported, but harder to maintain, `font-feature-settings` property (the `font-feature-settings` properties should always come first).
 
-## Evolution
+# Browser support
 
-backpack.css is the third CSS framework/library I've created. Looking at each one lets you see how UI development has evolved over the years with each iteration getting smaller and smaller.
+backpack.css uses [Browserslist](https://github.com/browserslist/browserslist) to manage its browser support.
 
-1.  [Scally](https://github.com/chris-pearce/scally) _circa 2014_
-2.  [Shell](https://github.com/campaignmonitor/shell) _circa 2016_
-3.  [backpack.css](https://github.com/chris-pearce/backpack.css) _circa 2018_
+backpack.css does not support IE. To see the Browserslist queries backpack.css uses, see the [`.browserslistrc`](.browserslistrc) file.
 
-## Browser support
-
-Here is the [Browserslist](https://github.com/browserslist/browserslist) query backpack.css uses:
-
-```bash
-last 4 versions and > 0.5%,
-Firefox ESR,
-not ie < 11,
-not op_mini all,
-not dead
-```
-
-Which you can see [here](https://browserl.ist/?q=last+4+versions+and+%3E+0.5%25%2C+Firefox+ESR%2C+not+ie+%3C+11%2C+not+op_mini+all%2C+not+dead).
-
 Browserslist is used for [Autoprefixer](https://github.com/postcss/autoprefixer). Autoprefixer only adds a tiny amount of vendor prefixes, the main properties being prefixed are:
@@ -190,26 +171,28 @@
 
-## Contributing
+# Contributing
 
-Please see our [contributing guidelines](CONTRIBUTING.md).
+Please see our [Contributing Guidelines](CONTRIBUTING.md).
 
-## Versioning
+# Versioning
 
 backpack.css is maintained under the [Semantic Versioning guidelines](http://semver.org/). We'll do our best to adhere to those guidelines and strive to maintain backwards compatibility.
 
-See the [change log](CHANGELOG.md).
+See the [Changelog](CHANGELOG.md).
 
-## Credits
+# Credits
 
+- [sanitize.css](https://csstools.github.io/sanitize.css/)
 - [Normalize.css](http://necolas.github.io/normalize.css/)
 - [modern-normalize](https://github.com/sindresorhus/modern-normalize)
-- [sanitize.css](https://csstools.github.io/sanitize.css/)
 - [HTML5 Boilerplate](https://html5boilerplate.com/)
 - [Utility OpenType](http://utility-opentype.kennethormandy.com/)
+- [CSS Remedy](https://github.com/jensimmons/cssremedy)
+- [Modern CSS Reset](https://hankchizljaw.com/wrote/a-modern-css-reset/)
 
 And anyone else who's been so kind to share their work out in the open.
 
-❤️ open source.
+❤️ Open source.
 
-## License
+# License
 
 The code is available under the [MIT license](https://github.com/chris-pearce/backpack.css/blob/master/LICENSE).

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

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39555

increased by16.75%

Lines of code

822

increased by10.93%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Dev dependency count

27

increased by42.11%

Number of lines in readme file

185

decreased by-8.42%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes