Webpack ainsley loader
Purpose
This ainsley webpack loader allows you to input ainsley input as JSON5, and does all the necessary optimizations to get from input to optimized input for the build-step, and optimized input to the generated CSS for the runtime-step in the browser.
You may want to set the default syntax for .ainsley
files to JSON5 in your editor to make development easier.
Installation
npm install --save-dev ainsley-loader
# yarn add --dev ainsley-loader
Usage
Add the ainsley-loader to your webpack configuration.
const config = module: rules: test: /\.ainsley$/ loader: 'ainsley-loader' options: // optional custom flatten() getConfig // https://tbjgolden.github.io/ainsley/docs/api/index#const-flatten flatten: { if configString === "reset" return children: "*{all:unset}" ; else return ; } // optional custom generate() arguments // https://tbjgolden.github.io/ainsley/docs/api/interfaces/ainsleygenerateoptions#properties generate: `-` `-` `_` ;
Then import and use as:
import "./example.ainsley";
Common issues
Sometimes, you might get an error like this:
error - .../create-next-app/node_modules/ainsley/dist/ainsley.client.esm.js:227
export { DEFAULT_OPTIONS, ITERATOR_REGEX, embed, generate };
^^^^^^
SyntaxError: Unexpected token 'export'
This is because the tool you are using is likely trying to do some stuff with node
- either static generation or server side.
In Next.js, you cannot do this:
pages/_app.js
import useEffect from "react";import "../styles/globals.ainsley"; { return <Component />}
To solve this, instead dynamically import it in your script.
pages/_app.js
import useEffect from "react"; { ; return <Component />}