Chore: Migrate from css to @adobe/css-tools (#9660)

Co-authored-by: Laurent Cozic <laurent22@users.noreply.github.com>

packages/htmlpack/package.json

@@ -14,8 +14,8 @@
   "author": "Laurent Cozic",
   "license": "MIT",
   "dependencies": {
+    "@adobe/css-tools": "4.3.2",
     "@joplin/fork-htmlparser2": "^4.1.50",
-    "css": "3.0.0",
     "datauri": "4.1.0",
     "fs-extra": "11.1.1",
     "html-entities": "1.4.0"

packages/htmlpack/src/index.ts

@@ -2,8 +2,7 @@ import * as fs from 'fs-extra';
 const Entities = require('html-entities').AllHtmlEntities;
 const htmlparser2 = require('@joplin/fork-htmlparser2');
 const Datauri = require('datauri/sync');
-const cssParse = require('css/lib/parse');
-const cssStringify = require('css/lib/stringify');
+import { CssTypes, parse as cssParse, stringify as cssStringify } from '@adobe/css-tools';
 
 const selfClosingElements = [
 	'area',
@@ -72,6 +71,10 @@ const processCssContent = (cssBaseDir: string, content: string): string => {
 	for (const rule of o.stylesheet.rules) {
 		if (rule.type === 'font-face') {
 			for (const declaration of rule.declarations) {
+				if (declaration.type === CssTypes.comment) {
+					continue;
+				}
+
 				if (declaration.property === 'src') {
 					declaration.value = declaration.value.replace(/url\((.*?)\)/g, (_v: any, url: string) => {
 						const cssFilePath = `${cssBaseDir}/${url}`;

packages/lib/import-enex-md-gen.ts

@@ -4,7 +4,7 @@ import { htmlentities } from '@joplin/utils/html';
 const stringPadding = require('string-padding');
 const stringToStream = require('string-to-stream');
 const resourceUtils = require('./resourceUtils.js');
-const cssParser = require('css');
+const cssParser = require('@adobe/css-tools');
 
 const BLOCK_OPEN = '[[BLOCK_OPEN]]';
 const BLOCK_CLOSE = '[[BLOCK_CLOSE]]';

packages/lib/package.json

@@ -33,6 +33,7 @@
     "typescript": "5.2.2"
   },
   "dependencies": {
+    "@adobe/css-tools": "4.3.2",
     "@aws-sdk/client-s3": "3.296.0",
     "@aws-sdk/s3-request-presigner": "3.296.0",
     "@joplin/fork-htmlparser2": "^4.1.50",
@@ -51,7 +52,6 @@
     "chokidar": "3.5.3",
     "color": "3.2.1",
     "compare-versions": "6.1.0",
-    "css": "3.0.0",
     "diff-match-patch": "1.0.5",
     "es6-promise-pool": "2.5.0",
     "fast-deep-equal": "3.1.3",

packages/lib/services/style/cssToTheme.ts

@@ -2,7 +2,7 @@ import { Theme } from '../../themes/type';
 
 // Need to include it that way due to a bug in the lib:
 // https://github.com/reworkcss/css/pull/146#issuecomment-740412799
-const cssParse = require('css/lib/parse');
+import { CssRuleAST, CssTypes, parse as cssParse } from '@adobe/css-tools';
 
 function formatCssToThemeVariable(cssVariable: string): string {
 	const elements = cssVariable.substr(2).split('-');
@@ -27,12 +27,19 @@ export default function cssToTheme(css: string, sourceFilePath: string): Theme {
 		source: sourceFilePath,
 	});
 
-	if (!o?.stylesheet?.rules?.length) throw new Error(`Invalid CSS color file: ${sourceFilePath}`);
+	const rules = o?.stylesheet?.rules;
 
-	// Need "as any" because outdated TS definition file
+	if (!rules?.length) throw new Error(`Invalid CSS color file: ${sourceFilePath}`);
 
-	const rootRule = o.stylesheet.rules[0];
-	if (!rootRule.selectors.includes(':root')) throw new Error('`:root` rule not found');
+	let rootRule: CssRuleAST|null = null;
+	for (const rule of rules) {
+		if (rule.type === CssTypes.rule) {
+			rootRule = rule;
+			break;
+		}
+	}
+
+	if (!rootRule || !rootRule.selectors.includes(':root')) throw new Error('`:root` rule not found');
 
 	const declarations: any[] = rootRule.declarations;
 

packages/turndown/package.json

@@ -11,7 +11,7 @@
     "jsdom": false
   },
   "dependencies": {
-    "css": "3.0.0",
+    "@adobe/css-tools": "4.3.2",
     "html-entities": "1.4.0",
     "jsdom": "22.1.0"
   },

packages/turndown/src/utilities.js

@@ -1,4 +1,4 @@
-const css = require('css');
+const css = require('@adobe/css-tools');
 
 export function extend (destination) {
   for (var i = 1; i < arguments.length; i++) {

yarn.lock

@@ -26,6 +26,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@adobe/css-tools@npm:4.3.2":
+  version: 4.3.2
+  resolution: "@adobe/css-tools@npm:4.3.2"
+  checksum: 9667d61d55dc3b0a315c530ae84e016ce5267c4dd8ac00abb40108dc98e07b98e3090ce8b87acd51a41a68d9e84dcccb08cdf21c902572a9cf9dcaf830da4ae3
+  languageName: node
+  linkType: hard
+
 "@algolia/autocomplete-core@npm:1.9.3":
   version: 1.9.3
   resolution: "@algolia/autocomplete-core@npm:1.9.3"
@@ -6807,9 +6814,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@joplin/htmlpack@workspace:packages/htmlpack"
   dependencies:
+    "@adobe/css-tools": 4.3.2
     "@joplin/fork-htmlparser2": ^4.1.50
     "@types/fs-extra": 11.0.4
-    css: 3.0.0
     datauri: 4.1.0
     fs-extra: 11.1.1
     html-entities: 1.4.0
@@ -6820,6 +6827,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@joplin/lib@workspace:packages/lib"
   dependencies:
+    "@adobe/css-tools": 4.3.2
     "@aws-sdk/client-s3": 3.296.0
     "@aws-sdk/s3-request-presigner": 3.296.0
     "@joplin/fork-htmlparser2": ^4.1.50
@@ -6848,7 +6856,6 @@ __metadata:
     clean-html: 1.5.0
     color: 3.2.1
     compare-versions: 6.1.0
-    css: 3.0.0
     diff-match-patch: 1.0.5
     es6-promise-pool: 2.5.0
     fast-deep-equal: 3.1.3
@@ -7154,11 +7161,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@joplin/turndown@workspace:packages/turndown"
   dependencies:
+    "@adobe/css-tools": 4.3.2
     "@rollup/plugin-commonjs": 25.0.7
     "@rollup/plugin-node-resolve": 15.2.3
     "@rollup/plugin-replace": 5.0.5
     browserify: 14.5.0
-    css: 3.0.0
     html-entities: 1.4.0
     jsdom: 22.1.0
     rollup: 4.2.0
@@ -17146,17 +17153,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css@npm:3.0.0":
-  version: 3.0.0
-  resolution: "css@npm:3.0.0"
-  dependencies:
-    inherits: ^2.0.4
-    source-map: ^0.6.1
-    source-map-resolve: ^0.6.0
-  checksum: 4273ac816ddf99b99acb9c1d1a27d86d266a533cc01118369d941d8e8a78277a83cad3315e267a398c509d930fbb86504e193ea1ebc620a4a4212e06fe76e8be
-  languageName: node
-  linkType: hard
-
 "cssesc@npm:^3.0.0":
   version: 3.0.0
   resolution: "cssesc@npm:3.0.0"
@@ -38480,16 +38476,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-resolve@npm:^0.6.0":
-  version: 0.6.0
-  resolution: "source-map-resolve@npm:0.6.0"
-  dependencies:
-    atob: ^2.1.2
-    decode-uri-component: ^0.2.0
-  checksum: fe503b9e5dac1c54be835282fcfec10879434e7b3ee08a9774f230299c724a8d403484d9531276d1670c87390e0e4d1d3f92b14cca6e4a2445ea3016b786ecd4
-  languageName: node
-  linkType: hard
-
 "source-map-support@npm:0.5.13":
   version: 0.5.13
   resolution: "source-map-support@npm:0.5.13"