From d991e54382ae6e4c9fb697bdcc8a2b147cef8b23 Mon Sep 17 00:00:00 2001 From: Hung Viet Nguyen Date: Mon, 22 Aug 2022 23:21:36 +0700 Subject: [PATCH] Inline import (#248) * feat: inline @import css * test: add test for #230 --- jest.config.js | 2 +- package.json | 1 + pnpm-lock.yaml | 12 ++---------- src/__tests__/230/base.css | 7 +++++++ src/__tests__/230/components.css | 10 ++++++++++ src/__tests__/230/index.css | 3 +++ src/__tests__/230/index.html | 12 ++++++++++++ src/__tests__/230/index.test.ts | 15 +++++++++++++++ src/__tests__/230/postcss.config.cjs | 24 ++++++++++++++++++++++++ src/__tests__/230/tailwind.config.cjs | 7 +++++++ src/__tests__/230/utils.css | 7 +++++++ src/transform.ts | 3 ++- 12 files changed, 91 insertions(+), 12 deletions(-) create mode 100644 src/__tests__/230/base.css create mode 100644 src/__tests__/230/components.css create mode 100644 src/__tests__/230/index.css create mode 100644 src/__tests__/230/index.html create mode 100644 src/__tests__/230/index.test.ts create mode 100644 src/__tests__/230/postcss.config.cjs create mode 100644 src/__tests__/230/tailwind.config.cjs create mode 100644 src/__tests__/230/utils.css diff --git a/jest.config.js b/jest.config.js index bd1a0d63..268cae5e 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,7 +1,7 @@ /** @type {import('@jest/types').Config.InitialOptions} */ module.exports = { - roots: ['/demo'], + roots: ['/demo', '/src'], collectCoverageFrom: [ 'demo/**/*.{js,jsx,ts,tsx}', '!demo/**/*.d.ts', diff --git a/package.json b/package.json index be45a99c..c7b52a79 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "connect": "^3.7.0", "find-node-modules": "^2.1.3", "open": "^8.4.0", + "postcss-import": "^14.1.0", "postcss-load-config": "^4.0.1", "sirv": "^2.0.2", "slash": "^3.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3aefcdc4..45e1f4bd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,7 @@ specifiers: npm-run-all: ^4.1.5 open: ^8.4.0 postcss: ^8.4.14 + postcss-import: ^14.1.0 postcss-load-config: ^4.0.1 postcss-modules: ^4.3.1 postcss-trolling: ^0.1.7 @@ -69,6 +70,7 @@ dependencies: connect: 3.7.0 find-node-modules: 2.1.3 open: 8.4.0 + postcss-import: 14.1.0_postcss@8.4.14 postcss-load-config: 4.0.1_postcss@8.4.14 sirv: 2.0.2 slash: 3.0.0 @@ -2845,7 +2847,6 @@ packages: /function-bind/1.1.1: resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==} - dev: true /function.prototype.name/1.1.5: resolution: {integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==} @@ -3045,7 +3046,6 @@ packages: engines: {node: '>= 0.4.0'} dependencies: function-bind: 1.1.1 - dev: true /hoist-non-react-statics/3.3.2: resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} @@ -3231,7 +3231,6 @@ packages: resolution: {integrity: sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==} dependencies: has: 1.0.3 - dev: true /is-date-object/1.0.5: resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==} @@ -4507,7 +4506,6 @@ packages: /path-parse/1.0.7: resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} - dev: true /path-strip-sep/1.0.12: resolution: {integrity: sha512-EJZSC5WBjVlA9XHLCiluiyisYg6yzeMJ4nY3BQVCuedyEHA/I2crcHWdwuQ74h3V599U9nEbEZUTvvSxOK3vbQ==} @@ -4542,7 +4540,6 @@ packages: /pify/2.3.0: resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==} engines: {node: '>=0.10.0'} - dev: true /pify/3.0.0: resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==} @@ -4578,7 +4575,6 @@ packages: postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.1 - dev: true /postcss-js/4.0.0_postcss@8.4.14: resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==} @@ -4708,7 +4704,6 @@ packages: /postcss-value-parser/4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} - dev: true /postcss/5.2.18: resolution: {integrity: sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==} @@ -4863,7 +4858,6 @@ packages: resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==} dependencies: pify: 2.3.0 - dev: true /read-pkg/3.0.0: resolution: {integrity: sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==} @@ -4956,7 +4950,6 @@ packages: is-core-module: 2.9.0 path-parse: 1.0.7 supports-preserve-symlinks-flag: 1.0.0 - dev: true /responselike/1.0.2: resolution: {integrity: sha512-/Fpe5guzJk1gPqdJLJR5u7eG/gNY4nImjbRDaVWVMRhne55TCmj2i9Q+54PBRfatRC8v/rIiv9BN0pMd9OV5EQ==} @@ -5405,7 +5398,6 @@ packages: /supports-preserve-symlinks-flag/1.0.0: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} - dev: true /svg-parser/2.0.4: resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==} diff --git a/src/__tests__/230/base.css b/src/__tests__/230/base.css new file mode 100644 index 00000000..e1c1ed6c --- /dev/null +++ b/src/__tests__/230/base.css @@ -0,0 +1,7 @@ +@tailwind base; + +@layer base { + #id { + @apply flex min-h-screen flex-col; + } +} diff --git a/src/__tests__/230/components.css b/src/__tests__/230/components.css new file mode 100644 index 00000000..10e2f579 --- /dev/null +++ b/src/__tests__/230/components.css @@ -0,0 +1,10 @@ +@tailwind components; + +@layer components { + .card { + background-color: theme('colors.white'); + border-radius: theme('borderRadius.lg'); + padding: theme('spacing.6'); + box-shadow: theme('boxShadow.xl'); + } +} diff --git a/src/__tests__/230/index.css b/src/__tests__/230/index.css new file mode 100644 index 00000000..79f5b5e4 --- /dev/null +++ b/src/__tests__/230/index.css @@ -0,0 +1,3 @@ +@import 'base.css'; +@import 'components.css'; +@import 'utils.css'; diff --git a/src/__tests__/230/index.html b/src/__tests__/230/index.html new file mode 100644 index 00000000..263632be --- /dev/null +++ b/src/__tests__/230/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + +

+ + diff --git a/src/__tests__/230/index.test.ts b/src/__tests__/230/index.test.ts new file mode 100644 index 00000000..48e33e71 --- /dev/null +++ b/src/__tests__/230/index.test.ts @@ -0,0 +1,15 @@ +// https://github.com/nvh95/jest-preview/issues/230 +import cssTransform from '../../preconfigTransform/css'; +import fs from 'fs'; +import path from 'path'; + +const filename = path.join(__dirname, 'index.css'); +const cssSrc = fs.readFileSync(filename, 'utf8'); + +describe(`Tailwind CSS doesn't get compiled in @import'ed files`, () => { + it('should inline @import', () => { + expect(cssTransform.process(cssSrc, filename).code).toContain( + 'https://tailwindcss.com', + ); + }); +}); diff --git a/src/__tests__/230/postcss.config.cjs b/src/__tests__/230/postcss.config.cjs new file mode 100644 index 00000000..f8037e40 --- /dev/null +++ b/src/__tests__/230/postcss.config.cjs @@ -0,0 +1,24 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + 'postcss-trolling': { + comicSans: true, + aling: false, + blur: false, + blurBlink: false, + clearfix: false, + heigth: false, + hideCursor: false, + hideOdd: false, + ms: false, + ren: false, + rotate: false, + roulette: false, + slowlyGrowText: false, + verImportant: false, + wait: false, + zIndex: false, + }, + }, +}; diff --git a/src/__tests__/230/tailwind.config.cjs b/src/__tests__/230/tailwind.config.cjs new file mode 100644 index 00000000..15267575 --- /dev/null +++ b/src/__tests__/230/tailwind.config.cjs @@ -0,0 +1,7 @@ +module.exports = { + content: ['./index.html'], + theme: { + extend: {}, + }, + plugins: [], +}; diff --git a/src/__tests__/230/utils.css b/src/__tests__/230/utils.css new file mode 100644 index 00000000..0d3dbf02 --- /dev/null +++ b/src/__tests__/230/utils.css @@ -0,0 +1,7 @@ +@tailwind utilities; + +@layer utilities { + .content-auto { + content-visibility: auto; + } +} diff --git a/src/transform.ts b/src/transform.ts index 2dd2cad9..b4d01f3c 100644 --- a/src/transform.ts +++ b/src/transform.ts @@ -297,7 +297,7 @@ function processPostCss( // TODO: We have to re-execute "postcssrc()" every CSS file. // Can we do better? Singleton? postcssrc().then(({ plugins, options }) => { - // TODO: If "isModule" is true, append config for "postcss-modules" + plugins.unshift(require('postcss-import')()) if (isModule) { plugins.push( ${cssModulesPluginsContent}, @@ -319,6 +319,7 @@ const cssSrc = ${JSON.stringify(src)}; let plugins = []; if (isModule) { + plugins.unshift(require('postcss-import')()) plugins.push( ${cssModulesPluginsContent}, )