Library CSS files

I'm working to update my library (https://github.com/DougReeder/enyo-animated) to 2.7. I've initialized it as a 2.7 library using enyo init --template default-library and edited the JavaScript.

Here's .enyoconfig:

{
  "name": "enyo-animated",
  "library": true,
  "paths": [],
  "production": false,
  "devMode": true,
  "cache": true,
  "resetCache": false,
  "trustCache": false,
  "cacheFile": ".enyocache",
  "clean": false,
  "sourceMaps": true,
  "externals": true,
  "strict": false,
  "skip": [],
  "wip": false,
  "outDir": "dist",
  "lessPlugins": [],
  "assetRoots": [],
  "lessOnlyLess": false,
  "minifyCss": false,
  "inlineCss": true,
  "outCssFile": "output.css",
  "outJsFile": "output.js",
  "inlineJs": true,
  "watch": false,
  "watchPaths": [],
  "polling": false,
  "pollingInterval": 100,
  "promisePolyfill": false,
  "styleOnly": false,
  "lessVars": []
}
Here's package.json:

{
  "name": "enyo-animated",
  "main": "index.js",
  "assets": [],
  "styles": [
    "css/Toast.css",
    "css/ToastCurve.css"
  ],
  "devAssets": [],
  "moduleDir": "src",
  "version": "0.2.0",
  "description": "A library of UX-enhancing, 60 fps animated Controls for the Enyo JavaScript framework",
  "keywords": ["Enyo", "animation", "toast"],
  "repository": {
    "type": "git",
    "url": "https://github.com/DougReeder/enyo-animated.git"
  },
  "maintainers": [
    {
      "name": "Doug Reeder",
      "web": "https://hominidsoftware.com/"
    }
  ],
  "bugs": { "email" : "[email protected]"},
  "license": "MIT",
  "homepage": "https://github.com/DougReeder/enyo-animated"
}
When I run enyo pack --clean, the JavaScript is copied to the dist directory (and can be executed when the app runs), but the CSS files are not copied.

What configuration needs to be set, so that Toast.css and ToastCurve.css are copied to some file(s) in dist?

Comments

  • By default, enyo pack combines the CSS into a single file. If you want to keep them separate, you should list them in the assets array in your package.json which will only copy them and not combine and process them through LESS.
  • I see that other libraries, such as onyx and layout, have the files onyx.css and layout.css created in the dist directory. No such file is created for my lib.
  • For that matter, neither enyo-ilib.css, enyo-webos.css, nor enyo-luneos.css are created (though only enyo-luneos needs it).
  • It turns out that enyo pack ignores the styles field in the library's root package.json, and only reads CSS files if they are in a subdirectory of the src directory, along with the JS file for a module and a mini package.json

    So, I had to move src/Toast.js to src/Toast/Toast.js, css/Toast.css to src/Toast/Toast.css, and create src/Toast/package.json, with the following contents:
    
    {
      "main": "Toast.js",
      "styles": [
        "Toast.css"
      ]
    }
    
    The require statement is unchanged:
    Toast = require('enyo-animated/Toast')

    ToastCurve required the same changes.
Sign In or Register to comment.