postcss-normalize - npm Package Compare versions

Comparing version 7.0.1 to 8.0.0

CHANGELOG.md

 # Changes to PostCSS Normalize
 
+### 8.0.0 (June 3, 2019)
+
+- Added: `sanitize.css` 10.0.0 (major)
+- Updated: `@csstools/normalize.css` to 10.1.0 (major)
+- Updated: `browserslist` to 4.5.6 (minor)
+- Updated: `postcss` to 7.0.16 (patch)
+- Updated: Node 8+ compatibility (major)
+
 ### 7.0.1 (August 24, 2018)
@@ -4,0 +12,0 @@

index.cjs.js

@@ -1,3 +0,1 @@
-'use strict';
-
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
@@ -7,92 +5,168 @@
 var postcssBrowserComments = _interopDefault(require('postcss-browser-comments'));
+var Module = _interopDefault(require('module'));
+var path = _interopDefault(require('path'));
+var url = require('url');
 var fs = _interopDefault(require('fs'));
 
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
+const assign = (...objects) => Object.assign(...objects);
+const create = (...objects) => assign(Object.create(null), ...objects);
 
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
-}
+const currentURL = (typeof document === 'undefined' ? new url.URL('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs.js', document.baseURI).href));
+const currentFilename = new url.URL(currentURL).pathname;
+const currentDirname = path.dirname(currentFilename); // get resolved filenames for css libraries
 
-function _asyncToGenerator(fn) {
-  return function () {
-    var self = this,
-        args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
+const normalizeCSS = resolve('@csstools/normalize.css');
+const normalizeOpinionatedCSS = resolve('@csstools/normalize.css/opinionated.css');
+const sanitizeCSS = resolve('sanitize.css');
+const sanitizeFormsCSS = resolve('sanitize.css/forms.css');
+const sanitizePageCSS = resolve('sanitize.css/page.css');
+const sanitizeTypographyCSS = resolve('sanitize.css/typography.css'); // export a hashmap of css library filenames
 
-      function _next(value) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-      }
+const parsableFilenames = create({
+  [normalizeCSS]: true,
+  [normalizeOpinionatedCSS]: true,
+  [sanitizeCSS]: true,
+  [sanitizeFormsCSS]: true,
+  [sanitizePageCSS]: true,
+  [sanitizeTypographyCSS]: true
+}); // export a hashmap of css library filenames by id
 
-      function _throw(err) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-      }
+const resolvedFilenamesById = create({
+  'normalize': [normalizeCSS],
+  'normalize/opinionated': [normalizeOpinionatedCSS],
+  'normalize/*': [normalizeOpinionatedCSS],
+  'sanitize': [sanitizeCSS],
+  'sanitize/forms': [sanitizeCSS, sanitizeFormsCSS],
+  'sanitize/page': [sanitizeCSS, sanitizePageCSS],
+  'sanitize/typography': [sanitizeCSS, sanitizeTypographyCSS],
+  'sanitize/*': [sanitizeCSS, sanitizeFormsCSS, sanitizePageCSS, sanitizeTypographyCSS]
+}); // get the resolved filename of a package/module
 
-      _next(undefined);
-    });
-  };
+function resolve(id) {
+  return resolve[id] = resolve[id] || Module._resolveFilename(id, {
+    id: currentFilename,
+    filename: currentFilename,
+    paths: Module._nodeModulePaths(currentDirname)
+  });
 }
 
-var index = postcss.plugin('postcss-normalize', opts => {
-  const parsedNormalize = parseNormalize(opts);
-  return (
-    /*#__PURE__*/
-    function () {
-      var _ref = _asyncToGenerator(function* (root) {
-        const normalizeRoot = yield parsedNormalize; // use @import postcss-normalize insertion point
+const cache = create();
+async function readFile(filename) {
+  filename = path.resolve(filename);
+  cache[filename] = cache[filename] || create();
+  return new Promise((resolve, reject) => fs.stat(filename, (statsError, {
+    mtime
+  }) => statsError ? reject(statsError) : mtime === cache[filename].mtime ? resolve(cache[filename].data) : fs.readFile(filename, 'utf8', (readFileError, data) => readFileError ? reject(readFileError) : resolve((cache[filename] = {
+    data,
+    mtime
+  }).data))));
+}
 
-        root.walkAtRules('import-normalize', atrule => {
-          if (opts && opts.allowDuplicates) {
-            // use any insertion point
-            atrule.replaceWith(normalizeRoot);
-          } else if (normalizeRoot.parent) {
-            // remove duplicate insertions
-            atrule.remove();
-          } else {
-            // use the first insertion point
-            atrule.replaceWith(normalizeRoot);
-          }
-        });
+const cache$1 = create(null);
+var parse = ((filename, transformer) => readFile(filename).then( // cache the parsed css root
+css => cache$1[css] = cache$1[css] || postcss.parse(css, {
+  from: filename
+})).then( // clone the cached root
+root => root.clone()).then( // transform the cloned root
+clone => Promise.resolve(transformer(clone)).then( // resolve the cloned root
+() => clone)));
 
-        if (opts && opts.forceImport && !normalizeRoot.parent) {
-          // prepend required normalize rules
-          root.prepend(normalizeRoot);
-        }
-      });
+var postcssImportNormalize = (commentsTransformer => opts => {
+  opts = create(opts); // return an postcss-import configuration
 
-      return function (_x) {
-        return _ref.apply(this, arguments);
-      };
-    }()
-  );
+  return create({
+    load(filename, importOptions) {
+      return filename in parsableFilenames // parse the file (the file and css are conservatively cached)
+      ? parse(filename, commentsTransformer).then(root => root.toResult({
+        to: filename,
+        map: true
+      }).css) : typeof opts.load === 'function' // otherwise, use the override loader
+      ? opts.load.call(null, filename, importOptions) // otherwise, return the (conservatively cached) contents of the file
+      : readFile(filename);
+    },
+
+    resolve(id, basedir, importOptions) {
+      // get the css id by removing css extensions
+      const cssId = id.replace(cssExtRegExp, '');
+      return cssId in resolvedFilenamesById // return the known resolved path for the css id
+      ? resolvedFilenamesById[cssId] : typeof opts.resolve === 'function' // otherwise, use the override resolver
+      ? opts.resolve.call(null, id, basedir, importOptions) // otherwise, return the id to be resolved by postcss-import
+      : id;
+    }
+
+  });
 });
+const cssExtRegExp = /\.css\b/g;
 
-function parseNormalize(opts) {
-  const from = require.resolve('@csstools/normalize.css');
+const postcssPlugin = (commentsTransformer, opts) => root => {
+  const promises = [];
+  const insertedFilenames = {}; // use @import insertion point
 
-  const postcssBrowserCommentsParser = postcssBrowserComments(opts);
-  return new Promise((resolve, reject) => fs.readFile(from, 'utf8', (err, res) => {
-    if (err) {
-      reject(err);
-    } else {
-      resolve(res);
+  root.walkAtRules(importRegExp, atrule => {
+    // get name as a fallback value for the library (e.g. @import-normalize is like @import "normalize.css")
+    const name = atrule.name.match(importRegExp)[1]; // get url from "library", 'library', url("library"), url('library'), or the fallback value
+
+    const url = (atrule.params.match(paramsRegExp) || []).slice(1).find(part => part) || name;
+
+    if (url) {
+      // get the css id by removing css extensions
+      const cssId = url.replace(cssExtRegExp$1, '');
+
+      if (cssId in resolvedFilenamesById) {
+        // promise the library import is replaced with its contents
+        promises.push(Promise.all(resolvedFilenamesById[cssId].filter( // ignore filenames that have already been inserted
+        filename => insertedFilenames[filename] = opts.allowDuplicates || !(filename in insertedFilenames)).map( // parse the file (the file and css are conservatively cached)
+        filename => parse(filename, commentsTransformer))).then(roots => {
+          if (roots.length) {
+            // combine all the library nodes returned by the parsed files
+            const nodes = roots.reduce((all, root) => all.concat(root.nodes), []); // replace the import with all the library nodes
+
+            atrule.replaceWith(...nodes);
+          }
+        }));
+      }
     }
-  })).then(css => postcss.parse(css, {
-    from
-  })).then(root => {
-    postcssBrowserCommentsParser(root);
-    return root;
   });
-}
+  return Promise.all([].concat( // promise the library imports are replaced with their contents
+  promises, // promise certain libraries are prepended
+  Promise.all([].concat(opts.forceImport || []).reduce( // filter the id to be a known id or boolean true
+  (all, id) => {
+    if (id === true) {
+      all.push(...resolvedFilenamesById.normalize);
+    } else if (typeof id === 'string') {
+      const cssId = id.replace(cssExtRegExp$1, '');
 
+      if (cssId in resolvedFilenamesById) {
+        all.push(...resolvedFilenamesById[cssId]);
+      }
+    }
+
+    return all;
+  }, []).filter( // ignore filenames that have already been inserted
+  filename => insertedFilenames[filename] = opts.allowDuplicates || !(filename in insertedFilenames)).map( // parse the file (the file and css are conservatively cached)
+  filename => parse(filename, commentsTransformer))).then(roots => {
+    if (roots.length) {
+      // combine all the library nodes returned by the parsed files
+      const nodes = roots.reduce((all, root) => all.concat(root.nodes), []); // prepend the stylesheet with all the library nodes
+
+      root.prepend(...nodes);
+    }
+  })));
+};
+
+const cssExtRegExp$1 = /\.css\b/g;
+const importRegExp = /^import(?:-(normalize|sanitize))?$/;
+const paramsRegExp = /^\s*(?:url\((?:"(.+)"|'(.+)')\)|"(.+)"|'(.+)')[\W\w]*$/;
+
+var index = postcss.plugin('postcss-normalize', opts => {
+  opts = create(opts);
+  const commentsTransformer = postcssBrowserComments(opts);
+  const normalizeTransformer = postcssPlugin(commentsTransformer, opts);
+  const postcssImportConfig = postcssImportNormalize(commentsTransformer, opts);
+  return assign(normalizeTransformer, {
+    postcssImport: postcssImportConfig
+  });
+});
+
 module.exports = index;
+//# sourceMappingURL=index.cjs.js.map

package.json

 {
   "name": "postcss-normalize",
-  "version": "7.0.1",
-  "description": "Use the parts of normalize.css you need from your browserslist",
+  "version": "8.0.0",
+  "description": "Use the parts of normalize.css or sanitize.css you need from your browserslist",
   "author": "Jonathan Neal <[e-mail]>",
@@ -11,37 +11,53 @@ "license": "CC0-1.0",
   "main": "index.cjs.js",
-  "module": "index.es.js",
+  "module": "index.esm.mjs",
   "files": [
     "index.cjs.js",
-    "index.es.js"
+    "index.cjs.js.map",
+    "index.esm.mjs",
+    "index.esm.mjs.map"
   ],
   "scripts": {
+    "build": "rollup --config .rollup.js --silent",
     "prepublishOnly": "npm test",
-    "pretest": "rollup -c .rollup.js --silent",
-    "test": "echo 'Running tests...'; npm run test:js && npm run test:tape",
-    "test:js": "eslint *.js --cache --ignore-path .gitignore --quiet",
+    "pretest:tape": "npm run build",
+    "test": "npm run test:js && npm run test:tape",
+    "test:js": "eslint src/{*,**/*}.js --cache --ignore-path .gitignore --quiet",
     "test:tape": "postcss-tape"
   },
   "engines": {
-    "node": ">=6.0.0"
+    "node": ">=8.0.0"
   },
   "dependencies": {
-    "@csstools/normalize.css": "^9.0.1",
-    "browserslist": "^4.1.1",
-    "postcss": "^7.0.2",
-    "postcss-browser-comments": "^2.0.0"
+    "@csstools/normalize.css": "^10.1.0",
+    "browserslist": "^4.6.1",
+    "postcss": "^7.0.16",
+    "postcss-browser-comments": "^3.0.0",
+    "sanitize.css": "^10.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "babel-eslint": "^9.0.0",
-    "eslint": "^5.5.0",
-    "eslint-config-dev": "^2.0.0",
-    "postcss-tape": "^2.2.0",
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-syntax-import-meta": "^7.2.0",
+    "@babel/preset-env": "^7.4.5",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.16.0",
+    "postcss-import": "^12.0.1",
+    "postcss-tape": "^5.0.0",
     "pre-commit": "^1.2.2",
-    "rollup": "^0.65.2",
-    "rollup-plugin-babel": "^4.0.3"
+    "rollup": "^1.13.1",
+    "rollup-plugin-babel": "^4.3.2"
   },
   "eslintConfig": {
-    "extends": "dev",
-    "parser": "babel-eslint"
+    "env": {
+      "browser": true,
+      "es6": true,
+      "node": true
+    },
+    "extends": "eslint:recommended",
+    "parser": "babel-eslint",
+    "parserOptions": {
+      "ecmaVersion": 2018,
+      "impliedStrict": true,
+      "sourceType": "module"
+    },
+    "root": true
   },
@@ -48,0 +64,0 @@ "keywords": [

README.md

@@ -7,16 +7,26 @@ # PostCSS Normalize [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][postcss]
 
-[PostCSS Normalize] lets you use the parts of [normalize.css] you need from
-your [browserslist].
+[PostCSS Normalize] lets you use the parts of [normalize.css] or [sanitize.css]
+that you need from your [browserslist].
 
-Use `@import-normalize` to determine where [normalize.css] rules should be
-included. Duplicate `@import-normalize` rules will be removed. See all the
-[Options] for more information.
+```css
+@import "normalize.css";
+```
 
-```pcss
-@import-normalize;
+```css
+@import "sanitize.css";
 ```
 
-Results when [browserslist] is `last 3 versions`:
+**PostCSS Normalize** uses a non-opinionated version of [normalize.css], but
+an opinionated version may also be used.
 
 ```css
+@import "normalize.css/opinionated.css";
+```
+
+### Examples
+
+Here is a sample of what **normalize.css** looks like when the **browserslist**
+is `ie >= 9`:
+
+```css
 /**
@@ -40,3 +50,3 @@ * Add the correct display in IE 9-.
 
-Results when [browserslist] is `last 2 versions`:
+And here is the same sample when the **browserslist** is `ie >= 10`:
 
@@ -53,8 +63,2 @@ ```css
 
----
-
-[PostCSS Normalize] uses the non-opinionated version of [normalize.css].
-
----
-
 ## Usage
@@ -76,8 +80,8 @@
 
-Use [PostCSS Normalize] to process your CSS:
+Use **PostCSS Normalize** to process your CSS:
 
 ```js
-import postcssNormalize from 'postcss-normalize';
+const postcssNormalize = require('postcss-normalize')
 
-postcssNormalize.process(YOUR_CSS /*, processOptions, pluginOptions */);
+postcssNormalize.process(YOUR_CSS /*, processOptions, pluginOptions */)
 ```
@@ -88,11 +92,12 @@
 ```js
-import postcss from 'postcss';
-import postcssNormalize from 'postcss-normalize';
+const postcss = require('postcss')
+const postcssNormalize = require('postcss-normalize')
 
 postcss([
   postcssNormalize(/* pluginOptions */)
-]).process(YOUR_CSS /*, processOptions */);
+]).process(YOUR_CSS /*, processOptions */)
 ```
 
-[PostCSS Normalize] runs in all Node environments, with special instructions for:
+**PostCSS Normalize** runs in all Node environments, with special instructions
+for:
 
@@ -102,2 +107,38 @@ | [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
 
+## PostCSS Import Usage
+
+**PostCSS Normalize** includes a `postcssImport` function to configure
+[PostCSS Import] and allow you to continue using the `@import` syntax.
+
+```js
+const postcss = require('postcss')
+const postcssImport = require('postcss-import')
+const postcssNormalize = require('postcss-normalize')
+
+postcss([
+  postcssImport(
+    postcssNormalize(
+      /* pluginOptions (for PostCSS Normalize) */
+    ).postcssImport(
+      /* pluginOptions (for PostCSS Import) */
+    )
+  )
+]) // now you can use @import "normalize.css", etc. again
+```
+
+Alternatively, use `@import-normalize` or `@import-sanitize` to avoid conflicts
+with `@import` transforms.
+
+```pcss
+@import-normalize;
+```
+
+```pcss
+@import-normalize "opinionated.css";
+```
+
+```pcss
+@import-sanitize;
+```
+
 ## Options
@@ -107,34 +148,53 @@
 
-Allows you to insert multiple, duplicate insertions of [normalize.css] rules.
-The default is `false`.
+The `allowDuplicates` option determines whether multiple, duplicate insertions
+of CSS libraries are allowed. By default, duplicate libraries are omitted.
 
 ```js
-postcssNormalize({
-  allowDuplicates: true
-});
+postcssNormalize({ allowDuplicates: true })
 ```
 
-### browsers
+### forceImport
 
-Allows you to override of the project’s [browserslist] for [PostCSS Normalize].
-The default is `false`.
+The `forceImport` option defines CSS libraries that will be inserted at the
+beginning of the CSS file. Unless overriden by `allowDuplicates`, duplicate
+CSS libraries would still be omitted.
 
 ```js
+postcssNormalize({ forceImport: true })
+```
+
+Specific CSS libraries may be defined.
+
+```js
 postcssNormalize({
-  browsers: 'last 2 versions'
-});
+  forceImport: 'sanitize.css'
+})
 ```
 
-### forceImport
+### browsers
 
-Allows you to force an insertion of [normalize.css] rules at the beginning of
-the CSS file if no insertion point is specified. The default is `false`.
+The `browsers` option defines an override of the project’s **browserslist** for
+**PostCSS Normalize**. This option should be avoided in leui of a browserslist
+file.
 
 ```js
-postcssNormalize({
-  forceImport: true
-});
+postcssNormalize({ browsers: 'last 2 versions' })
 ```
 
-[cli-img]: https://img.shields.io/travis/csstools/postcss-normalize.svg
+## CSS Libraries
+
+**PostCSS Normalize** can include [normalize.css] or [sanitize.css] and
+configure either with the following combinations:
+
+```css
+@import "normalize"; /* also, @import "normalize.css" */
+@import "normalize/opinionated"; /* also, @import "normalize.css/opinionated.css", @import "normalize.css/*" */
+@import "sanitize"; /* also, @import "sanitize.css" */
+@import "sanitize/forms"; /* also, @import "sanitize.css/forms.css" */
+@import "sanitize/typography"; /* also, @import "sanitize.css/typography.css" */
+@import "sanitize/page"; /* also, @import "sanitize.css/page.css" */
+@import "sanitize/*"; /* also, @import "sanitize.css/*" (sanitize + all additions) */
+```
+
+[cli-img]: https://img.shields.io/travis/csstools/postcss-normalize/master.svg
 [cli-url]: https://travis-ci.org/csstools/postcss-normalize
@@ -147,5 +207,9 @@ [git-img]: https://img.shields.io/badge/support-chat-blue.svg
 [browserslist]: http://browserl.ist/
+[CSS Libraries]: #css-libraries
 [normalize.css]: https://github.com/csstools/normalize.css
 [Options]: #options
 [PostCSS]: https://github.com/postcss/postcss
+[PostCSS Import]: https://github.com/postcss/postcss-import
+[PostCSS Import Usage]: #postcss-import-usage
 [PostCSS Normalize]: https://github.com/csstools/postcss-normalize
+[sanitize.css]: https://github.com/csstools/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

Debug access

Supply chain risk

Uses debug, reflection and dynamic code execution features.

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

Total package byte prevSize

30377

increased by71.56%

Number of package files

8

increased by33.33%

Lines of code

291

increased by79.63%

Number of lines in readme file

208

increased by44.44%

Worsened metrics

Dependency count

5

increased by25%

Dev dependency count

10

increased by11.11%

Number of low supply chain risk alerts

5

increased by66.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedsanitize.css@^10.0.0

• + Added@csstools/normalize.css@10.1.0(transitive)

• + Addedpostcss-browser-comments@3.0.0(transitive)

• + Addedsanitize.css@10.0.0(transitive)

• - Removed@csstools/normalize.css@9.0.1(transitive)

• - Removedpostcss-browser-comments@2.0.0(transitive)

• Updated@csstools/normalize.css@^10.1.0

• Updatedbrowserslist@^4.6.1

• Updatedpostcss@^7.0.16

• Updatedpostcss-browser-comments@^3.0.0