@ohos-ports/parcel-optimizer-css 2.16.4-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017-present Devon Govett
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/lib/CSSOptimizer.js

@@ -0,0 +1,233 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _sourceMap() {
+  const data = _interopRequireDefault(require("@ohos-ports/parcel-source-map"));
+  _sourceMap = function () {
+    return data;
+  };
+  return data;
+}
+function _plugin() {
+  const data = require("@parcel/plugin");
+  _plugin = function () {
+    return data;
+  };
+  return data;
+}
+function _lightningcss() {
+  const data = _interopRequireWildcard(require("@ohos-ports/lightningcss"));
+  _lightningcss = function () {
+    return data;
+  };
+  return data;
+}
+function _utils() {
+  const data = require("@ohos-ports/parcel-utils");
+  _utils = function () {
+    return data;
+  };
+  return data;
+}
+function _browserslist() {
+  const data = _interopRequireDefault(require("browserslist"));
+  _browserslist = function () {
+    return data;
+  };
+  return data;
+}
+function _nullthrows() {
+  const data = _interopRequireDefault(require("nullthrows"));
+  _nullthrows = function () {
+    return data;
+  };
+  return data;
+}
+function _path() {
+  const data = _interopRequireDefault(require("path"));
+  _path = function () {
+    return data;
+  };
+  return data;
+}
+function _diagnostic() {
+  const data = require("@parcel/diagnostic");
+  _diagnostic = function () {
+    return data;
+  };
+  return data;
+}
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// $FlowFixMe - init for browser build.
+var _default = exports.default = new (_plugin().Optimizer)({
+  async loadConfig({
+    config,
+    logger,
+    options
+  }) {
+    const configFile = await config.getConfig(['.cssnanorc', 'cssnano.config.json', 'cssnano.config.js', 'cssnano.config.cjs'], {
+      packageKey: 'cssnano'
+    });
+    if (configFile) {
+      let filename = _path().default.basename(configFile.filePath);
+      let codeHighlights;
+      let message;
+      if (filename === 'package.json') {
+        message = (0, _diagnostic().md)`
+Parcel\'s default CSS minifer changed from cssnano to lightningcss, but a "cssnano" key was found in **package.json**. Either remove this configuration, or configure Parcel to use @parcel/optimizer-cssnano instead.
+        `;
+        let contents = await options.inputFS.readFile(configFile.filePath, 'utf8');
+        codeHighlights = (0, _diagnostic().generateJSONCodeHighlights)(contents, [{
+          key: '/cssnano',
+          type: 'key'
+        }]);
+      } else {
+        message = (0, _diagnostic().md)`Parcel\'s default CSS minifer changed from cssnano to lightningcss, but a __${filename}__ config file was found. Either remove this config file, or configure Parcel to use @parcel/optimizer-cssnano instead.`;
+        codeHighlights = [{
+          start: {
+            line: 1,
+            column: 1
+          },
+          end: {
+            line: 1,
+            column: 1
+          }
+        }];
+      }
+      logger.warn({
+        message,
+        documentationURL: 'https://parceljs.org/languages/css/#minification',
+        codeFrames: [{
+          filePath: configFile.filePath,
+          codeHighlights
+        }]
+      });
+    }
+  },
+  async optimize({
+    bundle,
+    bundleGraph,
+    logger,
+    contents: prevContents,
+    getSourceMapReference,
+    map: prevMap,
+    options
+  }) {
+    if (!bundle.env.shouldOptimize) {
+      return {
+        contents: prevContents,
+        map: prevMap
+      };
+    }
+    let targets = getTargets(bundle.env.engines.browsers);
+    let code = await (0, _utils().blobToBuffer)(prevContents);
+    let unusedSymbols;
+    if (bundle.env.shouldScopeHoist) {
+      unusedSymbols = [];
+      bundle.traverseAssets(asset => {
+        if (asset.symbols.isCleared || asset.meta.cssModulesCompiled === 'postcss') {
+          return;
+        }
+        let usedSymbols = bundleGraph.getUsedSymbols(asset);
+        if (usedSymbols == null) {
+          return;
+        }
+        let defaultImport = null;
+        if (usedSymbols.has('default')) {
+          let incoming = bundleGraph.getIncomingDependencies(asset);
+          defaultImport = incoming.find(d => d.symbols.hasExportSymbol('default'));
+          if (defaultImport) {
+            var _defaultImport$symbol;
+            let loc = (_defaultImport$symbol = defaultImport.symbols.get('default')) === null || _defaultImport$symbol === void 0 ? void 0 : _defaultImport$symbol.loc;
+            logger.warn({
+              message: 'CSS modules cannot be tree shaken when imported with a default specifier',
+              ...(loc && {
+                codeFrames: [{
+                  filePath: (0, _nullthrows().default)((loc === null || loc === void 0 ? void 0 : loc.filePath) ?? defaultImport.sourcePath),
+                  codeHighlights: [(0, _diagnostic().convertSourceLocationToHighlight)(loc)]
+                }]
+              }),
+              hints: [`Instead do: import * as style from "${defaultImport.specifier}";`],
+              documentationURL: 'https://parceljs.org/languages/css/#tree-shaking'
+            });
+          }
+        }
+        if (!defaultImport && !usedSymbols.has('*')) {
+          for (let [symbol, {
+            local
+          }] of asset.symbols) {
+            if (local !== 'default' && !usedSymbols.has(symbol)) {
+              unusedSymbols.push(local);
+            }
+          }
+        }
+      });
+    }
+
+    // Inline style attributes in HTML need to be parsed differently from full CSS files.
+    if (bundle.bundleBehavior === 'inline') {
+      let entry = bundle.getMainEntry();
+      if ((entry === null || entry === void 0 ? void 0 : entry.meta.type) === 'attr') {
+        let result = (0, _lightningcss().transformStyleAttribute)({
+          code,
+          minify: true,
+          targets
+        });
+        return {
+          contents: Buffer.from(result.code)
+        };
+      }
+    }
+
+    // $FlowFixMe
+    if (process.browser) {
+      await (0, _lightningcss().default)();
+    }
+    let result = (0, _lightningcss().transform)({
+      filename: bundle.name,
+      code,
+      minify: true,
+      sourceMap: !!bundle.env.sourceMap,
+      targets,
+      unusedSymbols
+    });
+    let map;
+    if (result.map != null) {
+      let vlqMap = JSON.parse(Buffer.from(result.map).toString());
+      map = new (_sourceMap().default)(options.projectRoot);
+      map.addVLQMap(vlqMap);
+      if (prevMap) {
+        map.extends(prevMap);
+      }
+    }
+    let contents = Buffer.from(result.code);
+    if (bundle.env.sourceMap) {
+      let reference = await getSourceMapReference(map);
+      if (reference != null) {
+        contents = contents.toString() + '\n' + '/*# sourceMappingURL=' + reference + ' */\n';
+      }
+    }
+    return {
+      contents: Buffer.from(contents),
+      map
+    };
+  }
+});
+let cache = new Map();
+function getTargets(browsers) {
+  if (browsers == null) {
+    return undefined;
+  }
+  let cached = cache.get(browsers);
+  if (cached != null) {
+    return cached;
+  }
+  let targets = (0, _lightningcss().browserslistToTargets)((0, _browserslist().default)(browsers));
+  cache.set(browsers, targets);
+  return targets;
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@ohos-ports/parcel-optimizer-css",
+  "version": "2.16.4-beta.0",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/parcel"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ohos-ports/ohos-ports.git",
+    "directory": "ports/parcel-optimizer-css/2.16.4"
+  },
+  "main": "lib/CSSOptimizer.js",
+  "source": "src/CSSOptimizer.js",
+  "engines": {
+    "node": ">= 16.0.0",
+    "parcel": "^2.16.4"
+  },
+  "dependencies": {
+    "@parcel/diagnostic": "2.16.4",
+    "@parcel/plugin": "2.16.4",
+    "@ohos-ports/parcel-source-map": "^2.1.1-beta.0",
+    "@ohos-ports/parcel-utils": "^2.16.4-beta.0",
+    "browserslist": "^4.24.5",
+    "@ohos-ports/lightningcss": "^1.33.0-1",
+    "nullthrows": "^1.1.1"
+  },
+  "devDependencies": {
+    "lightningcss-wasm": "^1.30.1"
+  },
+  "browser": {
+    "@ohos-ports/lightningcss": "lightningcss-wasm"
+  },
+  "gitHead": "59484858a1a0bcbb71f74088956bb437a2db6505"
+}

package/src/CSSOptimizer.js

@@ -0,0 +1,219 @@
+// @flow strict-local
+
+import SourceMap from '@parcel/source-map';
+import {Optimizer} from '@parcel/plugin';
+// $FlowFixMe - init for browser build.
+import init, {
+  transform,
+  transformStyleAttribute,
+  browserslistToTargets,
+} from 'lightningcss';
+import {blobToBuffer} from '@parcel/utils';
+import browserslist from 'browserslist';
+import nullthrows from 'nullthrows';
+import path from 'path';
+import {
+  convertSourceLocationToHighlight,
+  md,
+  generateJSONCodeHighlights,
+} from '@parcel/diagnostic';
+
+export default (new Optimizer({
+  async loadConfig({config, logger, options}) {
+    const configFile = await config.getConfig(
+      [
+        '.cssnanorc',
+        'cssnano.config.json',
+        'cssnano.config.js',
+        'cssnano.config.cjs',
+      ],
+      {
+        packageKey: 'cssnano',
+      },
+    );
+    if (configFile) {
+      let filename = path.basename(configFile.filePath);
+      let codeHighlights;
+      let message;
+      if (filename === 'package.json') {
+        message = md`
+Parcel\'s default CSS minifer changed from cssnano to lightningcss, but a "cssnano" key was found in **package.json**. Either remove this configuration, or configure Parcel to use @parcel/optimizer-cssnano instead.
+        `;
+        let contents = await options.inputFS.readFile(
+          configFile.filePath,
+          'utf8',
+        );
+        codeHighlights = generateJSONCodeHighlights(contents, [
+          {key: '/cssnano', type: 'key'},
+        ]);
+      } else {
+        message = md`Parcel\'s default CSS minifer changed from cssnano to lightningcss, but a __${filename}__ config file was found. Either remove this config file, or configure Parcel to use @parcel/optimizer-cssnano instead.`;
+        codeHighlights = [
+          {
+            start: {line: 1, column: 1},
+            end: {line: 1, column: 1},
+          },
+        ];
+      }
+
+      logger.warn({
+        message,
+        documentationURL: 'https://parceljs.org/languages/css/#minification',
+        codeFrames: [
+          {
+            filePath: configFile.filePath,
+            codeHighlights,
+          },
+        ],
+      });
+    }
+  },
+  async optimize({
+    bundle,
+    bundleGraph,
+    logger,
+    contents: prevContents,
+    getSourceMapReference,
+    map: prevMap,
+    options,
+  }) {
+    if (!bundle.env.shouldOptimize) {
+      return {contents: prevContents, map: prevMap};
+    }
+
+    let targets = getTargets(bundle.env.engines.browsers);
+    let code = await blobToBuffer(prevContents);
+
+    let unusedSymbols;
+    if (bundle.env.shouldScopeHoist) {
+      unusedSymbols = [];
+      bundle.traverseAssets(asset => {
+        if (
+          asset.symbols.isCleared ||
+          asset.meta.cssModulesCompiled === 'postcss'
+        ) {
+          return;
+        }
+
+        let usedSymbols = bundleGraph.getUsedSymbols(asset);
+        if (usedSymbols == null) {
+          return;
+        }
+
+        let defaultImport = null;
+        if (usedSymbols.has('default')) {
+          let incoming = bundleGraph.getIncomingDependencies(asset);
+          defaultImport = incoming.find(d =>
+            d.symbols.hasExportSymbol('default'),
+          );
+          if (defaultImport) {
+            let loc = defaultImport.symbols.get('default')?.loc;
+            logger.warn({
+              message:
+                'CSS modules cannot be tree shaken when imported with a default specifier',
+              ...(loc && {
+                codeFrames: [
+                  {
+                    filePath: nullthrows(
+                      loc?.filePath ?? defaultImport.sourcePath,
+                    ),
+                    codeHighlights: [convertSourceLocationToHighlight(loc)],
+                  },
+                ],
+              }),
+              hints: [
+                `Instead do: import * as style from "${defaultImport.specifier}";`,
+              ],
+              documentationURL:
+                'https://parceljs.org/languages/css/#tree-shaking',
+            });
+          }
+        }
+
+        if (!defaultImport && !usedSymbols.has('*')) {
+          for (let [symbol, {local}] of asset.symbols) {
+            if (local !== 'default' && !usedSymbols.has(symbol)) {
+              unusedSymbols.push(local);
+            }
+          }
+        }
+      });
+    }
+
+    // Inline style attributes in HTML need to be parsed differently from full CSS files.
+    if (bundle.bundleBehavior === 'inline') {
+      let entry = bundle.getMainEntry();
+      if (entry?.meta.type === 'attr') {
+        let result = transformStyleAttribute({
+          code,
+          minify: true,
+          targets,
+        });
+
+        return {
+          contents: Buffer.from(result.code),
+        };
+      }
+    }
+
+    // $FlowFixMe
+    if (process.browser) {
+      await init();
+    }
+
+    let result = transform({
+      filename: bundle.name,
+      code,
+      minify: true,
+      sourceMap: !!bundle.env.sourceMap,
+      targets,
+      unusedSymbols,
+    });
+
+    let map;
+    if (result.map != null) {
+      let vlqMap = JSON.parse(Buffer.from(result.map).toString());
+      map = new SourceMap(options.projectRoot);
+      map.addVLQMap(vlqMap);
+      if (prevMap) {
+        map.extends(prevMap);
+      }
+    }
+
+    let contents = Buffer.from(result.code);
+    if (bundle.env.sourceMap) {
+      let reference = await getSourceMapReference(map);
+      if (reference != null) {
+        contents =
+          contents.toString() +
+          '\n' +
+          '/*# sourceMappingURL=' +
+          reference +
+          ' */\n';
+      }
+    }
+
+    return {
+      contents: Buffer.from(contents),
+      map,
+    };
+  },
+}): Optimizer);
+
+let cache = new Map();
+
+function getTargets(browsers) {
+  if (browsers == null) {
+    return undefined;
+  }
+
+  let cached = cache.get(browsers);
+  if (cached != null) {
+    return cached;
+  }
+
+  let targets = browserslistToTargets(browserslist(browsers));
+
+  cache.set(browsers, targets);
+  return targets;
+}