diff --git a/addon/package.json b/addon/package.json index 0f5f889..bf6ab30 100644 --- a/addon/package.json +++ b/addon/package.json @@ -47,8 +47,8 @@ "@storybook/components": "^6.3.4", "@storybook/theming": "^6.3.4", "polished": "^4.1.0", - "postcss": "^7.0.36", - "postcss-scss": "^2.1.1", + "postcss": "^8.3.5", + "postcss-scss": "^4.0.0", "raw-loader": "^4.0.2", "react-storage-hooks": "^4.0.1", "react-use-clipboard": "^1.0.7" diff --git a/addon/src/parsers/postcss.parser.ts b/addon/src/parsers/postcss.parser.ts index 6cb4582..5157a88 100644 --- a/addon/src/parsers/postcss.parser.ts +++ b/addon/src/parsers/postcss.parser.ts @@ -1,4 +1,4 @@ -import postcss, { AtRule, Comment, Declaration, PluginInitializer, Syntax } from 'postcss'; +import postcss, { AcceptedPlugin, AtRule, Comment, Declaration, OldPlugin, Plugin } from 'postcss'; import scss from 'postcss-scss'; import { Category, CategoryRange } from '../types/category.types'; @@ -180,8 +180,9 @@ async function getNodes( const declarations: Declaration[] = []; const keyframes: AtRule[] = []; - const plugin: PluginInitializer = () => { - return (root) => { + const plugin: Plugin = { + postcssPlugin: 'storybook-design-token-parser', + Once(root) { root.walkAtRules((atRule) => { if (atRule.name === 'keyframes') { keyframes.push(atRule); @@ -214,16 +215,17 @@ async function getNodes( declarations.push(declaration); } }); - }; + } }; await Promise.all( files.map((file) => { const syntax: any = file.filename.endsWith('.scss') ? scss : undefined; - return postcss([ - postcss.plugin('storybook-design-token-parser', plugin) - ]).process(file.content, { from: file.filename, syntax }); + return postcss([plugin]).process(file.content, { + from: file.filename, + syntax + }); }) ); diff --git a/yarn.lock b/yarn.lock index a188522..ec43c64 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9968,6 +9968,11 @@ nanoid@^3.1.20: resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.22.tgz#b35f8fb7d151990a8aebd5aa5015c03cf726f844" integrity sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ== +nanoid@^3.1.23: + version "3.1.23" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81" + integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw== + nanomatch@^1.2.9: version "1.2.13" resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119" @@ -11374,12 +11379,10 @@ postcss-safe-parser@5.0.2: dependencies: postcss "^8.1.0" -postcss-scss@^2.1.1: - version "2.1.1" - resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-2.1.1.tgz#ec3a75fa29a55e016b90bf3269026c53c1d2b383" - integrity sha512-jQmGnj0hSGLd9RscFw9LyuSVAa5Bl1/KBPqG1NQw9w8ND55nY4ZEsdlVuYJvLPpV+y0nwTV5v/4rHPzZRihQbA== - dependencies: - postcss "^7.0.6" +postcss-scss@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.0.tgz#6cfe09040f01e3345c9c226894c5913ac5fa9381" + integrity sha512-xakgIr5ukOEyXFcsnADKjQtrk8nQyqn5VIEAA+PmPP4kBOpknmjpJMxBNqCR1/x20AS0aSfZkWsSdbMx2Ozm5A== postcss-selector-matches@^4.0.0: version "4.0.0" @@ -11499,6 +11502,15 @@ postcss@^8.1.0: nanoid "^3.1.20" source-map "^0.6.1" +postcss@^8.3.5: + version "8.3.5" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.5.tgz#982216b113412bc20a86289e91eb994952a5b709" + integrity sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA== + dependencies: + colorette "^1.2.2" + nanoid "^3.1.23" + source-map-js "^0.6.2" + prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" @@ -11548,9 +11560,9 @@ pretty-hrtime@^1.0.3: integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE= prismjs@^1.21.0: - version "1.24.0" - resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.24.0.tgz#0409c30068a6c52c89ef7f1089b3ca4de56be2ac" - integrity sha512-SqV5GRsNqnzCL8k5dfAjCNhUrF3pR0A9lTDSCUZeh/LIshheXJEaP0hwLz2t4XHivd2J/v2HR+gRnigzeKe3cQ== + version "1.24.1" + resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.24.1.tgz#c4d7895c4d6500289482fa8936d9cdd192684036" + integrity sha512-mNPsedLuk90RVJioIky8ANZEwYm5w9LcvCXrxHlwf4fNVSn8jEipMybMkWUyyF0JhnC+C4VcOVSBuHRKs1L5Ow== prismjs@~1.23.0: version "1.23.0" @@ -13043,6 +13055,11 @@ source-list-map@^2.0.0, source-list-map@^2.0.1: resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34" integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw== +source-map-js@^0.6.2: + version "0.6.2" + resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e" + integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug== + source-map-resolve@^0.5.0, source-map-resolve@^0.5.2: version "0.5.3" resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"