From c75a326372eb82104e9a49a7ce19665215f86c9b Mon Sep 17 00:00:00 2001 From: fupeng Date: Sun, 12 Sep 2021 02:35:54 +0800 Subject: [PATCH] feat: add less ~ import --- README.md | 6 +++- package.json | 3 +- src/less-loader.js | 4 ++- test/__snapshots__/index.test.js.snap | 35 +++++++++++++++++++ test/fixtures/less-import/_partial.less | 1 + test/fixtures/less-import/foo.less | 5 +++ test/fixtures/less-import/index.js | 1 + .../node_modules/foo/bar/_partial.less | 1 + .../less-import/node_modules/foo/bar/a.less | 3 ++ .../less-import/node_modules/foo/bar/b.less | 3 ++ .../less-import/node_modules/foo/bar/c.css | 3 ++ .../less-import/node_modules/foo/package.json | 3 ++ test/fixtures/less-import/style.less | 5 +++ test/index.test.js | 7 ++++ yarn.lock | 25 +++++++++++++ 15 files changed, 102 insertions(+), 3 deletions(-) create mode 100644 test/fixtures/less-import/_partial.less create mode 100644 test/fixtures/less-import/foo.less create mode 100644 test/fixtures/less-import/index.js create mode 100644 test/fixtures/less-import/node_modules/foo/bar/_partial.less create mode 100644 test/fixtures/less-import/node_modules/foo/bar/a.less create mode 100644 test/fixtures/less-import/node_modules/foo/bar/b.less create mode 100644 test/fixtures/less-import/node_modules/foo/bar/c.css create mode 100644 test/fixtures/less-import/node_modules/foo/package.json create mode 100644 test/fixtures/less-import/style.less diff --git a/README.md b/README.md index 26fe589f..8e8f766b 100644 --- a/README.md +++ b/README.md @@ -91,7 +91,7 @@ That's it, you can now import `.styl` `.scss` `.sass` `.less` files in your libr #### imports -__For Sass/Scss Only.__ +__For Sass/Scss/Less Only.__ Similar to how webpack's [sass-loader](https://github.com/webpack-contrib/sass-loader#imports) works, you can prepend the path with `~` to tell this plugin to resolve in `node_modules`: @@ -99,6 +99,10 @@ Similar to how webpack's [sass-loader](https://github.com/webpack-contrib/sass-l @import "~bootstrap/dist/css/bootstrap"; ``` +```less +@import "~bootstrap/dist/css/bootstrap"; +``` + ## Options ### extensions diff --git a/package.json b/package.json index 5cb52270..11d6b735 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "types/index.d.ts" ], "scripts": { - "test": "npm run lint && jest", + "test": "jest", "test:cov": "npm run lint && jest --coverage", "build": "bili", "lint": "xo", @@ -55,6 +55,7 @@ "concat-with-sourcemaps": "^1.1.0", "cssnano": "^5.0.1", "import-cwd": "^3.0.0", + "less-plugin-npm-import": "^2.1.0", "p-queue": "^6.6.2", "pify": "^5.0.0", "postcss-load-config": "^3.0.0", diff --git a/src/less-loader.js b/src/less-loader.js index e9bc3018..1e18908c 100644 --- a/src/less-loader.js +++ b/src/less-loader.js @@ -1,4 +1,5 @@ import pify from 'pify' +import LessNpmImport from 'less-plugin-npm-import' import humanlizePath from './utils/humanlize-path' import { loadModule } from './utils/load-module' @@ -15,7 +16,8 @@ export default { let { css, map, imports } = await pify(less.render.bind(less))(code, { ...this.options, sourceMap: this.sourceMap && {}, - filename: this.id + filename: this.id, + plugins: [new LessNpmImport({ prefix: '~' })] }) for (const dep of imports) { diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap index 8d90d994..57c034a1 100644 --- a/test/__snapshots__/index.test.js.snap +++ b/test/__snapshots__/index.test.js.snap @@ -563,6 +563,41 @@ console.log(css_248z$5, css_248z$4); " `; +exports[`less import: js code 1`] = ` +"'use strict'; + +function styleInject(css, ref) { + if ( ref === void 0 ) ref = {}; + var insertAt = ref.insertAt; + + if (!css || typeof document === 'undefined') { return; } + + var head = document.head || document.getElementsByTagName('head')[0]; + var style = document.createElement('style'); + style.type = 'text/css'; + + if (insertAt === 'top') { + if (head.firstChild) { + head.insertBefore(style, head.firstChild); + } else { + head.appendChild(style); + } + } else { + head.appendChild(style); + } + + if (style.styleSheet) { + style.styleSheet.cssText = css; + } else { + style.appendChild(document.createTextNode(css)); + } +} + +var css_248z = \\".a {\\\\n color: pink;\\\\n}\\\\n.b {\\\\n color: red;\\\\n}\\\\n.c {\\\\n color: black;\\\\n}\\\\n.foo {\\\\n color: magenta;\\\\n}\\\\n\\"; +styleInject(css_248z); +" +`; + exports[`minimize extract: css code 1`] = `".bar,body{color:red}body{background:red}#sidebar{background-color:#faa;width:30%}#header{color:#6c94be}.pcss{color:red}"`; exports[`minimize extract: js code 1`] = ` diff --git a/test/fixtures/less-import/_partial.less b/test/fixtures/less-import/_partial.less new file mode 100644 index 00000000..7bcb4011 --- /dev/null +++ b/test/fixtures/less-import/_partial.less @@ -0,0 +1 @@ +@color: magenta; diff --git a/test/fixtures/less-import/foo.less b/test/fixtures/less-import/foo.less new file mode 100644 index 00000000..84d45f90 --- /dev/null +++ b/test/fixtures/less-import/foo.less @@ -0,0 +1,5 @@ +@import "_partial"; + +.foo { + color: @color; +} diff --git a/test/fixtures/less-import/index.js b/test/fixtures/less-import/index.js new file mode 100644 index 00000000..1d62fa92 --- /dev/null +++ b/test/fixtures/less-import/index.js @@ -0,0 +1 @@ +import './style.less' diff --git a/test/fixtures/less-import/node_modules/foo/bar/_partial.less b/test/fixtures/less-import/node_modules/foo/bar/_partial.less new file mode 100644 index 00000000..7bcb4011 --- /dev/null +++ b/test/fixtures/less-import/node_modules/foo/bar/_partial.less @@ -0,0 +1 @@ +@color: magenta; diff --git a/test/fixtures/less-import/node_modules/foo/bar/a.less b/test/fixtures/less-import/node_modules/foo/bar/a.less new file mode 100644 index 00000000..2ded61c2 --- /dev/null +++ b/test/fixtures/less-import/node_modules/foo/bar/a.less @@ -0,0 +1,3 @@ +.a { + color: pink; +} diff --git a/test/fixtures/less-import/node_modules/foo/bar/b.less b/test/fixtures/less-import/node_modules/foo/bar/b.less new file mode 100644 index 00000000..b28d1ab0 --- /dev/null +++ b/test/fixtures/less-import/node_modules/foo/bar/b.less @@ -0,0 +1,3 @@ +.b { + color: red; +} diff --git a/test/fixtures/less-import/node_modules/foo/bar/c.css b/test/fixtures/less-import/node_modules/foo/bar/c.css new file mode 100644 index 00000000..476e91eb --- /dev/null +++ b/test/fixtures/less-import/node_modules/foo/bar/c.css @@ -0,0 +1,3 @@ +.c { + color: black; +} diff --git a/test/fixtures/less-import/node_modules/foo/package.json b/test/fixtures/less-import/node_modules/foo/package.json new file mode 100644 index 00000000..bde99de9 --- /dev/null +++ b/test/fixtures/less-import/node_modules/foo/package.json @@ -0,0 +1,3 @@ +{ + "name": "foo" +} diff --git a/test/fixtures/less-import/style.less b/test/fixtures/less-import/style.less new file mode 100644 index 00000000..73c7f86f --- /dev/null +++ b/test/fixtures/less-import/style.less @@ -0,0 +1,5 @@ +@import "~foo/bar/a"; +@import "~foo/bar/b"; +@import "~foo/bar/c"; +@import "~foo/bar/_partial"; +@import "foo.less"; diff --git a/test/index.test.js b/test/index.test.js index 0ee03c9a..28e62884 100644 --- a/test/index.test.js +++ b/test/index.test.js @@ -411,6 +411,13 @@ snapshotMany('sass', [ } ]) +snapshotMany('less', [ + { + title: 'import', + input: 'less-import/index.js' + } +]) + test('onExtract', async () => { const result = await write({ input: 'simple/index.js', diff --git a/yarn.lock b/yarn.lock index 9d2ff5b6..04c39361 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1711,6 +1711,11 @@ arrify@^2.0.1: resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa" integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug== +asap@~2.0.3: + version "2.0.6" + resolved "https://registry.npm.taobao.org/asap/download/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46" + integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY= + asn1.js@^5.2.0: version "5.4.1" resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07" @@ -5766,6 +5771,14 @@ latest-version@^5.1.0: dependencies: package-json "^6.3.0" +less-plugin-npm-import@^2.1.0: + version "2.1.0" + resolved "https://registry.nlark.com/less-plugin-npm-import/download/less-plugin-npm-import-2.1.0.tgz#823e6986c93318a98171ca858848b6bead55bf3e" + integrity sha1-gj5phskzGKmBccqFiEi2vq1Vvz4= + dependencies: + promise "~7.0.1" + resolve "~1.1.6" + less@^3.12.2: version "3.13.1" resolved "https://registry.yarnpkg.com/less/-/less-3.13.1.tgz#0ebc91d2a0e9c0c6735b83d496b0ab0583077909" @@ -7646,6 +7659,13 @@ promise.series@^0.2.0: resolved "https://registry.yarnpkg.com/promise.series/-/promise.series-0.2.0.tgz#2cc7ebe959fc3a6619c04ab4dbdc9e452d864bbd" integrity sha1-LMfr6Vn8OmYZwEq029yeRS2GS70= +promise@~7.0.1: + version "7.0.4" + resolved "https://registry.nlark.com/promise/download/promise-7.0.4.tgz#363e84a4c36c8356b890fed62c91ce85d02ed539" + integrity sha1-Nj6EpMNsg1a4kP7WLJHOhdAu1Tk= + dependencies: + asap "~2.0.3" + prompts@^2.0.1: version "2.4.0" resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.0.tgz#4aa5de0723a231d1ee9121c40fdf663df73f61d7" @@ -8099,6 +8119,11 @@ resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.13.1, resolve@^1.1 is-core-module "^2.2.0" path-parse "^1.0.6" +resolve@~1.1.6: + version "1.1.7" + resolved "https://registry.npm.taobao.org/resolve/download/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b" + integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs= + responselike@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"