Fix @import statements for vue (codesandbox#3459)

CompuIves · web-flow · commit 1efb03a6c095 · 2020-02-04T11:08:13.000+01:00
* Fix @import statements for vue Fixes codesandbox#3419 * Fix which source is used
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -151,6 +151,10 @@ commands:
     steps:
       - restore_cache: *restore_deps_cache
       - restore_cache: *restore_standalone_deps_cache
+      # Add extra items to yarnclean so the cache doesn't grow too big
+      - run:
+          name: Configure .yarnclean
+          command: cat .yarnclean.ci >> .yarnclean
       - run:
           name: Install Dependencies
           command: yarn install
diff --git a/.yarnclean b/.yarnclean
@@ -1,48 +1,3 @@
-# test directories
-__tests__
-test
-tests
-powered-test
-
-# asset directories
-docs
-doc
-website
-images
-
-# examples
-example
-examples
-
-# code coverage directories
-coverage
-.nyc_output
-
-# build scripts
-Makefile
-Gulpfile.js
-Gruntfile.js
-
-# configs
-appveyor.yml
-circle.yml
-codeship-services.yml
-codeship-steps.yml
-wercker.yml
-.tern-project
-.gitattributes
-.editorconfig
-.*ignore
-.eslintrc
-.jshintrc
-.flowconfig
-.documentup.json
-.yarn-metadata.json
-.travis.yml
-
-# misc
-*.md
-
 @types/react-native
 packages/app/node_modules/styled-components
 
@@ -51,4 +6,4 @@ packages/app/node_modules/styled-components
 graphql-config/node_modules/**
 
 # Issue with jest conflicting with jest-styled-components
-jest-styled-components/typings/**
+jest-styled-components/typings/**
diff --git a/.yarnclean.ci b/.yarnclean.ci
@@ -0,0 +1,44 @@
+# test directories
+__tests__
+test
+tests
+powered-test
+
+# asset directories
+docs
+doc
+website
+images
+
+# examples
+example
+examples
+
+# code coverage directories
+coverage
+.nyc_output
+
+# build scripts
+Makefile
+Gulpfile.js
+Gruntfile.js
+
+# configs
+appveyor.yml
+circle.yml
+codeship-services.yml
+codeship-steps.yml
+wercker.yml
+.tern-project
+.gitattributes
+.editorconfig
+.*ignore
+.eslintrc
+.jshintrc
+.flowconfig
+.documentup.json
+.yarn-metadata.json
+.travis.yml
+
+# misc
+*.md
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -165,7 +165,7 @@
     "overmind-devtools": "^19.0.0",
     "overmind-react": "^23.0.0-1580488381342",
     "phoenix": "^1.4.11",
-    "postcss": "^6.0.9",
+    "postcss": "^7.0.26",
     "postcss-selector-parser": "^2.2.3",
     "posthtml": "^0.11.3",
     "posthtml-parser": "^0.4.1",
@@ -312,6 +312,7 @@
     "path-exists": "3.0.0",
     "path-override-webpack-plugin": "^0.1.2",
     "postcss-flexbugs-fixes": "^4.1.0",
+    "postcss-import": "^12.0.1",
     "postcss-loader": "3.0.0",
     "postcss-normalize": "^8.0.1",
     "postcss-preset-env": "^6.7.0",
diff --git a/packages/app/src/sandbox/eval/cache.ts b/packages/app/src/sandbox/eval/cache.ts
@@ -164,7 +164,9 @@ export function ignoreNextCache() {
 
 export async function consumeCache(manager: Manager) {
   try {
-    const shouldIgnoreCache = localStorage.getItem('ignoreCache');
+    const shouldIgnoreCache =
+      localStorage.getItem('ignoreCache') ||
+      localStorage.getItem('ignoreCacheDev');
     if (shouldIgnoreCache) {
       localStorage.removeItem('ignoreCache');
 
diff --git a/packages/app/src/sandbox/eval/transpilers/vue/style-compiler/loader.ts b/packages/app/src/sandbox/eval/transpilers/vue/style-compiler/loader.ts
@@ -1,11 +1,15 @@
-import postcss from 'postcss';
+import postcss, { ProcessOptions } from 'postcss';
+import postcssImportPlugin from 'postcss-import';
 
-import { type LoaderContext } from '../../../transpiled-module';
+import { LoaderContext } from '../../../transpiled-module';
 
 import trim from './plugins/trim';
 import scopeId from './plugins/scope-id';
 
-export default function(code: string, loaderContext: LoaderContext) {
+export default function(
+  code: string,
+  loaderContext: LoaderContext
+): Promise<{ transpiledCode: string; sourceMap: any }> {
   return new Promise((resolve, reject) => {
     const query = loaderContext.options;
 
@@ -14,17 +18,35 @@ export default function(code: string, loaderContext: LoaderContext) {
     if (!vueOptions) {
       vueOptions = {
         ...loaderContext.options.vue,
-        ...loaderContext.vue,
       };
     }
 
     // TODO autoprefixer
-    const plugins = [trim];
+    const plugins = [
+      postcssImportPlugin({
+        resolve: async (id: string) => {
+          try {
+            const result = await loaderContext.resolveTranspiledModuleAsync(id);
 
-    const options = {
+            return result.module.path;
+          } catch (e) {
+            return null;
+          }
+        },
+        load: async (filename: string) => {
+          const tModule = await loaderContext.resolveTranspiledModuleAsync(
+            filename
+          );
+
+          return tModule.module.code;
+        },
+      }),
+      trim,
+    ];
+
+    const options: ProcessOptions = {
       to: loaderContext.path,
       from: loaderContext.path,
-      map: false,
     };
 
     // add plugin for vue-loader scoped css rewrite
@@ -35,13 +57,13 @@ export default function(code: string, loaderContext: LoaderContext) {
     // source map
     if (
       loaderContext.sourceMap &&
-      vueOptions.cssSourceMap !== false &&
-      !loaderContext.map
+      vueOptions.cssSourceMap !== false
+      // !loaderContext.map
     ) {
       options.map = {
         inline: false,
         annotation: false,
-        prev: loaderContext.map,
+        // prev: loaderContext.map,
       };
     }
 
@@ -51,7 +73,8 @@ export default function(code: string, loaderContext: LoaderContext) {
         .process(code === null ? undefined : code, options)
         .then(result => {
           if (result.messages) {
-            result.messages.forEach(m => {
+            const messages = result.messages as any[];
+            messages.forEach(m => {
               if (m.type === 'dependency') {
                 loaderContext.addDependency(m.file);
               }
diff --git a/yarn.lock b/yarn.lock
@@ -22112,6 +22112,16 @@ postcss-image-set-function@^3.0.1:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
 
+postcss-import@^12.0.1:
+  version "12.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-12.0.1.tgz#cf8c7ab0b5ccab5649024536e565f841928b7153"
+  integrity sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==
+  dependencies:
+    postcss "^7.0.1"
+    postcss-value-parser "^3.2.3"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
 postcss-initial@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-3.0.1.tgz#99d319669a13d6c06ef8e70d852f68cb1b399b61"
@@ -22621,7 +22631,7 @@ postcss-unique-selectors@^4.0.1:
     postcss "^7.0.0"
     uniqs "^2.0.0"
 
-postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0, postcss-value-parser@^3.3.1:
+postcss-value-parser@^3.0.0, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0, postcss-value-parser@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
@@ -22676,15 +22686,15 @@ postcss@^5.2.12, postcss@^5.2.16:
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.23, postcss@^6.0.9:
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.23:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
   dependencies:
     chalk "^2.4.1"
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
-postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.23, postcss@^7.0.5, postcss@^7.0.6:
+postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.23, postcss@^7.0.26, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.26"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.26.tgz#5ed615cfcab35ba9bbb82414a4fa88ea10429587"
   integrity sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==
@@ -24372,6 +24382,13 @@ reactcss@^1.2.0:
   dependencies:
     lodash "^4.0.1"
 
+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-chunk@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/read-chunk/-/read-chunk-3.2.0.tgz#2984afe78ca9bfbbdb74b19387bf9e86289c16ca"
