Merge pull request #2116 from freeCodeCamp/fix-sprites

Revert "Update dependency sprockets to 4.2.1"

Gemfile

@@ -20,10 +20,11 @@ group :app do
   gem 'rack-ssl-enforcer'
   gem 'rack'
   gem 'rss'
-  gem 'sassc'
+  gem 'sass'
   gem 'sinatra-contrib'
   gem 'sinatra'
   gem 'sprockets-helpers'
+  gem 'sprockets-sass'
   gem 'sprockets'
   gem 'thin'
 end

Gemfile.lock

@@ -78,13 +78,15 @@ GEM
       pry (>= 0.13, < 0.15)
     racc (1.6.2)
     rack (2.2.8)
-    rack-protection (3.2.0)
-      base64 (>= 0.1.0)
+    rack-protection (3.1.0)
       rack (~> 2.2, >= 2.2.4)
     rack-ssl-enforcer (0.2.9)
     rack-test (2.1.0)
       rack (>= 1.3)
-    rake (13.1.0)
+    rake (13.0.6)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
     redcarpet (3.6.0)
     rexml (3.2.6)
     rouge (1.11.1)
@@ -92,24 +94,29 @@ GEM
     rss (0.3.0)
       rexml
     ruby2_keywords (0.0.5)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    sinatra (3.2.0)
+    sass (3.7.4)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    sinatra (3.1.0)
       mustermann (~> 3.0)
       rack (~> 2.2, >= 2.2.4)
-      rack-protection (= 3.2.0)
+      rack-protection (= 3.1.0)
       tilt (~> 2.0)
-    sinatra-contrib (3.2.0)
-      multi_json (>= 0.0.2)
+    sinatra-contrib (3.1.0)
+      multi_json
       mustermann (~> 3.0)
-      rack-protection (= 3.2.0)
-      sinatra (= 3.2.0)
+      rack-protection (= 3.1.0)
+      sinatra (= 3.1.0)
       tilt (~> 2.0)
-    sprockets (4.2.1)
+    sprockets (3.7.2)
       concurrent-ruby (~> 1.0)
-      rack (>= 2.2.4, < 4)
+      rack (> 1, < 3)
     sprockets-helpers (1.4.0)
       sprockets (>= 2.2)
+    sprockets-sass (2.0.0.beta2)
+      sprockets (>= 2.0, < 4.0)
     strings (0.2.1)
       strings-ansi (~> 0.2)
       unicode-display_width (>= 1.5, < 3.0)
@@ -124,7 +131,7 @@ GEM
       eventmachine (~> 1.0, >= 1.0.4)
       rack (>= 1, < 3)
     thor (1.3.0)
-    tilt (2.3.0)
+    tilt (2.2.0)
     tty-pager (0.14.0)
       strings (~> 0.2.0)
       tty-screen (~> 0.8)
@@ -163,11 +170,12 @@ DEPENDENCIES
   redcarpet
   rr
   rss
-  sassc
+  sass
   sinatra
   sinatra-contrib
   sprockets
   sprockets-helpers
+  sprockets-sass
   terminal-table
   terser
   thin
@@ -181,4 +189,4 @@ RUBY VERSION
    ruby 3.3.0p0
 
 BUNDLED WITH
-   2.5.4
+   2.4.6

assets/stylesheets/application.css.scss.erb → assets/stylesheets/application.css.scss

@@ -10,61 +10,11 @@
  * http://mozilla.org/MPL/2.0/
  */
 
-/* https://github.com/rails/sass-rails/issues/139 */
-
-<% manifest = JSON.parse(File.read('assets/images/sprites/docs.json')) %>
-
-%svg-icon {
-  display: inline-block;
-  vertical-align: top;
-  width: 1rem;
-  height: 1rem;
-  pointer-events: none;
-  fill: currentColor;
-}
-
-%doc-icon {
-  content: '';
-  display: block;
-  width: 1rem;
-  height: 1rem;
-  background-image: image-url('sprites/docs.png');
-  background-size: <%= manifest['icons_per_row'] %>rem <%= manifest['icons_per_row'] %>rem;
-}
-
-@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
-  %doc-icon { background-image: image-url('sprites/docs@2x.png'); }
-}
-
-html._theme-dark {
-  %darkIconFix {
-    filter: invert(100%) grayscale(100%);
-    -webkit-filter: invert(100%) grayscale(100%);
-  }
-}
-
-<%=
-  items = []
-
-  manifest['items'].each do |item|
-    rules = []
-    rules << "background-position: -#{item['col']}rem -#{item['row']}rem;"
-    rules << "@extend %darkIconFix !optional;" if item['dark_icon_fix']
-    items << "._icon-#{item['type']}:before { #{rules.join(' ')} }"
-  end
-
-  items.join('')
- %>
-
-._hide-in-development {
-  <%= App.environment != :production ? 'display: none;' : '' %>
-}
-
-
 @import 'global/variables-light',
         'global/variables-dark',
         'global/variables',
         'global/mixins',
+        'global/icons',
         'global/classes',
         'global/base';
 
@@ -79,8 +29,8 @@ html._theme-dark {
         'components/path',
         'components/notice',
         'components/prism',
-        'components/mobile';
-
+        'components/mobile',
+        'components/environment';
 
 @import 'pages/simple',
         'pages/angular',

assets/stylesheets/components/_environment.scss.erb

@@ -0,0 +1,3 @@
+._hide-in-development {
+  <%= App.environment != :production ? 'display: none;' : '' %>
+}

assets/stylesheets/global/_icons.scss.erb

@@ -0,0 +1,43 @@
+<% manifest = JSON.parse(File.read('assets/images/sprites/docs.json')) %>
+
+%svg-icon {
+  display: inline-block;
+  vertical-align: top;
+  width: 1rem;
+  height: 1rem;
+  pointer-events: none;
+  fill: currentColor;
+}
+
+%doc-icon {
+  content: '';
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  background-image: image-url('sprites/docs.png');
+  background-size: <%= manifest['icons_per_row'] %>rem <%= manifest['icons_per_row'] %>rem;
+}
+
+@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
+  %doc-icon { background-image: image-url('sprites/docs@2x.png'); }
+}
+
+html._theme-dark {
+  %darkIconFix {
+    filter: invert(100%) grayscale(100%);
+    -webkit-filter: invert(100%) grayscale(100%);
+  }
+}
+
+<%=
+  items = []
+
+  manifest['items'].each do |item|
+    rules = []
+    rules << "background-position: -#{item['col']}rem -#{item['row']}rem;"
+    rules << "@extend %darkIconFix !optional;" if item['dark_icon_fix']
+    items << "._icon-#{item['type']}:before { #{rules.join(' ')} }"
+  end
+
+  items.join('')
+ %>

lib/app.rb

@@ -94,7 +94,7 @@ class App < Sinatra::Application
       ]
 
     sprockets.js_compressor = Terser.new
-    sprockets.css_compressor = :sassc
+    sprockets.css_compressor = :sass
 
     Sprockets::Helpers.configure do |config|
       config.digest = true