flow like the river

BACK_BACK/node_modules/parcel-bundler/lib/assets/CSSAsset.js

@@ -0,0 +1,287 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
+
+const Asset = require('../Asset');
+
+const postcss = require('postcss');
+
+const valueParser = require('postcss-value-parser');
+
+const postcssTransform = require('../transforms/postcss');
+
+const CssSyntaxError = require('postcss/lib/css-syntax-error');
+
+const SourceMap = require('../SourceMap');
+
+const loadSourceMap = require('../utils/loadSourceMap');
+
+const path = require('path');
+
+const urlJoin = require('../utils/urlJoin');
+
+const isURL = require('../utils/is-url');
+
+const URL_RE = /url\s*\("?(?![a-z]+:)/;
+const IMPORT_RE = /@import/;
+const COMPOSES_RE = /composes:.+from\s*("|').*("|')\s*;?/;
+const FROM_IMPORT_RE = /.+from\s*(?:"|')(.*)(?:"|')\s*;?/;
+const PROTOCOL_RE = /^[a-z]+:/;
+
+class CSSAsset extends Asset {
+  constructor(name, options) {
+    super(name, options);
+    this.type = 'css';
+    this.previousSourceMap = this.options.rendition ? this.options.rendition.map : null;
+  }
+
+  mightHaveDependencies() {
+    return !/\.css$/.test(this.name) || IMPORT_RE.test(this.contents) || COMPOSES_RE.test(this.contents) || URL_RE.test(this.contents);
+  }
+
+  parse(code) {
+    let root = postcss.parse(code, {
+      from: this.name
+    });
+    return new CSSAst(code, root);
+  }
+
+  collectDependencies() {
+    this.ast.root.walkAtRules('import', rule => {
+      let params = valueParser(rule.params);
+
+      let _params$nodes = (0, _toArray2.default)(params.nodes),
+          name = _params$nodes[0],
+          media = _params$nodes.slice(1);
+
+      let dep;
+
+      if (name.type === 'function' && name.value === 'url' && name.nodes.length) {
+        name = name.nodes[0];
+      }
+
+      dep = name.value;
+
+      if (!dep) {
+        throw new Error('Could not find import name for ' + rule);
+      }
+
+      if (PROTOCOL_RE.test(dep)) {
+        return;
+      } // If this came from an inline <style> tag, don't inline the imported file. Replace with the correct URL instead.
+      // TODO: run CSSPackager on inline style tags.
+
+
+      let inlineHTML = this.options.rendition && this.options.rendition.inlineHTML;
+
+      if (inlineHTML) {
+        name.value = this.addURLDependency(dep, {
+          loc: rule.source.start
+        });
+        rule.params = params.toString();
+      } else {
+        media = valueParser.stringify(media).trim();
+        this.addDependency(dep, {
+          media,
+          loc: rule.source.start
+        });
+        rule.remove();
+      }
+
+      this.ast.dirty = true;
+    });
+    this.ast.root.walkDecls(decl => {
+      if (URL_RE.test(decl.value)) {
+        let parsed = valueParser(decl.value);
+        let dirty = false;
+        parsed.walk(node => {
+          if (node.type === 'function' && node.value === 'url' && node.nodes.length) {
+            let url = this.addURLDependency(node.nodes[0].value, {
+              loc: decl.source.start
+            });
+
+            if (!isURL(url)) {
+              url = urlJoin(this.options.publicURL, url);
+            }
+
+            dirty = node.nodes[0].value !== url;
+            node.nodes[0].value = url;
+          }
+        });
+
+        if (dirty) {
+          decl.value = parsed.toString();
+          this.ast.dirty = true;
+        }
+      }
+
+      if (decl.prop === 'composes' && FROM_IMPORT_RE.test(decl.value)) {
+        let parsed = valueParser(decl.value);
+        parsed.walk(node => {
+          if (node.type === 'string') {
+            const _FROM_IMPORT_RE$exec = FROM_IMPORT_RE.exec(decl.value),
+                  _FROM_IMPORT_RE$exec2 = (0, _slicedToArray2.default)(_FROM_IMPORT_RE$exec, 2),
+                  importPath = _FROM_IMPORT_RE$exec2[1];
+
+            this.addURLDependency(importPath, {
+              dynamic: false,
+              loc: decl.source.start
+            });
+          }
+        });
+      }
+    });
+  }
+
+  pretransform() {
+    var _this = this;
+
+    return (0, _asyncToGenerator2.default)(function* () {
+      if (_this.options.sourceMaps && !_this.previousSourceMap) {
+        _this.previousSourceMap = yield loadSourceMap(_this);
+      }
+    })();
+  }
+
+  transform() {
+    var _this2 = this;
+
+    return (0, _asyncToGenerator2.default)(function* () {
+      yield postcssTransform(_this2);
+    })();
+  }
+
+  getCSSAst() {
+    // Converts the ast to a CSS ast if needed, so we can apply postcss transforms.
+    if (!(this.ast instanceof CSSAst)) {
+      this.ast = CSSAsset.prototype.parse.call(this, this.ast.render(this.name));
+    }
+
+    return this.ast.root;
+  }
+
+  generate() {
+    var _this3 = this;
+
+    return (0, _asyncToGenerator2.default)(function* () {
+      let css;
+
+      if (_this3.ast) {
+        let result = _this3.ast.render(_this3.name);
+
+        css = result.css;
+        if (result.map) _this3.sourceMap = result.map;
+      } else {
+        css = _this3.contents;
+      }
+
+      let js = '';
+
+      if (_this3.options.hmr) {
+        _this3.addDependency('_css_loader');
+
+        js = `
+        var reloadCSS = require('_css_loader');
+        module.hot.dispose(reloadCSS);
+        module.hot.accept(reloadCSS);
+      `;
+      }
+
+      if (_this3.cssModules) {
+        js += 'module.exports = ' + JSON.stringify(_this3.cssModules, null, 2) + ';';
+      }
+
+      if (_this3.options.sourceMaps) {
+        if (_this3.sourceMap) {
+          _this3.sourceMap = yield new SourceMap().addMap(_this3.sourceMap);
+        }
+
+        if (_this3.previousSourceMap) {
+          _this3.previousSourceMap.sources = _this3.previousSourceMap.sources.map(v => path.join(path.dirname(_this3.relativeName), _this3.previousSourceMap.sourceRoot || '', v));
+
+          if (_this3.sourceMap) {
+            _this3.sourceMap = yield new SourceMap().extendSourceMap(_this3.previousSourceMap, _this3.sourceMap);
+          } else {
+            _this3.sourceMap = yield new SourceMap().addMap(_this3.previousSourceMap);
+          }
+        } else if (!_this3.sourceMap) {
+          _this3.sourceMap = new SourceMap().generateEmptyMap(_this3.relativeName, css);
+        }
+      }
+
+      return [{
+        type: 'css',
+        value: css,
+        cssModules: _this3.cssModules,
+        map: _this3.sourceMap
+      }, {
+        type: 'js',
+        value: js,
+        hasDependencies: false
+      }];
+    })();
+  }
+
+  generateErrorMessage(err) {
+    // Wrap the error in a CssSyntaxError if needed so we can generate a code frame
+    if (err.loc && !err.showSourceCode) {
+      err = new CssSyntaxError(err.message, err.loc.line, err.loc.column, this.contents);
+    }
+
+    err.message = err.reason || err.message;
+    err.loc = {
+      line: err.line,
+      column: err.column
+    };
+
+    if (err.showSourceCode) {
+      err.codeFrame = err.showSourceCode();
+      err.highlightedCodeFrame = err.showSourceCode(true);
+    }
+
+    return err;
+  }
+
+}
+
+class CSSAst {
+  constructor(css, root) {
+    this.css = css;
+    this.root = root;
+    this.dirty = false;
+  }
+
+  render(name) {
+    if (this.dirty) {
+      let _this$root$toResult = this.root.toResult({
+        to: name,
+        map: {
+          inline: false,
+          annotation: false,
+          sourcesContent: true
+        }
+      }),
+          css = _this$root$toResult.css,
+          map = _this$root$toResult.map;
+
+      this.css = css;
+      return {
+        css: this.css,
+        map: map ? map.toJSON() : null
+      };
+    }
+
+    return {
+      css: this.css
+    };
+  }
+
+}
+
+module.exports = CSSAsset;