webpacker 5.2.1 → 6.0.0.pre.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.eslintrc.js +1 -1
- data/.gitignore +2 -0
- data/.node-version +1 -1
- data/.rubocop.yml +11 -16
- data/CHANGELOG.md +15 -4
- data/CONTRIBUTING.md +1 -1
- data/Gemfile.lock +17 -11
- data/README.md +8 -4
- data/docs/assets.md +21 -5
- data/docs/css.md +24 -29
- data/docs/deployment.md +18 -0
- data/docs/docker.md +2 -2
- data/docs/engines.md +1 -1
- data/docs/env.md +5 -0
- data/docs/es6.md +1 -1
- data/docs/integrations.md +1 -1
- data/docs/props.md +2 -38
- data/docs/react.md +183 -0
- data/docs/testing.md +11 -0
- data/docs/typescript.md +2 -2
- data/docs/webpack-dev-server.md +17 -15
- data/docs/webpack.md +58 -107
- data/lib/install/config/webpack/base.js +3 -0
- data/lib/install/config/webpack/development.js +2 -2
- data/lib/install/config/webpack/production.js +2 -2
- data/lib/install/config/webpack/test.js +2 -2
- data/lib/install/config/webpacker.yml +8 -37
- data/lib/install/examples/{vue → vue3}/app.vue +10 -5
- data/lib/install/examples/vue3/hello_vue.js +15 -0
- data/lib/install/javascript/packs/application.css +9 -0
- data/lib/install/template.rb +33 -19
- data/lib/tasks/webpacker.rake +2 -11
- data/lib/tasks/webpacker/binstubs.rake +6 -4
- data/lib/tasks/webpacker/check_binstubs.rake +4 -4
- data/lib/tasks/webpacker/check_yarn.rake +1 -2
- data/lib/tasks/webpacker/compile.rake +4 -2
- data/lib/tasks/webpacker/info.rake +12 -10
- data/lib/tasks/webpacker/install.rake +6 -4
- data/lib/tasks/webpacker/verify_install.rake +2 -1
- data/lib/tasks/webpacker/yarn_install.rake +9 -1
- data/lib/webpacker/commands.rb +1 -1
- data/lib/webpacker/compiler.rb +7 -6
- data/lib/webpacker/configuration.rb +6 -30
- data/lib/webpacker/dev_server_runner.rb +21 -2
- data/lib/webpacker/helper.rb +22 -32
- data/lib/webpacker/manifest.rb +1 -1
- data/lib/webpacker/version.rb +1 -1
- data/lib/webpacker/webpack_runner.rb +5 -0
- data/package.json +23 -39
- data/package/__tests__/config.js +5 -37
- data/package/__tests__/development.js +9 -11
- data/package/__tests__/env.js +12 -4
- data/package/__tests__/production.js +6 -6
- data/package/__tests__/staging.js +7 -6
- data/package/__tests__/test.js +4 -5
- data/package/babel/preset-react.js +62 -0
- data/package/babel/preset.js +44 -0
- data/package/config.js +3 -11
- data/package/env.js +8 -2
- data/package/environments/__tests__/base.js +15 -47
- data/package/environments/base.js +66 -126
- data/package/environments/development.js +45 -44
- data/package/environments/production.js +69 -65
- data/package/environments/test.js +2 -2
- data/package/index.js +6 -6
- data/package/rules/babel.js +9 -7
- data/package/rules/coffee.js +6 -0
- data/package/rules/erb.js +13 -0
- data/package/rules/file.js +19 -19
- data/package/rules/index.js +24 -18
- data/package/rules/less.js +18 -0
- data/package/rules/sass.js +5 -6
- data/package/rules/svg.js +23 -0
- data/package/utils/get_style_rule.js +22 -28
- data/package/utils/helpers.js +3 -35
- data/test/compiler_test.rb +0 -12
- data/test/configuration_test.rb +1 -32
- data/test/dev_server_runner_test.rb +24 -5
- data/test/engine_rake_tasks_test.rb +39 -0
- data/test/helper_test.rb +15 -9
- data/test/mounted_app/Rakefile +4 -0
- data/test/mounted_app/test/dummy/Rakefile +3 -0
- data/test/mounted_app/test/dummy/bin/rails +3 -0
- data/test/mounted_app/test/dummy/bin/rake +3 -0
- data/test/mounted_app/test/dummy/config.ru +5 -0
- data/test/mounted_app/test/dummy/config/application.rb +10 -0
- data/test/mounted_app/test/dummy/config/environment.rb +3 -0
- data/test/mounted_app/test/dummy/config/webpacker.yml +75 -0
- data/test/mounted_app/test/dummy/package.json +7 -0
- data/test/rake_tasks_test.rb +1 -10
- data/test/test_app/config/webpacker.yml +1 -25
- data/test/test_app/config/webpacker_public_root.yml +0 -1
- data/test/test_app/public/packs/manifest.json +17 -13
- data/test/test_app/some.config.js +0 -0
- data/test/webpack_runner_test.rb +9 -3
- data/webpacker.gemspec +1 -1
- data/yarn.lock +1858 -4915
- metadata +47 -70
- data/.travis.yml +0 -43
- data/lib/install/angular.rb +0 -23
- data/lib/install/coffee.rb +0 -25
- data/lib/install/config/.browserslistrc +0 -1
- data/lib/install/config/babel.config.js +0 -70
- data/lib/install/config/postcss.config.js +0 -12
- data/lib/install/config/webpack/environment.js +0 -3
- data/lib/install/elm.rb +0 -39
- data/lib/install/erb.rb +0 -25
- data/lib/install/examples/angular/hello_angular.js +0 -7
- data/lib/install/examples/angular/hello_angular/app/app.component.ts +0 -9
- data/lib/install/examples/angular/hello_angular/app/app.module.ts +0 -16
- data/lib/install/examples/angular/hello_angular/index.ts +0 -8
- data/lib/install/examples/angular/hello_angular/polyfills.ts +0 -73
- data/lib/install/examples/coffee/hello_coffee.coffee +0 -4
- data/lib/install/examples/elm/Main.elm +0 -55
- data/lib/install/examples/elm/hello_elm.js +0 -16
- data/lib/install/examples/erb/hello_erb.js.erb +0 -6
- data/lib/install/examples/react/babel.config.js +0 -87
- data/lib/install/examples/react/hello_react.jsx +0 -26
- data/lib/install/examples/react/tsconfig.json +0 -21
- data/lib/install/examples/stimulus/application.js +0 -1
- data/lib/install/examples/stimulus/controllers/hello_controller.js +0 -18
- data/lib/install/examples/stimulus/controllers/index.js +0 -9
- data/lib/install/examples/svelte/app.svelte +0 -11
- data/lib/install/examples/svelte/hello_svelte.js +0 -20
- data/lib/install/examples/typescript/hello_typescript.ts +0 -4
- data/lib/install/examples/typescript/tsconfig.json +0 -24
- data/lib/install/examples/vue/hello_vue.js +0 -72
- data/lib/install/loaders/coffee.js +0 -6
- data/lib/install/loaders/elm.js +0 -25
- data/lib/install/loaders/erb.js +0 -11
- data/lib/install/loaders/svelte.js +0 -9
- data/lib/install/loaders/vue.js +0 -6
- data/lib/install/react.rb +0 -18
- data/lib/install/stimulus.rb +0 -12
- data/lib/install/svelte.rb +0 -29
- data/lib/install/typescript.rb +0 -39
- data/lib/install/vue.rb +0 -49
- data/lib/tasks/installers.rake +0 -42
- data/package/config_types/__tests__/config_list.js +0 -118
- data/package/config_types/__tests__/config_object.js +0 -43
- data/package/config_types/config_list.js +0 -75
- data/package/config_types/config_object.js +0 -55
- data/package/config_types/index.js +0 -7
- data/package/rules/module.css.js +0 -3
- data/package/rules/module.sass.js +0 -8
- data/package/rules/node_modules.js +0 -22
- data/package/utils/__tests__/deep_assign.js +0 -32
- data/package/utils/__tests__/deep_merge.js +0 -10
- data/package/utils/__tests__/get_style_rule.js +0 -65
- data/package/utils/__tests__/objectify.js +0 -9
- data/package/utils/deep_assign.js +0 -22
- data/package/utils/deep_merge.js +0 -22
- data/package/utils/objectify.js +0 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c5808c11756423a2f910b9aa3675b5d85c94c5cae43a2db1c5c726588bb70cc7
|
4
|
+
data.tar.gz: f1b92f83b8d9f06a136c2df4116144b5a70bf74c7ab5c426fc90900f18f8de6a
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c8a10749bc365d1be38d214ab5cedc921ba5dc437193d2f0bf6da18a0e17650a7b35887fd340356de6f5476e388279f58324345685bfe848e2bcb26dfccbaf7a
|
7
|
+
data.tar.gz: 4106137abde49ccda533e7441d0e751f1540a4e175b8f392f486a9eea152083114fabd357db03dd57b9a2a2fe5774563a4cc6f7cf04b78c027b052190bd34d04
|
data/.eslintrc.js
CHANGED
data/.gitignore
CHANGED
data/.node-version
CHANGED
@@ -1 +1 @@
|
|
1
|
-
10.
|
1
|
+
10.22.1
|
data/.rubocop.yml
CHANGED
@@ -1,23 +1,18 @@
|
|
1
1
|
require: rubocop-performance
|
2
2
|
AllCops:
|
3
|
-
TargetRubyVersion: 2.
|
3
|
+
TargetRubyVersion: 2.4
|
4
4
|
# RuboCop has a bunch of cops enabled by default. This setting tells RuboCop
|
5
5
|
# to ignore them, so only the ones explicitly set in this file are enabled.
|
6
6
|
DisabledByDefault: true
|
7
7
|
Exclude:
|
8
|
-
-
|
9
|
-
-
|
10
|
-
-
|
8
|
+
- "lib/install/templates/**"
|
9
|
+
- "vendor/**/*"
|
10
|
+
- "node_modules/**/*"
|
11
11
|
|
12
12
|
# Prefer &&/|| over and/or.
|
13
13
|
Style/AndOr:
|
14
14
|
Enabled: true
|
15
15
|
|
16
|
-
# Do not use braces for hash literals when they are the last argument of a
|
17
|
-
# method call.
|
18
|
-
Style/BracesAroundHashParameters:
|
19
|
-
Enabled: true
|
20
|
-
|
21
16
|
# Align `when` with `case`.
|
22
17
|
Layout/CaseIndentation:
|
23
18
|
Enabled: true
|
@@ -50,7 +45,11 @@ Style/HashSyntax:
|
|
50
45
|
# extra level of indentation.
|
51
46
|
Layout/IndentationConsistency:
|
52
47
|
Enabled: true
|
53
|
-
EnforcedStyle:
|
48
|
+
EnforcedStyle: indented_internal_methods
|
49
|
+
|
50
|
+
# Detect hard tabs, no hard tabs.
|
51
|
+
Layout/IndentationStyle:
|
52
|
+
Enabled: true
|
54
53
|
|
55
54
|
# Two spaces, no tabs (for indentation).
|
56
55
|
Layout/IndentationWidth:
|
@@ -98,12 +97,8 @@ Style/StringLiterals:
|
|
98
97
|
Enabled: true
|
99
98
|
EnforcedStyle: double_quotes
|
100
99
|
|
101
|
-
# Detect hard tabs, no hard tabs.
|
102
|
-
Layout/Tab:
|
103
|
-
Enabled: true
|
104
|
-
|
105
100
|
# Blank lines should not have any spaces.
|
106
|
-
Layout/
|
101
|
+
Layout/TrailingEmptyLines:
|
107
102
|
Enabled: true
|
108
103
|
|
109
104
|
# No trailing whitespace.
|
@@ -111,7 +106,7 @@ Layout/TrailingWhitespace:
|
|
111
106
|
Enabled: true
|
112
107
|
|
113
108
|
# Use quotes for string literals when they are enough.
|
114
|
-
Style/
|
109
|
+
Style/RedundantPercentQ:
|
115
110
|
Enabled: true
|
116
111
|
|
117
112
|
# Align `end` with the matching keyword or starting expression except for
|
data/CHANGELOG.md
CHANGED
@@ -2,6 +2,19 @@
|
|
2
2
|
|
3
3
|
**Please note that Webpacker 4.1.0 has an installer bug. Please use 4.2.0 or above**
|
4
4
|
|
5
|
+
## [[6.0.0]](https://github.com/rails/webpacker/compare/v5.1.1...v6.0.0) - 2020-TBD
|
6
|
+
|
7
|
+
- `node_modules` will no longer be compiled by default. This primarily fixes [rails issue #35501](https://github.com/rails/rails/issues/35501) as well as [numerous other webpacker issues](https://github.com/rails/webpacker/issues/2131#issuecomment-581618497). The disabled loader can still be required explicitly via:
|
8
|
+
```js
|
9
|
+
const nodeModules = require('@rails/webpacker/rules/node_modules.js')
|
10
|
+
environment.loaders.append('nodeModules', nodeModules)
|
11
|
+
```
|
12
|
+
- If you have added `environment.loaders.delete('nodeModules')` to your `environment.js`, this must be removed or you will receive an error (`Item nodeModules not found`).
|
13
|
+
- The install task will now set the `extract_css` default to `true` in all environments and generate a separate `application.css` file for the default `application` pack, as supported by multiple files per entry introduced in 5.0.0. [#2608](https://github.com/rails/webpacker/pull/2608)
|
14
|
+
- Webpacker's wrapper to the `splitChunks()` API will now default `runtimeChunk: 'single'` which will help prevent potential issues when using multiple entry points per page [#2708](https://github.com/rails/webpacker/pull/2708).
|
15
|
+
- Changes `@babel/preset-env` modules option to `'auto'` per recommendation in the Babel docs [#2709](https://github.com/rails/webpacker/pull/2709)
|
16
|
+
- Adds experimental Yarn 2 support. Note you must manually set `nodeLinker: node-modules` in your `.yarnrc.yml`.
|
17
|
+
|
5
18
|
## [[5.2.1]](https://github.com/rails/webpacker/compare/v5.2.0...5.2.1) - 2020-08-17
|
6
19
|
|
7
20
|
- Revert [#1311](https://github.com/rails/webpacker/pull/1311).
|
@@ -333,7 +346,7 @@ const { environment } = require('@rails/webpacker')
|
|
333
346
|
// Enable with default config
|
334
347
|
environment.splitChunks()
|
335
348
|
// Configure via a callback
|
336
|
-
environment.splitChunks(
|
349
|
+
environment.splitChunks(config =>
|
337
350
|
Object.assign({}, config, { optimization: { splitChunks: false } })
|
338
351
|
)
|
339
352
|
```
|
@@ -657,9 +670,7 @@ environment.resolvedModules.append('vendor', 'vendor')
|
|
657
670
|
```js
|
658
671
|
// Enable css modules with sass loader
|
659
672
|
const sassLoader = environment.loaders.get('sass')
|
660
|
-
const cssLoader = sassLoader.use.find(
|
661
|
-
(loader) => loader.loader === 'css-loader'
|
662
|
-
)
|
673
|
+
const cssLoader = sassLoader.use.find(loader => loader.loader === 'css-loader')
|
663
674
|
|
664
675
|
cssLoader.options = Object.assign({}, cssLoader.options, {
|
665
676
|
modules: true,
|
data/CONTRIBUTING.md
CHANGED
@@ -9,7 +9,7 @@ yarn
|
|
9
9
|
```
|
10
10
|
|
11
11
|
## Making sure your changes pass all tests
|
12
|
-
There are a number of automated checks which run on
|
12
|
+
There are a number of automated checks which run on Github Actions when a pull request is created.
|
13
13
|
You can run those checks on your own locally to make sure that your changes would not break the CI build.
|
14
14
|
|
15
15
|
### 1. Check the code for JavaScript style violations
|
data/Gemfile.lock
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
PATH
|
2
2
|
remote: .
|
3
3
|
specs:
|
4
|
-
webpacker (
|
4
|
+
webpacker (6.0.0.pre.1)
|
5
5
|
activesupport (>= 5.2)
|
6
6
|
rack-proxy (>= 0.6.1)
|
7
7
|
railties (>= 5.2)
|
@@ -75,7 +75,6 @@ GEM
|
|
75
75
|
activesupport (>= 4.2.0)
|
76
76
|
i18n (1.8.5)
|
77
77
|
concurrent-ruby (~> 1.0)
|
78
|
-
jaro_winkler (1.5.4)
|
79
78
|
loofah (2.6.0)
|
80
79
|
crass (~> 1.0.2)
|
81
80
|
nokogiri (>= 1.5.9)
|
@@ -92,7 +91,7 @@ GEM
|
|
92
91
|
nokogiri (1.10.10)
|
93
92
|
mini_portile2 (~> 2.4.0)
|
94
93
|
parallel (1.19.2)
|
95
|
-
parser (2.7.
|
94
|
+
parser (2.7.2.0)
|
96
95
|
ast (~> 2.4.1)
|
97
96
|
rack (2.2.3)
|
98
97
|
rack-proxy (0.6.5)
|
@@ -127,15 +126,22 @@ GEM
|
|
127
126
|
thor (>= 0.20.3, < 2.0)
|
128
127
|
rainbow (3.0.0)
|
129
128
|
rake (13.0.1)
|
130
|
-
|
131
|
-
|
129
|
+
regexp_parser (1.8.2)
|
130
|
+
rexml (3.2.4)
|
131
|
+
rubocop (0.93.1)
|
132
132
|
parallel (~> 1.10)
|
133
|
-
parser (>= 2.
|
133
|
+
parser (>= 2.7.1.5)
|
134
134
|
rainbow (>= 2.2.2, < 4.0)
|
135
|
+
regexp_parser (>= 1.8)
|
136
|
+
rexml
|
137
|
+
rubocop-ast (>= 0.6.0)
|
135
138
|
ruby-progressbar (~> 1.7)
|
136
|
-
unicode-display_width (>= 1.4.0, <
|
137
|
-
rubocop-
|
138
|
-
|
139
|
+
unicode-display_width (>= 1.4.0, < 2.0)
|
140
|
+
rubocop-ast (0.8.0)
|
141
|
+
parser (>= 2.7.1.5)
|
142
|
+
rubocop-performance (1.8.1)
|
143
|
+
rubocop (>= 0.87.0)
|
144
|
+
rubocop-ast (>= 0.4.0)
|
139
145
|
ruby-progressbar (1.10.1)
|
140
146
|
semantic_range (2.3.0)
|
141
147
|
sprockets (4.0.2)
|
@@ -149,7 +155,7 @@ GEM
|
|
149
155
|
thread_safe (0.3.6)
|
150
156
|
tzinfo (1.2.7)
|
151
157
|
thread_safe (~> 0.1)
|
152
|
-
unicode-display_width (1.
|
158
|
+
unicode-display_width (1.7.0)
|
153
159
|
websocket-driver (0.7.3)
|
154
160
|
websocket-extensions (>= 0.1.0)
|
155
161
|
websocket-extensions (0.1.5)
|
@@ -165,7 +171,7 @@ DEPENDENCIES
|
|
165
171
|
rack-proxy
|
166
172
|
rails
|
167
173
|
rake (>= 11.1)
|
168
|
-
rubocop (
|
174
|
+
rubocop (= 0.93.1)
|
169
175
|
rubocop-performance
|
170
176
|
semantic_range
|
171
177
|
webpacker!
|
data/README.md
CHANGED
@@ -1,6 +1,10 @@
|
|
1
1
|
# Webpacker
|
2
2
|
|
3
|
-
[![
|
3
|
+
[![Ruby specs](https://github.com/rails/webpacker/workflows/Ruby%20specs/badge.svg)](https://github.com/rails/webpacker/actions)
|
4
|
+
[![Jest specs](https://github.com/rails/webpacker/workflows/Jest%20specs/badge.svg)](https://github.com/rails/webpacker/actions)
|
5
|
+
[![Rubocop](https://github.com/rails/webpacker/workflows/Rubocop/badge.svg)](https://github.com/rails/webpacker/actions)
|
6
|
+
[![JS lint](https://github.com/rails/webpacker/workflows/JS%20lint/badge.svg)](https://github.com/rails/webpacker/actions)
|
7
|
+
|
4
8
|
[![node.js](https://img.shields.io/badge/node-%3E%3D%2010.17.0-brightgreen.svg)](https://www.npmjs.com/package/@rails/webpacker)
|
5
9
|
[![Gem](https://img.shields.io/gem/v/webpacker.svg)](https://rubygems.org/gems/webpacker)
|
6
10
|
|
@@ -13,7 +17,7 @@ even JavaScript Sprinkles (that all continues to live in app/assets).
|
|
13
17
|
However, it is possible to use Webpacker for CSS, images and fonts assets as well,
|
14
18
|
in which case you may not even need the asset pipeline. This is mostly relevant when exclusively using component-based JavaScript frameworks.
|
15
19
|
|
16
|
-
**NOTE:** The master branch now hosts the code for
|
20
|
+
**NOTE:** The master branch now hosts the code for v6.x.x. Please refer to [5-x-stable](https://github.com/rails/webpacker/tree/5-x-stable) branch for 5.x documentation.
|
17
21
|
|
18
22
|
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
19
23
|
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
@@ -52,7 +56,7 @@ in which case you may not even need the asset pipeline. This is mostly relevant
|
|
52
56
|
|
53
57
|
- Ruby 2.4+
|
54
58
|
- Rails 5.2+
|
55
|
-
- Node.js 10.17.0+
|
59
|
+
- Node.js 10.17.0+ || 12+ || 14+
|
56
60
|
- Yarn 1.x+
|
57
61
|
|
58
62
|
## Features
|
@@ -301,7 +305,7 @@ You can run following commands to upgrade Webpacker to the latest stable version
|
|
301
305
|
|
302
306
|
```bash
|
303
307
|
bundle update webpacker
|
304
|
-
rails webpacker:
|
308
|
+
rails webpacker:install
|
305
309
|
yarn upgrade @rails/webpacker --latest
|
306
310
|
yarn upgrade webpack-dev-server --latest
|
307
311
|
|
data/docs/assets.md
CHANGED
@@ -83,9 +83,10 @@ import 'assets/stylesheets/bar'
|
|
83
83
|
|
84
84
|
## Link in your Rails views
|
85
85
|
|
86
|
-
You can also link `js
|
87
|
-
`asset_pack_path`
|
88
|
-
|
86
|
+
You can also link `js|images|styles|fonts` used within your js app in rails views
|
87
|
+
using `asset_pack_path`, `asset_pack_url`, `image_pack_path`, `image_pack_url` and
|
88
|
+
`image_pack_tag` helpers. These helpers are especially useful in cases where you
|
89
|
+
want to create a `<link rel="prefetch">` or `<img />` for an asset.
|
89
90
|
|
90
91
|
```yml
|
91
92
|
app/javascript:
|
@@ -108,12 +109,27 @@ require.context('../images', true)
|
|
108
109
|
<img src="<%= asset_pack_path 'media/images/calendar.png' %>" />
|
109
110
|
<% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
110
111
|
|
112
|
+
<img src="<%= asset_pack_url 'media/images/calendar.png' %>" />
|
113
|
+
<% # => <img src="https://example.com/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
114
|
+
|
115
|
+
<img src="<%= image_pack_path 'media/images/calendar.png' %>" />
|
116
|
+
<% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
117
|
+
|
118
|
+
<img src="<%= image_pack_url 'media/images/calendar.png' %>" />
|
119
|
+
<% # => <img src="https://example.com/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
120
|
+
|
111
121
|
<%= image_pack_tag 'media/images/calendar.png' %>
|
112
122
|
<% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
113
123
|
|
114
|
-
<%# no path resolves to default 'images' folder: %>
|
124
|
+
<%# no path used in image helpers resolves to default 'images' folder: %>
|
125
|
+
<img src="<%= image_pack_path 'calendar.png' %>" />
|
126
|
+
<% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
127
|
+
|
128
|
+
<img src="<%= image_pack_url 'calendar.png' %>" />
|
129
|
+
<% # => <img src="https://example.com/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
130
|
+
|
115
131
|
<%= image_pack_tag 'calendar.png' %>
|
116
132
|
<% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
117
133
|
```
|
118
134
|
|
119
|
-
Note you need to add a `media/` prefix (not `/media/`) to any subfolder structure you might have in `app/javascript`. See more examples in the [tests](
|
135
|
+
Note you need to add a `media/` prefix (not `/media/`) to any subfolder structure you might have in `app/javascript`. See more examples in the [tests](/test/helper_test.rb#L37).
|
data/docs/css.md
CHANGED
@@ -1,6 +1,5 @@
|
|
1
1
|
# CSS, Sass and SCSS
|
2
2
|
|
3
|
-
|
4
3
|
Webpacker supports importing CSS, Sass and SCSS files directly into your JavaScript files.
|
5
4
|
|
6
5
|
Importing and loading styles is a two step process:
|
@@ -15,7 +14,6 @@ Importing and loading styles is a two step process:
|
|
15
14
|
|
16
15
|
When you do `<%= stylesheet_pack_tag 'application' %>`, that's a run-time inclusion from Rails, where Rails gets the correct "asset path" to that file from webpack.
|
17
16
|
|
18
|
-
|
19
17
|
## Import global styles into your JS app
|
20
18
|
|
21
19
|
### Importing CSS as a multi-file pack (Webpacker v5)
|
@@ -60,7 +58,6 @@ Given your application installs an NPM package that provides CSS, such as `flatp
|
|
60
58
|
@import "flatpickr/dist/flatpickr.css"
|
61
59
|
```
|
62
60
|
|
63
|
-
|
64
61
|
### Importing CSS from JS
|
65
62
|
|
66
63
|
```sass
|
@@ -79,9 +76,9 @@ import React from 'react'
|
|
79
76
|
import helloIcon from '../hello_react/images/icon.png'
|
80
77
|
import '../hello_react/styles/hello-react'
|
81
78
|
|
82
|
-
const Hello = props => (
|
83
|
-
<div className=
|
84
|
-
<img src={helloIcon} alt=
|
79
|
+
const Hello = (props) => (
|
80
|
+
<div className='hello-react'>
|
81
|
+
<img src={helloIcon} alt='hello-icon' />
|
85
82
|
<p>Hello {props.name}!</p>
|
86
83
|
</div>
|
87
84
|
)
|
@@ -94,7 +91,7 @@ Given your application installs an NPM package that provides CSS, such as `flatp
|
|
94
91
|
```js
|
95
92
|
// app/javascript/packs/application.js
|
96
93
|
|
97
|
-
import
|
94
|
+
import 'flatpickr/dist/flatpickr.css'
|
98
95
|
```
|
99
96
|
|
100
97
|
## Import scoped styles into your JS app
|
@@ -117,9 +114,9 @@ import React from 'react'
|
|
117
114
|
import helloIcon from '../hello_react/images/icon.png'
|
118
115
|
import styles from '../hello_react/styles/hello-react'
|
119
116
|
|
120
|
-
const Hello = props => (
|
117
|
+
const Hello = (props) => (
|
121
118
|
<div className={styles.helloReact}>
|
122
|
-
<img src={helloIcon} alt=
|
119
|
+
<img src={helloIcon} alt='hello-icon' />
|
123
120
|
<p>Hello {props.name}!</p>
|
124
121
|
</div>
|
125
122
|
)
|
@@ -142,7 +139,7 @@ Using CSS modules with a TypeScript application requires a few differences from
|
|
142
139
|
There must also be a type definition file for these styles:
|
143
140
|
|
144
141
|
```typescript
|
145
|
-
export const helloReact: string
|
142
|
+
export const helloReact: string
|
146
143
|
```
|
147
144
|
|
148
145
|
You can then import the styles like this:
|
@@ -155,9 +152,9 @@ import React from 'react'
|
|
155
152
|
import helloIcon from '../hello_react/images/icon.png'
|
156
153
|
import * as styles from '../hello_react/styles/hello-react.module.sass'
|
157
154
|
|
158
|
-
const Hello = props => (
|
155
|
+
const Hello = (props) => (
|
159
156
|
<div className={styles.helloReact}>
|
160
|
-
<img src={helloIcon} alt=
|
157
|
+
<img src={helloIcon} alt='hello-icon' />
|
161
158
|
<p>Hello {props.name}!</p>
|
162
159
|
</div>
|
163
160
|
)
|
@@ -180,7 +177,6 @@ Then by adding these lines to your `package.json`:
|
|
180
177
|
|
181
178
|
You can generate the typings for the stylesheet by running the command `yarn gen-typings` when you've finished writing CSS, or run `yarn watch-typings` to have it automatically generate them as you go.
|
182
179
|
|
183
|
-
|
184
180
|
## Link styles from your Rails views
|
185
181
|
|
186
182
|
Under the hood webpack uses
|
@@ -192,8 +188,6 @@ a separate `[pack_name].css` bundle so that in your view you can use the
|
|
192
188
|
<%= stylesheet_pack_tag 'hello_react' %>
|
193
189
|
```
|
194
190
|
|
195
|
-
Webpacker emits css files only if `extract_css` is set to true in webpacker.yml otherwise `stylesheet_pack_tag` returns nil.
|
196
|
-
|
197
191
|
## Add bootstrap
|
198
192
|
|
199
193
|
You can use Yarn to add bootstrap or any other modules available on npm:
|
@@ -218,7 +212,6 @@ Or in your app/javascript/packs/application.sass file:
|
|
218
212
|
@import '~bootstrap/dist/css/bootstrap-theme'
|
219
213
|
```
|
220
214
|
|
221
|
-
|
222
215
|
## Post-Processing CSS
|
223
216
|
|
224
217
|
Webpacker out-of-the-box provides CSS post-processing using
|
@@ -244,8 +237,8 @@ module.exports = {
|
|
244
237
|
## Using CSS with [vue-loader](https://github.com/vuejs/vue-loader)
|
245
238
|
|
246
239
|
Vue templates require loading the stylesheet in your application in
|
247
|
-
order for CSS to work.
|
248
|
-
file for the entry point.
|
240
|
+
order for CSS to work. This is in addition to loading the JavaScript
|
241
|
+
file for the entry point. Loading the stylesheet will also load the
|
249
242
|
CSS for any nested components.
|
250
243
|
|
251
244
|
```erb
|
@@ -257,7 +250,6 @@ CSS for any nested components.
|
|
257
250
|
|
258
251
|
Since `Sass/libsass` does not provide url rewriting, all linked assets must be relative to the output. Add the missing url rewriting using the resolve-url-loader. Place it directly after the sass-loader in the loader chain.
|
259
252
|
|
260
|
-
|
261
253
|
```bash
|
262
254
|
yarn add resolve-url-loader
|
263
255
|
```
|
@@ -269,7 +261,7 @@ const { environment } = require('@rails/webpacker')
|
|
269
261
|
// resolve-url-loader must be used before sass-loader
|
270
262
|
environment.loaders.get('sass').use.splice(-1, 0, {
|
271
263
|
loader: 'resolve-url-loader'
|
272
|
-
})
|
264
|
+
})
|
273
265
|
|
274
266
|
module.exports = environment
|
275
267
|
```
|
@@ -280,13 +272,14 @@ In order to get CSS to work with typescript you have two options.
|
|
280
272
|
You can either use `require` to bypass typescript special `import`.
|
281
273
|
|
282
274
|
```ts
|
283
|
-
const styles = require('../hello_react/styles/hello-react')
|
275
|
+
const styles = require('../hello_react/styles/hello-react')
|
284
276
|
```
|
277
|
+
|
285
278
|
You may also use the package [typings-for-css-modules-loader](https://github.com/Jimdo/typings-for-css-modules-loader) instead of `css-loader` to automatically generate typescript `.d.ts` files in order to help resolve any css/scss styles. To do that:
|
286
279
|
|
287
280
|
```js
|
288
281
|
// app/javascript/packs/hello_react.jsx
|
289
|
-
import * as styles from '../hello_react.styles/hello-react.module.scss'
|
282
|
+
import * as styles from '../hello_react.styles/hello-react.module.scss'
|
290
283
|
```
|
291
284
|
|
292
285
|
```bash
|
@@ -298,11 +291,13 @@ yarn add --dev typings-for-css-modules-loader
|
|
298
291
|
const { environment } = require('@rails/webpacker')
|
299
292
|
|
300
293
|
// replace css-loader with typings-for-css-modules-loader
|
301
|
-
environment.loaders.get('moduleSass').use = environment.loaders
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
294
|
+
environment.loaders.get('moduleSass').use = environment.loaders
|
295
|
+
.get('moduleSass')
|
296
|
+
.use.map((u) => {
|
297
|
+
if (u.loader == 'css-loader') {
|
298
|
+
return { ...u, loader: 'typings-for-css-modules-loader' }
|
299
|
+
} else {
|
300
|
+
return u
|
301
|
+
}
|
302
|
+
})
|
308
303
|
```
|