►
Description
Here's the issue we looked into https://gitlab.com/groups/gitlab-org/-/epics/3694
Here's the resulting MR of this https://gitlab.com/gitlab-org/gitlab/-/merge_requests/35436
0:00 - Jean introduces the issue that GitLab places all page specific styles in the application.scss
3:50 - Do we have anything set up to actually load page specific styles?
5:40 - Nope. It's just one big file.
8:00 - Laying out options and planning next steps
11:50 - Let's start doing this in Webpack with scss-loader
18:20 - We start adding the webpack rule after installing the loader packages
23:20 - Nico starts trying to test it out but the GDK fails for him
32:24 - Jose gracefully takes over and applies Nico's patch
36:20 - Jose creates the missing test.scss and tests it out in local gdk
40:00 - We run into a webpack error and fix it by fixing the regex in another rule
42:00 - Paul tries to sell parcel while we're waiting for webpack
43:00 - It works! Now what is webpack actually doing?
46:45 - We realize how webpack is doing this by inlining styles and there's some problems, and plan on using a mini-css-extract-plugin
53:00 - We look at webpack_helper.rb which is where we load page specific javascript
57:30 - Paul hops off for a second and we load the css extract plugin
1:01:30 - We try to ping the webpack development folder to see what the plugin did
1:07:30 - We talk about Jose's 32 GB of memory
1:12:50 - `webpack-prod` finally finishes and we check out the results
A
Now,
what
we're
looking
to
do
is
establish
a
pattern
for
one
page
that
we
can
in
put
forward
as
an
example,
and
then
so
I
can
create
issues
for
all
of
these
pages
and
then
farm
out
the
the
effort
to
to
the
broader
front-end
team
to
to
help
collaborate
on
this
so
similar
to
you
know
like
how
you
guys
went
about
converging.
The
chromaticity.
A
Just
you
know
like
just
create
a
whole
bunch
of
issues,
and
but
what
I
really
want
to
do
is
provide
a
simple
example
of
one
of
these
and
I
haven't
discussed
this
with
anybody.
So
what
I
really
am
hoping
to
get
out
of
this
session
is
what
are
the
things
we
should
look
at?
What
is
what
is
a
good
approach
to
fight?
What
are
the
god
says?
We
need
to
watch
out
for
like,
for
instance,
how
something
might
be
reused
on
on
multiple
pages,
even
though
it
already
put
in
that
specific
page.
A
A
B
C
They
are
loaded
application
that
CSS
ranking
firm,
because
we
have
a
lot
of
mixing
and
side
effects
going
on.
I
was
dealing
with
this
recently.
Actually,
that's.
Why
and-
and
maybe
we
should
start
the
conversation
now
we
effectively
test
that
whatever
we
touch,
we
are
not
like
generating
every
call
side
effect.
Everyone
right,
for
example,
I'm
afraid
that
the
first
time
we
move
away
project
of
CSS
sass
file
on
his
own
folder,
a
lot
of
places
that
are
implicitly
receiving
their
CSS
but
not
receive
it
anymore
and
stuff
may
leave
a
little
bit
groan.
C
B
Yeah
now
that
that
totally
makes
sense
so
do
we
do
we
have
anything
set
up
where
we're
also
just
import
the
specific
page
when
we
hit
the
specific
page
like
so,
are
we
in
technically
importing
it
twice
like
if
we
go
to
it?
If
we
go
to
this
issue
or
this
epic,
are
we
loading
issues
as
well
or
do
we,
if
it
always
all
in
application
CSS,
we
only
have
one
advocate
of
only
one
CSS
file
that
we
load.
A
A
B
B
B
B
Suggest
having
the
less
experienced
person
drive
on,
if
you
don't,
if
you
don't
want
to
even
have
to
I'm,
not
trying
to
say
that
you're
less
experienced,
but
you
did
say
you
couldn't
code,
so
I
was
like
hey.
This
is
a
great
thing
for
us
to
code
through
Jean
I
know
you
can
code
I'm
just
give
me
a
hard
time
how.
B
So
so
the
goal
could
be
so
here's
the
situation.
We
could
just
clean
it
up
and
be
like
okay,
let's
move
to
some
of
these
classes
to
utility
classes,
just
try
to
get
you
rid
of
some
of
these
files.
That
could
be
one
part
of
the
goal.
The
other
side
could
be
well.
How
can
I
well
page
specific
files
and
specific
papers
when.
D
C
D
Well,
we,
what
we
can
do
is
work
on
every
single
page
that
is
loaded
by
in
this
ideas
and
for
emails.
We
can
just
leave
the
sprockets.
Do
the
work
after
all
emails,
they
just
have
a
tiny
amount
of
CSS,
so
I
don't
see
a
problem
with
that
mm-hmm,
but
yeah
I
think
we
should
start
focusing
on
moving
everything
to,
but
that's
another
matter
entirely,
because
we
need
to
clean
up
a
lot
of
CSS
yeah.
C
B
Removing
some
opacity
got
applied
to
the
merge
button
when
it
was
disabled,
so
you
can
really
see
it
and
I
was
like
okay.
I
just
want
to
make
sure
when
we
change
the
CSS,
nothing
breaks
so
I
like
right,
click
to
inspect
element
and
see.
Okay,
what's
the
rule
here?
Well,
there's
a
pass
that
this
rule
was
like
being
applied
in
some
project
buttons
and
some
stat
links
or
whatever
has
like
what
over
in
our
projects
page
we're
extending
button
and
I
have
a
button
rule
over
in
mirja
class
and
yeah.
B
Now
that
we're
talking
about
these
pages
all
talking
to
each
other,
it's
like
oh
gosh,
so
yeah
might
so
the
options
I'm
coming
to
might
that
come
to
mind
is
okay.
Let's
just
try
to
remove
page
specific
styles
and
we
don't
need
to
necessarily
move
these
things
over
to
their
own
files.
For
us
to
do
that,
we
just
need
to
try
to
delete
some
page
specific
styles.
B
C
C
A
That's
the
that's.
The
intention
of
what
that
epic
comes
like
try
jest.
We
do
is
to
only
load
a
specific
page
of
styles.
On
that
page,
the
gotcha,
if
that
could
be,
is
another
page,
might
be
the
Penan
on
a
page,
Pacific
style,
that's
been
defined
inadvertently
and
so
just
making
sure
that
we
don't
introduce
regressions.
If
we
tell.
C
C
There
is
not
just
a
dependency,
there
are
silent,
override
each
others
and,
and
they
are
kinda
built
one
on
top
of
each
other,
because
of
all
the
selected
words,
so
I
think
I
have
an
example
here
in
settings
and
setting
CITV
these
two
files.
They
will.
This
will
overwrite
a
piece
of
this
part
isn't
coming
from
settings
right
and
alone.
It
won't
work.
So
it's
not
just
the
coupling.
We
will
also
need
to
like
identified
shared
parts
and
come
up
with
a
year
key
system.
If
we
don't
want
to
duplicate
it
and.
B
And
that's
a
good
point:
Nikko
I
think
I
think
what
we
couldn't
also
do
looking
at
some
of
these
style
sheets,
we
could
use
to
our
advantage
when
some
of
these
the
fact
that
they're
all
loaded
by
default
right
now
being
that
we
can
even
like
if
we
realize
okay
90%
of
this
file
is
this
only
shows
this
selector
only
shows
up
on
this
page.
Let's
just
move
the
other
bids
over
to
like
another
file
like
and
then
let's
just
and
like
a
big
chunk
of
shared
stuff
are
there
and
we
can
process
that
yep.
B
C
C
B
C
D
B
C
C
B
C
C
B
D
There's
one
thing
that
well
there's
one
concern
that
I
have
with
epic
loader
and
it's
not
related
to
this
work,
but
better
your
CI,
because
we
have
some
issues
compiling
assets
in
gillip
of
newest.
Where
consumes
a
large
amount
of
memory,
and
we
ran
a
couple
into
a
couple
of
situations
where
I
think
it
goes
beyond
a
gigabytes
a
couple
of
times,
so
this
might
get
blocked.
So
we,
if
we
start
working
on
this,
let's
contact
the
people
of
omnibus
and
tell
them
hey
we're
changing
web
back
to
load
CSS.
D
D
B
A
C
C
C
B
A
B
C
We
can
maybe
start
with
services,
there's
a
lot
of
optimization
with
actual
mode,
and
we
can
start
by
turning
off
some
right
like
that
CSS
elimination,
communication.
It
does
optimization
on
that
mute
order.
It
does
a
lot
and
you
can
turn
them
off
and
it
turned
them
on
one
by
one
and
see
sure
what
that's
us
I
think
we
got
to
go
for
it,
but.
A
D
Also,
there's
one
thing
that
I
like
to
propose,
because
at
the
very
least
people
should
know
their
CSS.
At
least
each
team
should
know
what
CSS
are
working
on,
because
I
was
working
on
removing
natality
classes
and
not
to
blame
anybody
or
anything.
But
we
do
some
ugly
things
on
the
issue.
Bull
and
rush
request,
page
we're
inside
a
merge
request,
CSS
we're
over
writing
the
utility
classes
to
do
much.
A
D
B
A
B
Yeah
we
should
try
the
utility
class
as
much
as
possible.
It's
a
little
tough
to
say
we
have
to
get
lab
UI
utility
classes,
since
there
are
some
gaps
of
what
we
may
need
and
what's
available
there,
but
I
like
the
approach
of
let's
just
add
to
our
local
utilities
file
and
then
promote
up
likes
it
worse,
yeah,
but
helps
us
be
iterative
and
then
have
a
good
velocity.
I
think
he's.
C
A
C
B
B
Makes
sense
so,
but
something
that's
gonna
say
is
we
might
need
to
right
now
application
that
s.
Css
is
our
only
entry
point
and
it
contains
some
things
that
our
page
bundles
actually
need
like
variables
or
whatever.
So
what
we'll
need
to
do
probably
is
also
abstract
out
whatever.
What
is
our
entry
point
as
CSS
look
like
and
when
we
have
a
page
bundle
we're
gonna
import
this
way,
we
need
to
make
sure
it
imports
that
entry
point
those
those
variables
whatever
else
it
needs
and
I.
C
B
Saying
that
exit
some
of
our
page
bundles
are
not
built.
Some
of
our
page
specific
styles
are
not
buildable
on
their
own,
because
we
have
variables
that
are
importing
from
applications.
So
I'm
not
saying
leave
applications
as
it
is,
but
we're
gonna
have
to
share
something
with
applications
and
ya
know.
A
B
Cool
we
got
style,
loader
CSS,
loader
SAS
loader
going.
So
let
me
ask
you
another
question.
This
is
running
on
our
page.
Java
Lake,
we're
gonna
import
this
from
our
page,
JavaScript
mm-hmm.
Is
that
gonna
answer
it?
How?
Because
web
pack
isn't
building
our
HTML?
How
does
web
pack
going
to
add
a
length
or
ref
link
to
our
compiled
CSS
file?
Does
it
do
it
inline
in
the
JavaScript.
D
It
depends
on
the
output,
I
think
at
least
one
of
my
experiments
locally.
You
can
configure
the
sass
loader
to
output,
CSS
CSS
files,
but
I'm
not
sure
if
you
can
have
this
yet
I
think
you
can
have
the
sass
loader
bundle
the
files
together
with
JavaScript.
So
you
will
have
a
bunch
of
CSS
at
the
top
of
the
JavaScript
file,
and
this.
C
Is
all
it
is
because
we're
using
spine
loader
right
so
if
they
go
bottom
out,
the
loader
so
to
transform
to
CSS,
and
then
this
is
going
to
slam
it
in
ajs,
so
basically
increase
in
bjs
performance.
This
is
not
ideal
right,
but
it
can
be
a
first
start
and
then
and
then
move
on
right.
The
problem
here
is
that
your
your
key
indications
is
the
caching,
because
every
time
you
touch
the
JavaScript,
their
CSS
may
need
to
be
updated
by
the
browser
and
similar
and
the
other
way
around
right.
C
C
A
C
B
C
D
C
C
B
It's
like
it's
some
some
key
keyboard
shortcuts
for
splitting
and
navigating
across
multiple
terminals.
Yeah,
it's
really
helpful,
so
I
usually
have
like
one
I,
have
a
couple
that,
like
we're,
running
different
tails
and
then
I
have
like
one
that
I'm
running
commands
on
or
something
it
was
super
helpful.
When
we
had
gdka
ESEE
split
like
I
I.
B
C
B
A
D
C
B
C
D
D
C
B
B
B
D
B
We're
just
you,
can
you
can
pack,
you
can
pacify
us
like
a
separate
terminal.
If
you
want
to
like
that,
you
have
a
ref
to
it,
but
if
I
move
it
now
levels,
they
update
right.
No,
that's
so
I'm,
not
saying
pop
the
stash,
and
you
could
just
how
do
you
view
ref
of
a
stash
just
so
I'm
looking
up,
you
can
use,
get
to
view
the
wrath
of
a
stash.
C
B
C
B
C
B
C
B
C
B
B
B
B
C
D
B
D
C
B
C
A
C
D
B
A
B
A
C
B
C
B
B
Have
we
talked
about
parcel
before,
maybe
not
not
in
gitlab
context,
we
just
were
fun,
I
didn't
think
so.
I
highly
recommend
it
for
any
kind
of
like
small
project
that
you
don't
want
to
mess
with
web
pack,
loaders
and
stuff
parcels
really
cool
snow
pack.
It's
also
really
cool
it.
Snow
pack,
I've
never
built
all
right,
I've
only
used
parcel
in
wet
back
and
then
like
all
the
gulp
and
browserify
friends
over
oh
geez,
don't
take
oh
please
now
you
wanna
say
grant.
C
A
C
B
D
D
B
B
D
C
C
B
C
B
A
B
C
C
D
B
D
B
D
B
B
C
C
B
Yeah
I
kind
of
wonder:
if
maybe
this
isn't
gonna
work,
which
is
unfortunate,
but
it's
because
my
understanding
of
web
pack
is
web
pack
really
needs
to
do
everything.
Otherwise
it
gets
really
hard.
And
since
it
can't
do
everything
I
don't
know.
If
we
can
get
this
work,
unless
somehow
we
can
get
web
pack
to
export
some
sort
of
like
metadata
about
the
files
generated
and
then
no.
D
C
D
B
C
C
B
Somehow
we
need
to
make
sure
that,
for
for
this
page
or
whatever
web
pack
is
doing,
we
can
get
this
this
manifest
thing
so
I
would
look
at
I
would
want
to
just
take
a
take.
An
I
think
the
answer
is
gonna,
be
wherever
in
rails,
we
load
the
page,
specific
script.
Bundle,
that's
gonna
be
an
answer
for
how
can
we
get
the
page
specific
style
and
day
buying
me
any
cold
engine,
though,
and
yeah
I
think
I
think
we
could
just
I
think
we
can
iteratively
solve
it
by
convention.
B
It
makes
a
lot
of
sense,
but
we
want
to
do
I.
Think
it's
somehow.
We
need
a
tie
only
because
I've
had
to
I've
had
to
explore
here
before.
I
know
that
something's
gonna
be
tied,
probably
to
the
webpack
manifest
we
do
a
lot
of
painting
of
our
manifest.json
the
rails
before
it
loads
up
the
before
it
builds
the
front
end.
It
actually
pings
webpack
for
hey.
Give
me
the
JSON
of
what
files
I'm
supposed
to
put
in
here
and
it
does
some
looking
of
engine.
Can
we
see
that.
C
C
C
B
B
B
B
B
B
Yeah
yeah
so
check
this
out.
Oh
wait.
Give
me
one
quick.
Second,
don't
check
it
out
yet
yeah,
seeing
what
the
manifest.json
is.
Gonna
conclude
is
gonna
be
really
helpful
because
it
might
include
that
CSS.
Maybe
it
includes
the
CSS
file
and
if
it
doesn't
somehow,
we
need
to
make
sure
the
CSS
file
shows
up,
because
that's
how
we're
gonna.
B
B
C
C
D
C
B
B
B
B
Stylesheet
include
tax
is
what
we're
gonna
somehow
build
here.
So
that's.
This
is
the
gap
from
what
I
understand
but
yeah.
Let's
see,
let's
see
first,
if
we
can
get
into
manifest.json,
then
we're
going
we're
really
good,
and
then
this
is
the
next
part
to
update
yeah
I
mean
we
should
be
really
good
and
that's
so
exciting.
B
D
C
A
C
D
Want
to
see
the
the
public
folder
because
o
the
manifest.json
folder
yeah,
well,
the
main
CSS
loader
a
defaults
to
outputting
all
of
the
data
to
whatever
output
the
what
my
configuration
has
but
here's
the
thing
when
you're
drilling
in
a
development
mode.
It
doesn't
not
put
anything
because
everything
lives
in
memory
right.
B
C
B
B
B
D
B
A
A
B
Go
ahead
and
write
it!
Sorry
about
that!
That's
fine!
No!
It's!
So!
My
understanding
is
webpack.
Dev
doesn't
write
anything
to
desk,
but
you
should
still
be
able
to
hit
the
URLs
and
that's
what
Wales
is
doing.
I,
don't
know
what
those
URLs
are
and
I
don't
think
we
can
necessarily
find
them
from
the
little
file
tree
that
it
spits
out.
B
D
B
D
B
B
Know
I
imagine
we
can
imagine
that
you
did
using
using
hashes
of
contents
like
you
could
figure
out.
You
can
optimize
some
caching
of
visitor
outputs,
I
expect
from
these
contents,
but
I
don't
know.
I'm
I
could
kind
of
sick
and
tired
of
how
beefy
all
of
the
JavaScript
ecosystem
is
babies.
They
know.
B
D
To
bake
my
previous
laptop
because,
when
I
joined,
the
lab
back
in
2016
I
got
one
of
the
new
touchpad
Max
and
well,
it
worked
perfectly.
Fine.
I
ran
into
three
major
issues
when
working
with
the
monitoring
stuff,
since
we
needed
kubernetes
and
we
needed
the
GDK
and
we
didn't
have
HTTP
project
back
then
it
disappear
was
always
like
in
a
constant
state
of
about
to
take
off
so
it
cousin.
If
you
which
pretty
much
made
the
computer,
you
know
scible,
because
the
screen
and
I
think
that's.
B
D
D
B
D
B
Lever,
it
seems
so
cool,
like
these
people,
do
things
on
old
machines
and
using
like
as
little
space
as
possible.
I'm
like
man.
This
is
so
inspiring,
and
then
you
go
over
to
our
JavaScript
world
and
it's
like
we're.
Gonna
build
JavaScript
and
it
can
take
three
gigabytes
of
memory
and
your
node
modules
is
gonna,
be
like
a
gigabyte
on
its
own
and
it
hurts
I
feel
like
then.
D
I
mean
there
is
I'd
say
there
is
one
thing
to
note
about.
This
is
that
memory
nowadays
is
cheap,
but
CPU
is
not
because
CPU
has
to
stop
having
the
same
advancements
that
the
more
loss
was
going
to
happen
like
CPU
capacity
will
double
each
year,
but
it
hasn't
and
I
think
now,
because
memory
is
cheap,
we
can
get
away
with
not
optimized
super
memory
and
up
to
might
say
for
CPU
time
that.
B
C
B
B
D
B
B
D
C
B
B
B
B
C
B
D
B
C
B
B
Yep
yeah
so
and
that
duplication
isn't
great,
but
it
could
be
really
cool
that,
like
hey,
yeah
I,
did
a
specific
import
here,
but
now
does
kind
of
feel
like
we've
lost
control
of
maybe
some
caching
benefit,
and
we
can
definitely
gone
from
here
this,
but
yeah
I
think
I
think
you're
figuring.
It
is
what
it's
gonna
be
if
we
go
back
to
our
yeah,
so
we
did
like
a
this
mini
CSS
extract,
plugin,
bang,
I,
wonder
if
there's
some
different
ways,
we
can
configure
the
module
I.
B
D
C
C
D
C
D
D
C
B
B
B
B
Yep
yeah,
but
but
this
is
a
huge
win,
and
now
we
have
this
part
being
generated.
We
can
tie
it
into
our
that
rails,
back-end
helper,
that
I
chose
you
to
generate
style
tags
and
then
we're
then
we're
good
to
go
and
wow
we're
really
that's
exciting,
so
cool
this
was
really
helpful
and
informative
and
interesting.
The
progress
would
you
be
up
for
just
creating
a
work-in-progress
branch
with
the
work-in-progress
merge
request,
yeah.