Edmund esr360

## *constant-locals-loader.md

      
              3 files
            
          
              4 forks
            
          
                7 comments
              
            
              49 stars
            
          
                developit
                / *constant-locals-loader.md
            
            
              Last active
              February 4, 2022 17:15
            
              
                Inline Webpack CSS Modules classNames, reducing bundle size. https://npm.im/constant-locals-loader
              
          
    constant-locals-loader for Webpack

This loader optimizes the output of mini-css-extract-plugin and/or css-loader,
entirely removing the potentially large CSS classname mappings normally inlined into your bundle when using CSS Modules.
Run npm install constant-locals-loader, then make these changes in your Webpack config:
module.exports = {
 module: {

  
## fixCircular.js
// DISCLAIMER
// Original function was updated to a faster and es5-supporting version by @Quacky2200

var replaceCircular = function(val, cache) {

    cache = cache || new WeakSet();

    if (val && typeof(val) == 'object') {
        if (cache.has(val)) return '[Circular]';

## Importable Constructable Stylesheets.md

      
              2 files
            
          
              0 forks
            
          
                4 comments
              
            
              14 stars
            
          
                developit
                / Importable Constructable Stylesheets.md
            
            
              Last active
              December 10, 2024 01:38
            
          
    Proposal: Importable Constructable Stylesheets

We're getting Constructable Stylesheets. This seems like an intuitive value to obtain when importing CSS from JavaScript, since it's the DOM's representation of a Stylesheet:
import stylesheet from './style.css';
console.log(stylesheet);  // CSSStyleSheet
No such system is in place to allow this to work (see [whatwg/loader]), however frontend build tooling has congregated around this approach as a mechanism for bringing CSS assets into the JavaScript module graph. There are many benefits to be obtained from moving CSS into this graph, however the most important is that imported CSS can be attributed to the consuming JS Module. This allows it to be bundled, optimized, and potentially dead-code-eliminated leveraging static analysis performed on the surrounding module graph.

  
## app.js
import React from 'react'

class App extends React.Component {
  state = { cep: '' }

  handleBlur = (e) => {
    this.setState({ cep: e.target.value })
  }

  render () {

## webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: require.resolve('babel-loader'),
        include: ['src'],
        options: {
          presets: [
            'dynamic-import-node',

## component.scss
// Passing arguments from a mixin to a content block
// Planned for Sass 4
// https://github.com/sass/sass/issues/871

// File: common.scss
$theme-colors: (
  pink: #FF69B4,
  orange: #FFA500,
);

## External link icon Base64 Data URI.MD

      
              1 file
            
          
              0 forks
            
          
                3 comments
              
            
              3 stars
            
          
                AbhishekGhosh
                / External link icon Base64 Data URI.MD
            
            
              Last active
              October 15, 2021 21:50
            
              
                External link icon Base64 Data URI
              
          
    A specific domain:

<style>
a[href ^= "http://thecustomizewindows.com"]:after {
     content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);    
}
</style>

  
## noma.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Federation | NOMA</title>
</head>
<body style="font:normal 100% 'Courier', serif;">
  <?php echo "We've got ambition"; ?>
  <h1>Great Creative Workspace/Multiple Buildings</h1>
   <!-- 1GB wifi speeds -->

## sass-includes-loader.js
/**
 * Loader that automatically prepends a reference to sassIncludes in the Webpack configuration files
 */

import fs from 'fs';
import path from 'path';
import config from './config';

let fileFound = true;

## wrapper.js

class MyWrapper {
  return React.Children.only(this.props.children);
}


class MyLibraryComponent {
  render() {
    return <div><span><whatever><MyWrapper ref=...>{this.props.statelessComponentThatIWantToReference}</MyWrapper></whatever></span></div>;
  }
	// DISCLAIMER
	// Original function was updated to a faster and es5-supporting version by @Quacky2200

	var replaceCircular = function(val, cache) {

	cache = cache \|\| new WeakSet();

	if (val && typeof(val) == 'object') {
	if (cache.has(val)) return '[Circular]';
	import React from 'react'

	class App extends React.Component {
	state = { cep: '' }

	handleBlur = (e) => {
	this.setState({ cep: e.target.value })
	}

	render () {
	module.exports = {
	module: {
	rules: [
	{
	test: /\.(js\|jsx)$/,
	loader: require.resolve('babel-loader'),
	include: ['src'],
	options: {
	presets: [
	'dynamic-import-node',
	// Passing arguments from a mixin to a content block
	// Planned for Sass 4
	// https://github.com/sass/sass/issues/871

	// File: common.scss
	$theme-colors: (
	pink: #FF69B4,
	orange: #FFA500,
	);
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Federation \| NOMA</title>
	</head>
	<body style="font:normal 100% 'Courier', serif;">
	<?php echo "We've got ambition"; ?>
	<h1>Great Creative Workspace/Multiple Buildings</h1>
	<!-- 1GB wifi speeds -->
	/**
	* Loader that automatically prepends a reference to sassIncludes in the Webpack configuration files
	*/

	import fs from 'fs';
	import path from 'path';
	import config from './config';

	let fileFound = true;

	class MyWrapper {
	return React.Children.only(this.props.children);
	}


	class MyLibraryComponent {
	render() {
	return <div><span><whatever><MyWrapper ref=...>{this.props.statelessComponentThatIWantToReference}</MyWrapper></whatever></span></div>;
	}