title: Creating Critical CSS files from compiled .scss
body: <p>Looking to improve page speed by using <code>rel=&quot;preload&quot;</code> to specify the order in which CSS files should be loaded on our site. The idea is that we would preload our global styles and then preload our hero area styles (as this is the most important element on the page to our marketing team).</p>
  <p>We use Sass and follow a pretty typical set-up where each component or module on our site is chunked out into it's own partial <code>.scss</code> file and then imported (@import) into our main <code>styles.scss</code> file.</p>
  <p>We compile the <code>styles.scss</code> file via Gulp into a single minified CSS file that contains all of the styles for the site (<code>styles.min.css</code>)</p>
  <pre><code>Example: current styles.scss file
  
  //Shared Global Styles
  @import &quot;partials/reset&quot;
  @import &quot;partials/variables&quot;
  @import &quot;partials/typography&quot;
  
  //Individual Components and Modules
  @import &quot;partials/buttons&quot;
  @import &quot;partials/cards&quot;
  
  etc...
  </code></pre>
  <pre><code>This is what the Sass tasks in our Gulpfile look like:
  
  gulp.task('styles:sass', ['svg'], function() {
      const outputStyle = 'expanded';
      const path = (watching) ? devCSSPath : buildCSSPath;
      const building = (watching) ? false : true;
  
      return gulp.src(['src/sass/*.scss', 'src/apps/*/styles/*.scss'])
          .pipe(gulpif(watching, sourcemaps.init()))
          .pipe(sass({
              outputStyle: outputStyle,
              includePaths: [kdsRoot] }).on('error', sass.logError))
          .pipe(gulpif(watching, sourcemaps.write('maps')))
          .pipe(gulpif(building, rename((path) =&gt; {
                  path.basename += &quot;.min&quot;;
              })
          ))
      .pipe(gulp.dest(path));
  });
  
  gulp.task('styles:postcss', ['styles:sass'], function() {
      const path = (watching) ? devCSSPath : buildCSSPath;
      const plugins = [
          autoprefixer({ grid: true}),
          pixelsToRem({ base: 16 })
      ];
      return gulp.src([path + '*.css', path + '**/*.css'],{base: './'})
          .pipe(postcss(plugins))
          .pipe(gulp.dest('./'))
  });
  </code></pre>
  <p>I want to create 3 different stylesheets (2 of which I will preload):</p>
  <pre><code>globals_preload.scss
  
  //Shared Global Styles
      @import &quot;partials/reset&quot;
      @import &quot;partials/variables&quot;
      @import &quot;partials/typography&quot;
  </code></pre>
  <pre><code>hero_preload.scss
  
  //Styles for the hero module
     @import &quot;partials/hero&quot;
  </code></pre>
  <pre><code>styles.scss 
  //Styles for the rest of the components/modules
  //Global .scss files removed
  
  //Individual Components and Modules
      @import &quot;partials/buttons&quot;
      @import &quot;partials/cards&quot;
  
      etc...
  </code></pre>
  <p>I would ideally load the 3 stylesheets like so:</p>
  <pre><code>&lt;head&gt;
       &lt;link rel=&quot;preload&quot; href=&quot;globals_preload.min.css&quot; as=&quot;style&quot;&gt;
       &lt;link rel=&quot;preload&quot; href=&quot;hero_preload.min.css&quot; as=&quot;style&quot;&gt;
       &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.min.css&quot;&gt;
  &lt;/head&gt;
  </code></pre>
  <p>Here lies the problem; Every component or module is dependent on the global styles and variables, but I don't want to load the global styles twice (by having them imported both in <code>globals_preload.scss</code> and <code>styles.scss</code>); If I remove the import statements for the global styles from <code>style.scss</code> my compiler will fail because the subsequent modules will not be able to find the sass variable they are looking for.</p>
  <p>Is there anyway for this approach to work with Sass? Is there a way to remove certain partials from the compiled CSS via Gulp? I'm open to any suggestions.</p>