From 47072b3813f4a993e0693cf75c8151832c1ec21d Mon Sep 17 00:00:00 2001 From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com> Date: Sat, 6 Jan 2024 04:13:23 -0800 Subject: [PATCH] Chore: Migrate from `css` to `@adobe/css-tools` (#9660) Co-authored-by: Laurent Cozic --- packages/htmlpack/package.json | 2 +- packages/htmlpack/src/index.ts | 7 +++-- packages/lib/import-enex-md-gen.ts | 2 +- packages/lib/package.json | 2 +- packages/lib/services/style/cssToTheme.ts | 17 ++++++++---- packages/turndown/package.json | 2 +- packages/turndown/src/utilities.js | 2 +- yarn.lock | 34 +++++++---------------- 8 files changed, 32 insertions(+), 36 deletions(-) diff --git a/packages/htmlpack/package.json b/packages/htmlpack/package.json index 587766ab9..d2d3d7ccc 100644 --- a/packages/htmlpack/package.json +++ b/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" diff --git a/packages/htmlpack/src/index.ts b/packages/htmlpack/src/index.ts index dfa45b706..2cf24f07a 100644 --- a/packages/htmlpack/src/index.ts +++ b/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}`; diff --git a/packages/lib/import-enex-md-gen.ts b/packages/lib/import-enex-md-gen.ts index 8394cee0d..156518d7d 100644 --- a/packages/lib/import-enex-md-gen.ts +++ b/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]]'; diff --git a/packages/lib/package.json b/packages/lib/package.json index d1ba0e135..1fb2f18ae 100644 --- a/packages/lib/package.json +++ b/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", diff --git a/packages/lib/services/style/cssToTheme.ts b/packages/lib/services/style/cssToTheme.ts index 867d70c3e..e6249825e 100644 --- a/packages/lib/services/style/cssToTheme.ts +++ b/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; diff --git a/packages/turndown/package.json b/packages/turndown/package.json index 96d1637fd..5513dd13a 100644 --- a/packages/turndown/package.json +++ b/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" }, diff --git a/packages/turndown/src/utilities.js b/packages/turndown/src/utilities.js index 04090cb6d..0e3fb0660 100644 --- a/packages/turndown/src/utilities.js +++ b/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++) { diff --git a/yarn.lock b/yarn.lock index b5841bd46..78c5aa3ef 100644 --- a/yarn.lock +++ b/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"