diff --git a/package-lock.json b/package-lock.json index 2238245a..f60e81b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,10 +10,10 @@ "license": "MIT", "dependencies": { "icss-utils": "^5.1.0", - "postcss": "^8.4.31", + "postcss": "^8.4.33", "postcss-modules-extract-imports": "^3.0.0", - "postcss-modules-local-by-default": "^4.0.3", - "postcss-modules-scope": "^3.1.0", + "postcss-modules-local-by-default": "^4.0.4", + "postcss-modules-scope": "^3.1.1", "postcss-modules-values": "^4.0.0", "postcss-value-parser": "^4.2.0", "semver": "^7.5.4" @@ -12628,9 +12628,9 @@ } }, "node_modules/postcss": { - "version": "8.4.32", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz", - "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==", + "version": "8.4.33", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz", + "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==", "funding": [ { "type": "opencollective", @@ -13017,9 +13017,9 @@ } }, "node_modules/postcss-modules-local-by-default": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz", - "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.4.tgz", + "integrity": "sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==", "dependencies": { "icss-utils": "^5.0.0", "postcss-selector-parser": "^6.0.2", @@ -13033,9 +13033,9 @@ } }, "node_modules/postcss-modules-scope": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.1.0.tgz", - "integrity": "sha512-SaIbK8XW+MZbd0xHPf7kdfA/3eOt7vxJ72IRecn3EzuZVLr1r0orzf0MX/pN8m+NMDoo6X/SQd8oeKqGZd8PXg==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.1.1.tgz", + "integrity": "sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA==", "dependencies": { "postcss-selector-parser": "^6.0.4" }, @@ -16415,7 +16415,8 @@ "version": "7.21.0-placeholder-for-preset-env.2", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", - "dev": true + "dev": true, + "requires": {} }, "@babel/plugin-syntax-async-generators": { "version": "7.8.4", @@ -18147,13 +18148,15 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.2.tgz", "integrity": "sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==", - "dev": true + "dev": true, + "requires": {} }, "@csstools/selector-specificity": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz", "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==", - "dev": true + "dev": true, + "requires": {} }, "@dabh/diagnostics": { "version": "2.0.3", @@ -19324,7 +19327,8 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/@webpack-contrib/eslint-config-webpack/-/eslint-config-webpack-3.0.0.tgz", "integrity": "sha512-3f0dwuTZ1JZpnoGQ6tAKBWluZKZZBXr1ADoaOAbPiW0OvSN7o0wXFLGyfw6J+fW756xIkZLZ8JDYP5zInIRvBA==", - "dev": true + "dev": true, + "requires": {} }, "@xtuc/ieee754": { "version": "1.2.0", @@ -19372,13 +19376,15 @@ "version": "1.9.0", "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz", "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==", - "dev": true + "dev": true, + "requires": {} }, "acorn-jsx": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true + "dev": true, + "requires": {} }, "acorn-walk": { "version": "7.2.0", @@ -19456,7 +19462,8 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true + "dev": true, + "requires": {} }, "ansi-escapes": { "version": "4.3.2", @@ -20778,7 +20785,8 @@ "version": "6.0.3", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz", "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==", - "dev": true + "dev": true, + "requires": {} }, "cssdb": { "version": "7.9.1", @@ -21550,7 +21558,8 @@ "version": "8.10.0", "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz", "integrity": "sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==", - "dev": true + "dev": true, + "requires": {} }, "eslint-import-resolver-node": { "version": "0.3.9", @@ -22458,7 +22467,8 @@ "icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "requires": {} }, "ignore": { "version": "5.3.0", @@ -23510,7 +23520,8 @@ "version": "1.2.3", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz", "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==", - "dev": true + "dev": true, + "requires": {} }, "jest-regex-util": { "version": "28.0.2", @@ -25299,9 +25310,9 @@ } }, "postcss": { - "version": "8.4.32", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz", - "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==", + "version": "8.4.33", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz", + "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==", "requires": { "nanoid": "^3.3.7", "picocolors": "^1.0.0", @@ -25430,13 +25441,15 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz", "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==", - "dev": true + "dev": true, + "requires": {} }, "postcss-gap-properties": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.5.tgz", "integrity": "sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==", - "dev": true + "dev": true, + "requires": {} }, "postcss-image-set-function": { "version": "4.0.7", @@ -25451,7 +25464,8 @@ "version": "4.0.1", "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz", "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==", - "dev": true + "dev": true, + "requires": {} }, "postcss-lab-function": { "version": "4.2.1", @@ -25478,23 +25492,26 @@ "version": "5.0.4", "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz", "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==", - "dev": true + "dev": true, + "requires": {} }, "postcss-media-minmax": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz", "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==", - "dev": true + "dev": true, + "requires": {} }, "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==" + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", + "requires": {} }, "postcss-modules-local-by-default": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz", - "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.4.tgz", + "integrity": "sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==", "requires": { "icss-utils": "^5.0.0", "postcss-selector-parser": "^6.0.2", @@ -25502,9 +25519,9 @@ } }, "postcss-modules-scope": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.1.0.tgz", - "integrity": "sha512-SaIbK8XW+MZbd0xHPf7kdfA/3eOt7vxJ72IRecn3EzuZVLr1r0orzf0MX/pN8m+NMDoo6X/SQd8oeKqGZd8PXg==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.1.1.tgz", + "integrity": "sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA==", "requires": { "postcss-selector-parser": "^6.0.4" } @@ -25531,7 +25548,8 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.3.tgz", "integrity": "sha512-An6Ba4pHBiDtyVpSLymUUERMo2cU7s+Obz6BTrS+gxkbnSBNKSuD0AVUc+CpBMrpVPKKfoVz0WQCX+Tnst0i4A==", - "dev": true + "dev": true, + "requires": {} }, "postcss-overflow-shorthand": { "version": "3.0.4", @@ -25546,7 +25564,8 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz", "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==", - "dev": true + "dev": true, + "requires": {} }, "postcss-place": { "version": "7.0.5", @@ -25627,7 +25646,8 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz", "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==", - "dev": true + "dev": true, + "requires": {} }, "postcss-selector-not": { "version": "6.0.1", @@ -26671,7 +26691,8 @@ "version": "3.3.3", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.3.tgz", "integrity": "sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==", - "dev": true + "dev": true, + "requires": {} }, "stylus": { "version": "0.59.0", @@ -27532,7 +27553,8 @@ "version": "8.15.1", "resolved": "https://registry.npmjs.org/ws/-/ws-8.15.1.tgz", "integrity": "sha512-W5OZiCjXEmk0yZ66ZN82beM5Sz7l7coYxpRkzS+p9PP+ToQry8szKh+61eNktr7EA9DOwvFGhfC605jDHbP6QQ==", - "dev": true + "dev": true, + "requires": {} }, "xdg-basedir": { "version": "4.0.0", diff --git a/package.json b/package.json index 25cae074..254ef18f 100644 --- a/package.json +++ b/package.json @@ -47,10 +47,10 @@ }, "dependencies": { "icss-utils": "^5.1.0", - "postcss": "^8.4.31", + "postcss": "^8.4.33", "postcss-modules-extract-imports": "^3.0.0", - "postcss-modules-local-by-default": "^4.0.3", - "postcss-modules-scope": "^3.1.0", + "postcss-modules-local-by-default": "^4.0.4", + "postcss-modules-scope": "^3.1.1", "postcss-modules-values": "^4.0.0", "postcss-value-parser": "^4.2.0", "semver": "^7.5.4" diff --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap index cf46c6eb..5ec97206 100644 --- a/test/__snapshots__/modules-option.test.js.snap +++ b/test/__snapshots__/modules-option.test.js.snap @@ -10255,6 +10255,274 @@ Array [ exports[`"modules" option should work with \`@\` character in scoped packages: warnings 1`] = `Array []`; +exports[`"modules" option should work with \`@scope\` at-rule: errors 1`] = `Array []`; + +exports[`"modules" option should work with \`@scope\` at-rule: module 1`] = ` +"// Imports +import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../../../src/runtime/noSourceMaps.js\\"; +import ___CSS_LOADER_API_IMPORT___ from \\"../../../../src/runtime/api.js\\"; +var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); +// Module +___CSS_LOADER_EXPORT___.push([module.id, \`@scope (.kthHR5ALtmYK9QgapjA3) { + :scope { + background-color: plum; + } + + .tHELZHxFZl5YuwVt1kmN { + color: darkmagenta; + } +} + +@scope (.kodeNqRFoMkWN6SDcuTu) { + :scope { + background-color: darkmagenta; + color: antiquewhite; + } + + .yv3SIfJTNkZjzBV3Fc0c { + color: plum; + } +} +\`, \\"\\"]); +// Exports +___CSS_LOADER_EXPORT___.locals = { + \\"class-a\\": \`tHELZHxFZl5YuwVt1kmN\`, + \\"class-b\\": \`yv3SIfJTNkZjzBV3Fc0c\` +}; +export default ___CSS_LOADER_EXPORT___; +" +`; + +exports[`"modules" option should work with \`@scope\` at-rule: result 1`] = ` +Array [ + Array [ + "./modules/scope/css.css", + "@scope (.kthHR5ALtmYK9QgapjA3) { + :scope { + background-color: plum; + } + + .tHELZHxFZl5YuwVt1kmN { + color: darkmagenta; + } +} + +@scope (.kodeNqRFoMkWN6SDcuTu) { + :scope { + background-color: darkmagenta; + color: antiquewhite; + } + + .yv3SIfJTNkZjzBV3Fc0c { + color: plum; + } +} +", + "", + ], +] +`; + +exports[`"modules" option should work with \`@scope\` at-rule: warnings 1`] = `Array []`; + +exports[`"modules" option should work with CSS nesting: errors 1`] = `Array []`; + +exports[`"modules" option should work with CSS nesting: module 1`] = ` +"// Imports +import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../../../src/runtime/noSourceMaps.js\\"; +import ___CSS_LOADER_API_IMPORT___ from \\"../../../../src/runtime/api.js\\"; +var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); +// Module +___CSS_LOADER_EXPORT___.push([module.id, \`._pG6Ii1pxmcUMD0NzUtQ { + width: 90%; + justify-content: center; + border-radius: 1rem; + border: black solid 2px; + background-color: #ffc107; + color: black; + padding: 1rem; + + .iUl5nI1Dv6TIu2YP4dWR:before { + /* equivalent to \\\\\`.notice .notice-heading:before\\\\\` */ + content: \\"ℹ︎ \\"; + } + + &.TFrsdnZD18tk3GETl69r { + /* equivalent to \\\\\`.notice.warning\\\\\` */ + background-color: #d81b60; + border-color: #d81b60; + color: white; + .q_ifMKrTEObqZgH3LvyG:before { + /* equivalent to \\\\\`.notice.warning .warning-heading:before\\\\\` */ + content: \\"! \\"; + } + } + + &.qsxzhFlwpVGqHrGQJ1hN { + /* equivalent to \\\\\`.notice.success\\\\\` */ + background-color: #004d40; + border-color: #004d40; + color: white; + + .A8gfWSRbM9YW0L6tOjQF:before { + /* equivalent to \\\\\`.notice.success .success-heading:before\\\\\` */ + content: \\"✓ \\"; + } + } +} + +.VqpL5NBnVLpSzG9MmKBr { + color: red; +} + +.ql3V2zACcMFSFfphBZPW { + + &.dszXEFjuKeRqj_gVSvHw { + color: blue; + } +} + +.VqpL5NBnVLpSzG9MmKBr { + display: grid; + + @media (orientation: landscape) { + & { + grid-auto-flow: column; + } + } +} + +@media (orientation: landscape) { + .cPifDMAgF2q_hT5k2Uk_ { + color: red; + } +} + +@media (orientation: landscape) { + @media (orientation: landscape) { + .TmIpPZmDj78OxIhKF77L { + color: red; + } + } +} + +._gVr6K1cS3fTgF_VlJkG { + + @media (orientation: landscape) { + color: red; + } +} +\`, \\"\\"]); +// Exports +___CSS_LOADER_EXPORT___.locals = { + \\"notice\\": \`_pG6Ii1pxmcUMD0NzUtQ\`, + \\"notice-heading\\": \`iUl5nI1Dv6TIu2YP4dWR\`, + \\"warning\\": \`TFrsdnZD18tk3GETl69r\`, + \\"warning-heading\\": \`q_ifMKrTEObqZgH3LvyG\`, + \\"success\\": \`qsxzhFlwpVGqHrGQJ1hN\`, + \\"success-heading\\": \`A8gfWSRbM9YW0L6tOjQF\`, + \\"foo\\": \`VqpL5NBnVLpSzG9MmKBr\`, + \\"bar\\": \`ql3V2zACcMFSFfphBZPW VqpL5NBnVLpSzG9MmKBr\`, + \\"baz\\": \`dszXEFjuKeRqj_gVSvHw\`, + \\"a\\": \`cPifDMAgF2q_hT5k2Uk_\`, + \\"b\\": \`TmIpPZmDj78OxIhKF77L cPifDMAgF2q_hT5k2Uk_\`, + \\"n\\": \`_gVr6K1cS3fTgF_VlJkG cPifDMAgF2q_hT5k2Uk_\` +}; +export default ___CSS_LOADER_EXPORT___; +" +`; + +exports[`"modules" option should work with CSS nesting: result 1`] = ` +Array [ + Array [ + "./modules/nesting/css.css", + "._pG6Ii1pxmcUMD0NzUtQ { + width: 90%; + justify-content: center; + border-radius: 1rem; + border: black solid 2px; + background-color: #ffc107; + color: black; + padding: 1rem; + + .iUl5nI1Dv6TIu2YP4dWR:before { + /* equivalent to \`.notice .notice-heading:before\` */ + content: \\"ℹ︎ \\"; + } + + &.TFrsdnZD18tk3GETl69r { + /* equivalent to \`.notice.warning\` */ + background-color: #d81b60; + border-color: #d81b60; + color: white; + .q_ifMKrTEObqZgH3LvyG:before { + /* equivalent to \`.notice.warning .warning-heading:before\` */ + content: \\"! \\"; + } + } + + &.qsxzhFlwpVGqHrGQJ1hN { + /* equivalent to \`.notice.success\` */ + background-color: #004d40; + border-color: #004d40; + color: white; + + .A8gfWSRbM9YW0L6tOjQF:before { + /* equivalent to \`.notice.success .success-heading:before\` */ + content: \\"✓ \\"; + } + } +} + +.VqpL5NBnVLpSzG9MmKBr { + color: red; +} + +.ql3V2zACcMFSFfphBZPW { + + &.dszXEFjuKeRqj_gVSvHw { + color: blue; + } +} + +.VqpL5NBnVLpSzG9MmKBr { + display: grid; + + @media (orientation: landscape) { + & { + grid-auto-flow: column; + } + } +} + +@media (orientation: landscape) { + .cPifDMAgF2q_hT5k2Uk_ { + color: red; + } +} + +@media (orientation: landscape) { + @media (orientation: landscape) { + .TmIpPZmDj78OxIhKF77L { + color: red; + } + } +} + +._gVr6K1cS3fTgF_VlJkG { + + @media (orientation: landscape) { + color: red; + } +} +", + "", + ], +] +`; + +exports[`"modules" option should work with CSS nesting: warnings 1`] = `Array []`; + exports[`"modules" option should work with a modules.auto Function that returns "false": errors 1`] = `Array []`; exports[`"modules" option should work with a modules.auto Function that returns "false": module 1`] = ` diff --git a/test/fixtures/modules/nesting/css.css b/test/fixtures/modules/nesting/css.css new file mode 100644 index 00000000..830dc026 --- /dev/null +++ b/test/fixtures/modules/nesting/css.css @@ -0,0 +1,82 @@ +.notice { + width: 90%; + justify-content: center; + border-radius: 1rem; + border: black solid 2px; + background-color: #ffc107; + color: black; + padding: 1rem; + + .notice-heading:before { + /* equivalent to `.notice .notice-heading:before` */ + content: "ℹ︎ "; + } + + &.warning { + /* equivalent to `.notice.warning` */ + background-color: #d81b60; + border-color: #d81b60; + color: white; + .warning-heading:before { + /* equivalent to `.notice.warning .warning-heading:before` */ + content: "! "; + } + } + + &.success { + /* equivalent to `.notice.success` */ + background-color: #004d40; + border-color: #004d40; + color: white; + + .success-heading:before { + /* equivalent to `.notice.success .success-heading:before` */ + content: "✓ "; + } + } +} + +.foo { + color: red; +} + +.bar { + composes: foo; + + &.baz { + color: blue; + } +} + +.foo { + display: grid; + + @media (orientation: landscape) { + & { + grid-auto-flow: column; + } + } +} + +@media (orientation: landscape) { + .a { + color: red; + } +} + +@media (orientation: landscape) { + @media (orientation: landscape) { + .b { + color: red; + composes: a; + } + } +} + +.n { + composes: a; + + @media (orientation: landscape) { + color: red; + } +} diff --git a/test/fixtures/modules/nesting/css.js b/test/fixtures/modules/nesting/css.js new file mode 100644 index 00000000..e3f7ac11 --- /dev/null +++ b/test/fixtures/modules/nesting/css.js @@ -0,0 +1,5 @@ +import css from './css.css'; + +__export__ = css; + +export default css; diff --git a/test/fixtures/modules/scope/css.css b/test/fixtures/modules/scope/css.css new file mode 100644 index 00000000..e30abe49 --- /dev/null +++ b/test/fixtures/modules/scope/css.css @@ -0,0 +1,20 @@ +@scope (.light-scheme) { + :scope { + background-color: plum; + } + + .class-a { + color: darkmagenta; + } +} + +@scope (.dark-scheme) { + :scope { + background-color: darkmagenta; + color: antiquewhite; + } + + .class-b { + color: plum; + } +} diff --git a/test/fixtures/modules/scope/css.js b/test/fixtures/modules/scope/css.js new file mode 100644 index 00000000..e3f7ac11 --- /dev/null +++ b/test/fixtures/modules/scope/css.js @@ -0,0 +1,5 @@ +import css from './css.css'; + +__export__ = css; + +export default css; diff --git a/test/modules-option.test.js b/test/modules-option.test.js index 2b376810..4f2f1bf9 100644 --- a/test/modules-option.test.js +++ b/test/modules-option.test.js @@ -2361,4 +2361,32 @@ describe('"modules" option', () => { expect(getWarnings(serverStats)).toMatchSnapshot("server warnings"); expect(getErrors(serverStats)).toMatchSnapshot("server errors"); }); + + it("should work with CSS nesting", async () => { + const compiler = getCompiler("./modules/nesting/css.js", { modules: true }); + const stats = await compile(compiler); + + expect(getModuleSource("./modules/nesting/css.css", stats)).toMatchSnapshot( + "module" + ); + expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot( + "result" + ); + expect(getWarnings(stats)).toMatchSnapshot("warnings"); + expect(getErrors(stats)).toMatchSnapshot("errors"); + }); + + it("should work with `@scope` at-rule", async () => { + const compiler = getCompiler("./modules/scope/css.js", { modules: true }); + const stats = await compile(compiler); + + expect(getModuleSource("./modules/scope/css.css", stats)).toMatchSnapshot( + "module" + ); + expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot( + "result" + ); + expect(getWarnings(stats)).toMatchSnapshot("warnings"); + expect(getErrors(stats)).toMatchSnapshot("errors"); + }); });