Options
All
  • Public
  • Public/Protected
  • All
Menu

Package @css-blocks/webpack

Webpack Plugin for CSS Blocks

The @css-blocks/webpack package delivers all the pieces necessary to integrate CSS Blocks into any Webpack 3.0 build. (Webpack 4.0 support is forthcoming).

Getting Started

$ npm install --save-dev @css-blocks/webpack

Add to configuration

The Webpack integration comes in three (3) parts:

Plugin

The CSS Blocks Webpack Plugin handles analysis of all JSX files and Block file compilation.

Add it to your plugins list like so:

module.exports =  {
  plugins: [
    / ... /
    new CssBlocksPlugin({
      name: "css-blocks",
      outputCssFile: "my-output-file.css",
      analyzer: analyzerInstance,
      compilationOptions: cssBlocksCompilationOptions,
      optimization: opticssOptimizationOptions
    }),
    / ... /
  ],
  / ... /
};

Loader

The CSS Blocks Webpack Loader halts project compilation until after the Webpack Plugin finished compiling Blocks. If we did not have to Loader, then JS compilation may execute before CSS compilation is finished, and we wouldn't have any data to rewrite our templates with.

The Loader is passed the chosen template integration's Analyzer instance, and a shared data object of the name of rewriter. Once Block compilation is finished, the rewriter object passed to this loader will be populated with this build's Analysis and StyleMapping data.

This loader must apply to all jsx or tsx files for the project. Remember, Loaders are executed in reverse order, so make sure the CSS Blocks loader appears last in the "rules" list.

Integrate the loader like so:

module.exports =  {
  / ... /
  module: {
    / ... /
    rules: [
      / All Other Loaders Go Here /
      {
        test: /.[j|t]s(x?)$/,
        exclude: /node_modules/,
        use: [
          // The JSX Webpack Loader halts loader execution until after all blocks have
          // been compiled and template analyses has been run. StyleMapping data stored
          // in shared rewriter object.
          {
            loader: require.resolve("@css-blocks/webpack/dist/src/loader"),
            options: {
              analyzer: analyzerInstance,
              rewriter: sharedDataObject
            }
          },
        ]
      }
    ]
  }
  / ... /
}

Rewriter Integration

Each template integration's rewriter is slightly different and must be integrated with whatever template compilation plugin is required of it. All template integrations will have an API to accept the rewriter shared-memory object populated in our Loader.

However, Webpack will typically be used with CSS Blocks' JSX integration. The typical JSX end-to-end integration with webpack looks like this:

</code>js</p> <p>const CssBlocks = require(&quot;@css-blocks/jsx&quot;); const CssBlocksPlugin = require(&quot;@css-blocks/webpack&quot;).CssBlocksPlugin; const CssBlockRewriter = new CssBlocks.Rewriter(); const CssBlockAnalyzer = new CssBlocks.Analyzer(paths.appIndexJs, jsxCompilationOptions);</p> <p>module.exports = { /<em> ... </em>/ module: { /<em> ... </em>/ rules: [ /<em> ... </em>/ { test: /.[j|t]s(x?)$/, exclude: /node_modules/, use: [</p> <pre><code> <span class="hljs-comment">/* All Other Loaders Go Here */</span> { <span class="hljs-attribute">loader</span>: require.resolve(<span class="hljs-string">'babel-loader'</span>), <span class="hljs-attribute">options</span>: { <span class="hljs-attribute">plugins</span>: [ require(<span class="hljs-string">"@css-blocks/jsx/dist/src/transformer/babel"</span>).makePlugin({ <span class="hljs-attribute">rewriter</span>: CssBlockRewriter }), ], <span class="hljs-attribute">cacheDirectory</span>: true, <span class="hljs-attribute">compact</span>: true, <span class="hljs-attribute">parserOpts</span>: { <span class="hljs-attribute">plugins</span>: [ <span class="hljs-string">"jsx"</span> ] } } }, <span class="hljs-comment">// The JSX Webpack Loader halts loader execution until after all blocks have</span> <span class="hljs-comment">// been compiled and template analyses has been run. StyleMapping data stored</span> <span class="hljs-comment">// in sharedrewriter` object. { loader: require.resolve("@css-blocks/webpack/dist/src/loader"), options: { analyzer: analyzerInstance, rewriter: sharedRewriterData } }, ] } ]

}

plugins: [

new CssBlocksPlugin({
  analyzer: CssBlockAnalyzer,
  outputCssFile: "blocks.css",
  name: "css-blocks",
  compilationOptions: jsxCompilationOptions.compilationOptions,
  optimization: jsxCompilationOptions.optimization
}),
/ ... /

] / ... / }

Index

Type aliases

Analyzer

Analyzer: AnalyzerType<TmpType>

Assets

Assets: ObjectDictionary<Source>

EntryTypes

EntryTypes: string | string[] | ObjectDictionary<string>

GenericProcessor

GenericProcessor: function

Type declaration

    • (source: Source, assetPath: string): Source | Promise<Source>
    • Parameters

      • source: Source
      • assetPath: string

      Returns Source | Promise<Source>

LoaderOptions

LoaderOptions: ObjectDictionary<WebpackAny>

PendingResult

PendingResult: Promise<StyleMapping<TmpType> | void>

PostProcessorOption

PostcssAny

PostcssAny: any

PostcssProcessor

PostcssProcessor: Array<Plugin<PostcssAny>> | function

TmpType

TmpType: keyof TemplateTypes

WebpackAny

WebpackAny: any

Variables

Const debug

debug: IDebugger = debugGenerator("css-blocks:webpack:assets")

Const debug

debug: IDebugger = debugGenerator("css-blocks:webpack:loader")

Functions

CSSBlocksWebpackAdapter

  • CSSBlocksWebpackAdapter(this: LoaderContext, source: any, map: any): void

assetAsSource

  • assetAsSource(contents: string, filename: string): Source

assetFileAsSource

  • assetFileAsSource(sourcePath: string, callback: function): void
  • Parameters

    • sourcePath: string
    • callback: function
        • (err: Error | undefined, source?: Source): void
        • Parameters

          • err: Error | undefined
          • Optional source: Source

          Returns void

    Returns void

assetFilesAsSource

  • assetFilesAsSource(filenames: string[], callback: function): void
  • Parameters

    • filenames: string[]
    • callback: function
        • (err: Error | undefined, source?: ConcatSource): void
        • Parameters

          • err: Error | undefined
          • Optional source: ConcatSource

          Returns void

    Returns void

isGenericProcessor

isPostcssProcessor

makePostcssProcessor

postProcess

process

  • process(processor: GenericProcessor, asset: Source, assetPath: string): Promise<Source>

sourceAndMap

trackBlockDependencies

Generated using TypeDoc