stylelint-bundle

Stylelint Bundle

This repository branch modifies Stylelint and creates a bundle:

• To allow bundling of the code.
• To reduce the file size of the standalone version.
• It removes excessive code to make it efficient to use with the Stylus browser extension.
• The bundle includes the sugarss syntax. It will be used when config.customSyntax === "sugarss".

Demo

Create the bundle

• Download or clone this repository.
• Run npm install --legacy-peer-deps (NPM v7 and newer) or npm install (older NPM)
• Run npm run build.
• An IIFE bundle stylelint-bundle.min.js is created in dist directory using the modified version of Stylelint.
• Run npm test for testing.

Limitations

The resulting bundle:

• Exposes the standalone version of Stylelint.
• It does not work from the command line:
  • All code that uses the node file system (fs) or path (path) are bypassed or removed.
  • All command-line interface (CLI) code is bypassed or removed.

Usage

• Within your HTML page, load the bundle.

  <script src="stylelint-bundle.min.js"></script>
  

• Access the stylelint global:

  stylelint.lint({
    code: "body { color: #000; }",
    config: {
      customSyntax: 'sugarss',
      rules: { /*...*/ },
      formatter: () => {}
    }
  }).then(({results}) => {
    console.log(results[0]);
  });
  

  To get more details, including all the options and return promise values, see the stylelint Node API page; but, don't forget the limitations of this bundle!

For contributors

To update to a new version of Stylelint:

npm install stylelint@latest
npm run build

It will install the latest stylelint, bump the version number in package.json and package-lock.json, then build the bundle.

To test it:

npm test

Debug the bundle

Set environment variable DEBUG to 1 then run npm run build:

• You will get a webpage visualization of modules included in the bundle.
• Detailed module information in stats.json.
• The bundle is no longer minimized.