trucks-transform-style-extract

Write component styles to files

Usage no npm install needed!

<script type="module">
  import trucksTransformStyleExtract from 'https://cdn.skypack.dev/trucks-transform-style-extract';
</script>

README

Style Extract

Extract component styles to files

For each input component write a file containing all component styles (shadow scope) to a file.

Files are named using the component id and written to the directory specified using the dir option.

Be careful using this transform with the force option, if you have already edited the generated styles they will be overwritten.

Designed to be used by component consumers to modify the shadow DOM styles per component in conjunction with the style-inject transform; useful when using third-party components.

Install

npm i trucks-transform-style-extract --save-dev

For the command line interface see trucks-cli.

Usage

Use the style-extract key to configure this transform:

const trucks = require('trucks');

trucks(
  {
    files: ['components.html'],
    transforms: ['style-extract'],
    conf: {
      transforms: {
        'style-extract': {
          dir: 'src/components/css'
        } 
      }
    }
  }, (err, res) => {
    if(err) {
      throw err; 
    }
    console.log(res);
  }
);

API

extract

public extract(state, conf)

Extract component styles to files.

Returns map of visitor functions.

  • state Object compiler state.
  • conf Object transform plugin configuration.

Options

  • dir String output directory.

License

MIT

Created by mkdoc on July 19, 2016