CODEWITHSUNDEEP
csswebpackbundling-and-minificationcss-loadercss-modules
Shrey Gupta
Shrey Gupta

Reputation: 5617

Using css-loader without React

I'm building a small web app with Webpack-enabled CSS modules (via css-loader) and without React. My goal is to get the benefits of short, obfuscated CSS class names (as I'm currently using lengthy BEM class names) in my HTML by using the localIdentName: '[hash:base64:8]' option on css-loader. Since I'm not using React, I'm working with raw HTML that is not being programmatically generated through JSX file or document.write.

I've used css-loader with React plenty before, and it ultimately works because you're able to import the style class names in the React file and refer to them using the human-readable names, regardless of whatever the class name gets changed to by Webpack.

However, I'm confused how to deal with this when using raw HTML; I can't just import the styles in since it's not a JS file. If I have a class called photo__caption--large referenced in my HTML, and webpack converts the class name to d87sj, the CSS file will say d87sj but the HTML will still say photo__caption--large.

Is there some kind of loader for HTML files that's able to edit class names in the file to their Webpackified equivalents? Or should I really just be using React with CSS modules?

Upvotes: 2

Views: 1642

Answers (2)

Moorthy G
Moorthy G

Reputation: 1541

This github code might help you. https://github.com/moorthy-g/css-module-for-raw-html

A bit of complicated setup needed. We need to wire the following packages together.
- postcss-loader
- postcss-modules
- posthtml-css-modules
- posthtml-loader

The following postcss configuration creates modules dump file (./tmp/module-data.json). 

// postcss.config.js
module.exports = {
    plugins: {
    'postcss-modules': {
      getJSON: function(cssFileName, json) {
        const path = require('path'), fs = require('fs');
        const moduleFile = path.resolve('./tmp/module-data.json');
        const cssName = path.basename(cssFileName, '.css');
        const moduleData = fs.existsSync(moduleFile) ? require(moduleFile) : {};
        moduleData[cssName] = json;
        fs.existsSync('./tmp') || fs.mkdirSync('./tmp');
        fs.writeFileSync(moduleFile, JSON.stringify(moduleData));
      },
      generateScopedName: '[local]_[hash:base64:5]'
    }
  }
}

And the following webpack rule links html file to modules dump file.

{
  test: /\.html$/,
  use: [
    { loader: 'html-loader' },
    {
      loader: 'posthtml-loader',
      options: {
        plugins: [
          require('posthtml-css-modules')('./tmp/module-data.json')
        ]
      }
    }
  ]
}

Finally, HTML uses css-module attribute instead of class

<div css-module="main.container">
  <h2 css-module="main.title">Title for the page</h2>
</div>

Let me know if you have any issues

Upvotes: 7

Bryce Howitson
Bryce Howitson

Reputation: 7710

My understanding of Webpack, CSS Modules, & CSS-Loader is that the entire point is to use javascript to generate the files.

This enables all the name translation and what not. What's your goal with Webpack if you're writing static HTML?

There are several static site generators for Webpack that will allow you to get the result you want, BUT they're still building the HTML files.

Alternately you could look at tools similar to React (Vue or Angular) that allow you to write all your "templates" in straight HTML. In Vue for example, you can write only HTML (to be compiled from javascript) without needing to use any of its data binding or routing.

Upvotes: 1

Related Questions