feat: add postcss packages

KonnorRogers · Jul 26, 2020 · 783adf8 · 783adf8
1 parent d14e3e9
commit 783adf8
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 9 deletions.
diff --git a/examples/rails-without-webpack/app/views/layouts/application.html.erb b/examples/rails-without-webpack/app/views/layouts/application.html.erb
@@ -6,8 +6,9 @@
     <%= csp_meta_tag %>
 
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-    <%= stylesheet_link_tag "/snowpacks/stylesheets/index', 'data-turbolinks-track': 'reload' %>
-    <%= javascript_include_tag "/snowpacks/packs/application', 'data-turbolinks-track': 'reload' %>
+
+    <%= stylesheet_link_tag '/snowpacks/stylesheets/index', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_include_tag '/snowpacks/packs/application', 'data-turbolinks-track': 'reload', type: 'module' %>
   </head>
 
   <body>

diff --git a/examples/rails-without-webpack/config/snowpacker/babel.config.js b/examples/rails-without-webpack/config/snowpacker/babel.config.js
@@ -1,6 +1,6 @@
-module.exports = function() {
+module.exports = function(api) {
   const validEnv = ['development', 'test', 'production']
-  const currentEnv = process.env["NODE_ENV"]
+  const currentEnv = process.env.NODE_ENV
   const isDevelopmentEnv = (currentEnv === "development")
   const isProductionEnv = (currentEnv === 'production')
   const isTestEnv = (currentEnv === 'test')
@@ -15,6 +15,10 @@ module.exports = function() {
     )
   }
 
+  // Cached based on the value of some function. If this function returns a value different from
+  // a previously-encountered value, the plugins will re-evaluate.
+  api.cache(() => currentEnv);
+
   return {
     presets: [
       isTestEnv && [

diff --git a/examples/rails-without-webpack/config/snowpacker/snowpack.config.js b/examples/rails-without-webpack/config/snowpacker/snowpack.config.js
@@ -13,10 +13,10 @@ const scripts = {
   "mount:snowpacks": `mount ${mount_dir} --to /${output_path}`,
   "build:css": `postcss --config ${postcss_config}`,
   "build:js,jsx,ts,tsx": `babel --config-file ${babel_config} \
-                                --out-dir ${process.cwd()} \
                                 ${mount_dir}`
 }
 
+                                "--out-dir ${process.cwd()} \ "
 const installOptions = {
   NODE_ENV: true
 }

diff --git a/examples/rails-without-webpack/package.json b/examples/rails-without-webpack/package.json
@@ -25,6 +25,7 @@
     "core-js": "3",
     "postcss": "^7.0.32",
     "postcss-cli": "^7.1.1",
+    "postcss-import": "^12.0.1",
     "snowpack": "^2.6.4"
   }
 }
diff --git a/examples/rails-without-webpack/yarn.lock b/examples/rails-without-webpack/yarn.lock
@@ -3019,6 +3019,16 @@ postcss-cli@^7.1.1:
     read-cache "^1.0.0"
     yargs "^15.0.2"
 
+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-load-config@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.0.tgz#c84d692b7bb7b41ddced94ee62e8ab31b417b003"
@@ -3068,6 +3078,11 @@ postcss-reporter@^6.0.0:
     log-symbols "^2.2.0"
     postcss "^7.0.7"
 
+postcss-value-parser@^3.2.3:
+  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==
+
 postcss@6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.1.tgz#000dbd1f8eef217aa368b9a212c5fc40b2a8f3f2"
@@ -3086,7 +3101,7 @@ postcss@^6.0.1:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
-postcss@^7.0.0, postcss@^7.0.32, postcss@^7.0.7:
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.32, postcss@^7.0.7:
   version "7.0.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
   integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
@@ -3275,7 +3290,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.11.0, resolve@^1.12.0, resolve@^1.17.0, resolve@^1.3.2, resolve@^1.8.1:
+resolve@^1.1.7, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.17.0, resolve@^1.3.2, resolve@^1.8.1:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
   integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==

diff --git a/lib/snowpacker/snowpacker_generator.rb b/lib/snowpacker/snowpacker_generator.rb
@@ -19,6 +19,9 @@ def add_snowpack
                  core-js@3 \
                  postcss \
                  postcss-cli \
+                 postcss-import \
+                 postcss-flexbugs-fixes \
+                 postcss-preset-env \
                  @babel/core \
                  @babel/cli \
                  @babel/preset-env \

diff --git a/lib/snowpacker/templates/babel.config.js b/lib/snowpacker/templates/babel.config.js
@@ -1,6 +1,6 @@
-module.exports = function() {
+module.exports = function(api) {
   const validEnv = ['development', 'test', 'production']
-  const currentEnv = process.env["NODE_ENV"]
+  const currentEnv = process.env.NODE_ENV
   const isDevelopmentEnv = (currentEnv === "development")
   const isProductionEnv = (currentEnv === 'production')
   const isTestEnv = (currentEnv === 'test')
@@ -15,6 +15,10 @@ module.exports = function() {
     )
   }
 
+  // Cached based on the value of some function. If this function returns a value different from
+  // a previously-encountered value, the plugins will re-evaluate.
+  api.cache(() => currentEnv);
+
   return {
     presets: [
       isTestEnv && [