Inline import (#248)

* feat: inline @import css * test: add test for #230
nvh95 · Aug 22, 2022 · d991e54 · d991e54
1 parent 0e8a827
commit d991e54
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 12 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -1,7 +1,7 @@
 /** @type {import('@jest/types').Config.InitialOptions} */
 
 module.exports = {
-  roots: ['<rootDir>/demo'],
+  roots: ['<rootDir>/demo', '<rootDir>/src'],
   collectCoverageFrom: [
     'demo/**/*.{js,jsx,ts,tsx}',
     '!demo/**/*.d.ts',

diff --git 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
diff --git a/src/__tests__/230/base.css 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
@@ -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
@@ -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
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <p class="card lg:dark:content-auto"></p>
+  </body>
+</html>
diff --git a/src/__tests__/230/index.test.ts 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
@@ -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
@@ -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
@@ -0,0 +1,7 @@
+@tailwind utilities;
+
+@layer utilities {
+  .content-auto {
+    content-visibility: auto;
+  }
+}
diff --git 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},
   )