Resolve css from node_modules using postcss. (#1187)

packages/ui/build/rollup/configs/cjs.js

@@ -7,6 +7,7 @@ import { nodeResolve as nodeResolvePlugin } from '@rollup/plugin-node-resolve'
 import typescriptDeclarationPlugin from '../plugins/rollup-typescript-declaration'
 import { terserPlugin } from '../plugins/rollup-teaser-preset'
 import { dependencies, peerDependencies } from '../utils'
+import postcssImport from '../postcss-plugins/postcss-import'
 
 /** Used for SSR builds */
 export function createCJSConfig ({ input, outDir = 'dist/', minify = false, declaration = false, ssr = true, sourcemap = false }) {
@@ -29,7 +30,9 @@ export function createCJSConfig ({ input, outDir = 'dist/', minify = false, decl
       vuePlugin({ target: ssr ? 'node' : 'browser', template: { optimizeSSR: ssr }, compileTemplate: true, preprocessStyles: true }),
       commonjsPlugin(),
       nodeResolvePlugin({ browser: !ssr }),
-      postcssPlugin(),
+      postcssPlugin({
+        plugins: [postcssImport()],
+      }),
     ],
   })
 

packages/ui/build/rollup/configs/esm.js

@@ -8,6 +8,7 @@ import typescriptDeclarationPlugin from '../plugins/rollup-typescript-declaratio
 import { terserPlugin } from '../plugins/rollup-teaser-preset'
 import { dependencies, peerDependencies } from '../utils'
 import { getInputs } from '../generate-rollup-inputs'
+import postcssImport from '../postcss-plugins/postcss-import'
 
 /** Used for tree-shaking. It creates separate modules in ESM format, that can be tree-shakable by any bundler. */
 export function createESMConfig ({ input, outDir = 'dist/', minify = false, declaration = false, ssr = false, sourcemap = false }) {
@@ -43,6 +44,7 @@ export function createESMConfig ({ input, outDir = 'dist/', minify = false, decl
       commonjsPlugin(),
       postcssPlugin({
         minimize: minify,
+        plugins: [postcssImport()],
       }),
       nodeResolvePlugin(),
     ],

packages/ui/build/rollup/configs/iife.js

@@ -6,6 +6,7 @@ import commonjsPlugin from '@rollup/plugin-commonjs'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
 import typescriptDeclarationPlugin from '../plugins/rollup-typescript-declaration'
 import { terserPlugin } from '../plugins/rollup-teaser-preset'
+import postcssImport from '../postcss-plugins/postcss-import'
 
 /** Used to create lib, that can be used in browser. This build define VuesticUI global variable. */
 export function createIIFEConfig ({ input, outDir = 'dist/', minify = false, declaration = false, sourcemap = false, libName = 'vuestic-ui' }) {
@@ -33,10 +34,14 @@ export function createIIFEConfig ({ input, outDir = 'dist/', minify = false, dec
 
     plugins: [
       typescriptPlugin({ check: false }),
-      vuePlugin({ target: 'browser', compileTemplate: true, preprocessStyles: true, css: false }),
+      vuePlugin({ target: 'browser', compileTemplate: true, preprocessStyles: true }),
       commonjsPlugin(),
       nodeResolve({ browser: true }),
-      postcssPlugin({ minimize: minify, extract: true }),
+      postcssPlugin({
+        minimize: minify,
+        extract: true,
+        plugins: [postcssImport()],
+      }),
     ],
   })
 

packages/ui/build/rollup/configs/styles.js

@@ -1,8 +1,9 @@
 import { defineConfig } from 'rollup'
 import postcssPlugin from 'rollup-plugin-postcss'
 import deleteJunkPlugin from '../plugins/rollup-delete-junk'
-import transformScssPlugin from '../plugins/rollup-transofrm-scss'
+import transformScssPlugin from '../plugins/rollup-transform-scss'
 import copyPlugin from 'rollup-plugin-copy'
+import postcssImport from '../postcss-plugins/postcss-import'
 
 /** Used for tree-shaking. It creates separate modules in ESM format, that can be tree-shakable by any bundler. */
 export function createStylesConfig ({ input, outDir = 'dist/', minify = false }) {
@@ -21,6 +22,7 @@ export function createStylesConfig ({ input, outDir = 'dist/', minify = false })
         minimize: minify,
         extract: 'vuestic-ui.css',
         include: 'src/styles/**/*.scss',
+        plugins: [postcssImport()],
       }),
       transformScssPlugin({
         inputDir: inputPathWithoutFilename,

packages/ui/build/rollup/plugins/rollup-transofrm-scss.js → packages/ui/build/rollup/plugins/rollup-transform-scss.js

@@ -1,6 +1,9 @@
 import { readdirSync, existsSync, mkdirSync, writeFile } from 'fs'
 import { resolve, relative, dirname } from 'path'
 import sass from 'sass'
+import postcss from 'postcss'
+import postcssImport from '../postcss-plugins/postcss-import'
+import cssnano from 'cssnano'
 
 const readDirRecursive = (path) => {
   return readdirSync(path, { withFileTypes: true })
@@ -25,7 +28,7 @@ export default function ({
   filter,
 }) {
   return {
-    name: 'rollup-transofrm-scss',
+    name: 'rollup-transform-scss',
     closeBundle: async (err) => {
       if (err) { return }
 
@@ -38,16 +41,25 @@ export default function ({
       })
 
       await Promise.all(inputFiles.map((filePath, index) => {
-        return new Promise((resolve) => {
+        return new Promise((resolve, reject) => {
           const sassResult = sass.renderSync({ file: filePath })
 
-          if (sassResult.css.toString().length === 0) { return }
+          if (sassResult.css.length === 0) { return }
 
-          const outputFileDir = dirname(outputFiles[index])
+          // Resolve imports from node_modules with postcss
+          postcss()
+            .use(postcssImport())
+            .use(cssnano()) // Minify postcss result and remove comments
+            .process(sassResult.css, { from: filePath })
+            .then((result) => {
+              if (!result || result.content.length === 0) { return }
 
-          if (!existsSync(outputFileDir)) { mkdirSync(outputFileDir) }
+              const outputFileDir = dirname(outputFiles[index])
+              if (!existsSync(outputFileDir)) { mkdirSync(outputFileDir) }
 
-          writeFile(outputFiles[index], sassResult.css, () => resolve())
+              writeFile(outputFiles[index], result.content, () => resolve())
+            })
+            .catch((err) => reject(err))
         })
       }))
     },

packages/ui/build/rollup/postcss-plugins/postcss-import.js

@@ -0,0 +1,18 @@
+import postcssImport from 'postcss-import'
+import postcssImportResolver from 'postcss-import/lib/resolve-id'
+
+/**
+ * @param options { postcssImport.AtImportOptions }
+ */
+export default (options) => postcssImport({
+  ...options,
+  resolve: (id, basedir, options) => {
+    // PostcssImport automatically trying to resolve relative module, and then trying to resolve it from node_modules
+    // Webpack '~' alias that resolve to node_modules should be deleted
+    if (/^~/.test(id)) {
+      id = id.slice(1)
+    }
+
+    return postcssImportResolver(id, basedir, options)
+  },
+})

packages/ui/package.json

@@ -107,6 +107,7 @@
     "mini-css-extract-plugin": "^1.3.0",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
     "postcss": "^8.2.1",
+    "postcss-import": "^14.0.2",
     "postcss-loader": "^4.1.0",
     "rollup": "^2.53.1",
     "rollup-plugin-copy": "^3.4.0",

yarn.lock

@@ -14777,6 +14777,15 @@ postcss-html@^0.36.0:
   dependencies:
     htmlparser2 "^3.10.0"
 
+postcss-import@^14.0.2:
+  version "14.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.0.2.tgz#60eff77e6be92e7b67fe469ec797d9424cae1aa1"
+  integrity sha512-BJ2pVK4KhUyMcqjuKs9RijV5tatNzNa73e/32aBVE/ejYPe37iH+6vAu9WvqUkB5OAYgLHzbSvzHnorybJCm9g==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
 postcss-less@^3.1.4:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-3.1.4.tgz#369f58642b5928ef898ffbc1a6e93c958304c5ad"
@@ -15327,7 +15336,7 @@ postcss-value-parser@^3.0.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
-postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
@@ -15840,6 +15849,13 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=
+  dependencies:
+    pify "^2.3.0"
+
 read-cmd-shim@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-1.0.5.tgz#87e43eba50098ba5a32d0ceb583ab8e43b961c16"