refactor(cssnano-preset): migrate to TS (#7440)

* refactor(cssnano-preset): migrate to TS

* fix

packages/docusaurus-cssnano-preset/.npmignore

@@ -1 +1,4 @@
+copyUntypedFiles.mjs
+.tsbuildinfo*
+tsconfig*
 __tests__

packages/docusaurus-cssnano-preset/index.js

@@ -1,25 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-const advancedBasePreset = require('cssnano-preset-advanced');
-const postCssSortMediaQueries = require('postcss-sort-media-queries');
-const postCssRemoveOverriddenCustomProperties = require('./src/remove-overridden-custom-properties');
-
-module.exports = function docusaurusCssnanoPreset(opts) {
-  const advancedPreset = advancedBasePreset({
-    autoprefixer: {add: false},
-    discardComments: {removeAll: true},
-    ...opts,
-  });
-
-  advancedPreset.plugins.unshift(
-    [postCssSortMediaQueries],
-    [postCssRemoveOverriddenCustomProperties],
-  );
-
-  return advancedPreset;
-};

packages/docusaurus-cssnano-preset/package.json

@@ -2,11 +2,15 @@
   "name": "@docusaurus/cssnano-preset",
   "version": "2.0.0-beta.20",
   "description": "Advanced cssnano preset for maximum optimization.",
-  "main": "index.js",
+  "main": "lib/index.js",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc --watch"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/docusaurus.git",
@@ -15,7 +19,8 @@
   "dependencies": {
     "cssnano-preset-advanced": "^5.3.4",
     "postcss": "^8.4.13",
-    "postcss-sort-media-queries": "^4.2.1"
+    "postcss-sort-media-queries": "^4.2.1",
+    "tslib": "^2.4.0"
   },
   "devDependencies": {
     "to-vfile": "^6.1.0"

packages/docusaurus-cssnano-preset/src/deps.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+declare module 'postcss-sort-media-queries' {
+  const plugin: import('postcss').PluginCreator<object>;
+  export default plugin;
+}

packages/docusaurus-cssnano-preset/src/index.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import advancedBasePreset from 'cssnano-preset-advanced';
+import postCssSortMediaQueries from 'postcss-sort-media-queries';
+import postCssRemoveOverriddenCustomProperties from './remove-overridden-custom-properties';
+
+const preset: typeof advancedBasePreset = function preset(opts) {
+  const advancedPreset = advancedBasePreset({
+    autoprefixer: {add: false},
+    discardComments: {removeAll: true},
+    ...opts,
+  });
+
+  advancedPreset.plugins.unshift(
+    [postCssSortMediaQueries, undefined],
+    [postCssRemoveOverriddenCustomProperties, undefined],
+  );
+
+  return advancedPreset;
+};
+
+export = preset;

packages/docusaurus-cssnano-preset/src/remove-overridden-custom-properties/__tests__/index.test.ts

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const path = require('path');
+import path from 'path';
-const vfile = require('to-vfile');
+import vfile from 'to-vfile';
-const postcss = require('postcss');
+import postcss from 'postcss';
-const postCssRemoveOverriddenCustomProperties = require('../index');
+import postCssRemoveOverriddenCustomProperties from '../index';
 
-const processFixture = (name) => {
+const processFixture = (name: string) => {
   const input = vfile.readSync(
     path.join(__dirname, '__fixtures__', `${name}.css`),
     'utf8',

packages/docusaurus-cssnano-preset/src/remove-overridden-custom-properties/index.ts

@@ -5,6 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import type {Plugin, Rule, Node} from 'postcss';
+
+const isRule = (node: Node | undefined): node is Rule => node?.type === 'rule';
+
 /**
  * This PostCSS plugin will remove duplicate/same custom properties (which are
  * actually overridden ones) **only** from `:root` selector.
@@ -17,32 +21,31 @@
  * applied).
  * - If the same custom properties have at least one `!important` rule, then
  * only those properties that do not have this rule will be removed.
- * @returns {import('postcss').Plugin}
  */
-module.exports = function creator() {
+function creator(): Plugin {
   return {
     postcssPlugin: 'postcss-remove-overridden-custom-properties',
     Declaration(decl) {
-      if (decl.parent.selector !== ':root') {
+      if (!isRule(decl.parent) || decl.parent.selector !== ':root') {
         return;
       }
 
       const sameProperties = decl.parent.nodes.filter(
-        (n) => n.prop === decl.prop,
+        (n) => 'prop' in n && n.prop === decl.prop,
       );
-      const hasImportantProperties = sameProperties.some((p) =>
+      const hasImportantProperties = sameProperties.some(
-        Object.prototype.hasOwnProperty.call(p, 'important'),
+        (p) => 'important' in p,
       );
 
       const overriddenProperties = hasImportantProperties
-        ? sameProperties.filter(
+        ? sameProperties.filter((p) => !('important' in p))
-            (p) => !Object.prototype.hasOwnProperty.call(p, 'important'),
-          )
         : sameProperties.slice(0, -1);
 
       overriddenProperties.map((p) => p.remove());
     },
   };
-};
+}
 
-module.exports.postcss = true;
+creator.postcss = true as const;
+
+export default creator;

packages/docusaurus-cssnano-preset/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "incremental": true,
+    "tsBuildInfoFile": "./lib/.tsbuildinfo",
+    "rootDir": "src",
+    "outDir": "lib"
+  }
+}