4 Replies Latest reply on Feb 18, 2020 10:09 AM by Duncan Mills-Oracle

    SASS within JET Web Component

    Dan Curtis

      Hi all,

       

      I've got a question regarding SASS compilation within a JET Web Component.

       

      We've always used a SASS partial in our web components rather than a CSS file. When running a build or serve we use the --sass attribute to ensure the component SASS gets compiled. If we run in release mode, it not only does the SASS compilation but it also minifies the CSS output.

       

      This becomes a slight issue because in the loader.js you have to specify the CSS import in the define block. The component doesn't have any way of knowing if it needs to be .css or .min.css.

       

      So what we've done up until now (since version JET4), is use the main.js reference for specifying the path of the CSS file. The path_mapping.json file can have two path references for debug/release mode which will either be .css or .min. Meaning the right file can be located depending on how you run the app.

       

      loader.js

      define([
        "ojs/ojcomposite",
        "text!./my-component.html",
        "./my-component",
        "text!./component.json",
        "css!my-component-css"
      ], function(Composite, view, viewModel, metadata) {
        Composite.register("my-component", {
          view,
          viewModel,
          metadata: JSON.parse(metadata)
        });
      });
      

       

      path_mapping.json

       "my-component-css": {
            "cdn": "3rdparty",
            "debug": {
              "src": "my-component/my-component.css",
              "path": "jet-composites/my-component/1.0.0/my-component"
            },
            "release": {
              "src": "my-component/my-component.css",
              "path": "jet-composites/my-component/1.0.0/my-component.min"
            }
         }
      
      

       

      We've been in the process of upgrading the JET 8, and since switching over this no longer works. It works fine if you are in development (debug) mode, but as soon as you try it in release mode it breaks down. It seems that the terser that is ran to generate the bundles crashes with the following error:

       

       


      Is this a bug with the build tools? Or is there a different way we should be handling the dev/release mode switch? I looked into the packs feature that was introduced, but that seems to be more for files that you need to bring in from your main app into the component, whereas the CSS files we are working with are encapsulated within the component, we are just using the path_mapping to control the context that the main application is being built in.

       

       

      Thanks!

       

       

      Dan

        • 1. Re: SASS within JET Web Component
          Duncan Mills-Oracle

          Dan, on  one hand, yes it's a bug in the cli release processing - I'll log and issue and have that looked into

          On the other hand I don't like your existing approach.  The problem here is that all of the downstream tooling (Visual Builder and the ojet cli) will only automatically create a requireJS path with the name of the component or the pack.  So in consuming a component with your pattern, the consumer has to go in and explicitly create another path in order for it to work - this makes everything just that little bit error prone.

          Anyway, back to the original problem the intent was always there to automatically patch in the .min version when you do a release, however, we'd held off because of the SASS v's CSS variables debate and IE 11 and other things I won't bore you with.  It should be easy enough to use a hook to patch the loader.js with the *.min version directly I'll have a play with getting that working for you.

          • 2. Re: SASS within JET Web Component
            Duncan Mills-Oracle

            Dan - we've fixed this for 8.1.0.  With the new implementation the minified css will not be re-named either so your hack with the requireJS paths will not be needed as the name will remain constant for both release and debug versions.

            • 3. Re: SASS within JET Web Component
              Dan Curtis

              Great thanks for that Duncan. Agree with the issues with the approach. It's not ideal but for the type of project that this is (small amount of custom components and not shared with other projects), it has been a workable solution

               

              So from 8.1.0 all SASS compiled CSS files will no longer have .min appended in release mode?

               

              Dan

              • 4. Re: SASS within JET Web Component
                Duncan Mills-Oracle

                Correct, no need for hacky renaming anymore