Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

A RequireJS CSS loader plugin to allow CSS requires and optimization

License

guybedford/require-css

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

fixed optimize not work when config.out is a function in nodejs V6

Git stats

Files

Failed to load latest commit information.

README.md

RequireJS CSS requiring and optimization, with almond support.

Useful for writing modular CSS dependencies alongside scripts.

For LESS inclusion, use require-less, which behaves and builds the css exactly like this module apart from the preprocessing step.

Allows the construction of scripts that can require CSS, using the simple RequireJS syntax:

define(['css!styles/main'], function()  //code that requires the stylesheet: styles/main.css >);

Fully compatible in IE 6+, Chrome 3+, Firefox 3.5+, Opera 10+, iOS.

• CSS builds When run as part of a build with the RequireJS optimizer, css! dependencies are automatically inlined into the built layer within the JavaScript, fully compatible with layering. CSS injection is performed as soon as the layer is loaded.
• Option to build separate layer CSS files A separateCSS build parameter allows for built layers to output their css files separately, instead of inline with the JavaScript, for manual inclusion.
• CSS compression CSS redundancy compression is supported through the external library, csso.

Download the require-css folder manually or use Bower:

To allow the direct css! usage, add the following map configuration in RequireJS:

map:  '*':  'css': 'require-css/css' // or whatever the path to require-css is > >

The use case for RequireCSS came out of a need to manage templates and their CSS together. The idea being that a CSS require can be a dependency of the code that dynamically renders a template. When writing a large dynamic application, with templates being rendered on the client-side, it can be beneficial to inject the CSS as templates are required instead of dumping all the CSS together separately. The added benefit of this is then being able to build the CSS naturally with the RequireJS optimizer, which also supports separate build layers as needed.

Script-inlined CSS Benefits

By default, during the build CSS is compressed and inlined as a string within the layer that injects the CSS when run.

If the layer is included as a tag, only one browser request is needed instead of many separate CSS requests with tags.

Even better than including a layer as a tag is to include the layer dynamically with a non-blocking require. Then the page can be displayed while the layer is still loading asynchronously in the background. In this case, the CSS that goes with a template being dynamically rendered is loaded with that same script asynchronously. No longer does it need to sit in a tag that blocks the page display unnecessarily.

RequireCSS implies a CSS modularisation where styles can be scoped directly to the render code that they are bundled with.

Just like JS requires, the order of CSS injection can’t be guaranteed. The idea here is that whenever there are style overrides, they should be based on using a more specific selector with an extra id or class at the base, and not assuming a CSS load order. Reset and global styles are a repeated dependency of all modular styles that build on top of them.

 modules: [  name: 'mymodule', exclude: ['css/normalize'] > ] >

If the contents of ‘mymodule’ are:

define(['css!style', 'css!page'], function(css)  //. >);

Then the optimizer output would be:

-mymodule.js containing: style.css and page.css which will be dynamically injected

The css/normalize exclude is needed due to r.js issue #289

To output the CSS to a separate file, use the configuration:

 separateCSS: true, modules: [  name: 'mymodule' > ] >

This will then output all the css to the file mymodule.css . This configuration can also be placed on the module object itself for layer-specific settings.

Optimization is fully compatible with exclude and include.

In IE9 and below, there is a maximum limit of 4095 selectors per stylesheet.

In order to avoid this limit, CSS concatenation can be disabled entirely with the IESelectorLimit option.

 IESelectorLimit: true, modules: [  name: 'mymodule' > ] >

Ideally build layers would avoid this limit entirely by naturally being designed to not reach it. This option is really only as a fix when nothing else is possible as it will degrade injection performance.

This option is also not compatible with the separateCSS option.

Excluding the CSS Module in Production

When dynamic CSS requires are not going to be made in production, a minimal version of RequireCSS can be written by setting a pragma for the build:

 pragmasOnSave:  excludeRequireCss: true > >

When building the CSS, all URIs are renormalized relative to the site root.

It assumed that the siteRoot matches the build directory in this case.

If this is different, then specify the server path of the siteRoot relative to the baseURL in the configuration.

For example, if the site root is www and we are building the directory www/lib , we would use the configuration:

 appDir: 'lib', dir: 'lib-built', siteRoot: '../', modules: [  name: 'mymodule' > ] >

Almond doesn’t support the packages configuration option. When using Almond, rather configuration RequireCSS with map configuration instead, by including the following configuration in the production app:

requirejs.config( map:  '*':  css: 'require-css/css' > > >);

To disable any CSS build entirely, use the configuration option buildCSS :

 buildCSS: false, modules: [  name: 'mymodule' > ] >

CSS requires will then be left in the source «as is». This shouldn’t be used with stubModules .

CSS compression is supported with csso.

To enable the CSS compression, install csso with npm:

The build log will display the compression results.

When running the r.js optimizer through NodeJS, sometimes the global module isn’t found. In this case install csso as a local node module so it can be found.

When loading a CSS file or external CSS file, a tag is used. Cross-browser support comes through a number of careful browser conditions for this.

If CSS resources such as images are important to be loaded first, these can be added to the require through a loader plugin that can act as a preloader such as image or font. Then a require can be written of the form:

require(['css!my-css', 'image!preload-background-image.jpg', 'font!google,families:[Tangerine]']);

Источник

How To Add CSS

When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

External CSS

With an external style sheet, you can change the look of an entire website by changing just one file!

Each HTML page must include a reference to the external style sheet file inside the element, inside the head section.

Example

External styles are defined within the element, inside the section of an HTML page:

This is a heading

This is a paragraph.

An external style sheet can be written in any text editor, and must be saved with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the «mystyle.css» file looks:

«mystyle.css»

body <
background-color: lightblue;
>

h1 color: navy;
margin-left: 20px;
>

Note: Do not add a space between the property value (20) and the unit (px):
Incorrect (space): margin-left: 20 px;
Correct (no space): margin-left: 20px;

Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.

The internal style is defined inside the element, inside the head section.

Example

Internal styles are defined within the element, inside the section of an HTML page:

This is a heading

This is a paragraph.

Inline CSS

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

Example

Inline styles are defined within the «style» attribute of the relevant element:

This is a heading

This is a paragraph.

Tip: An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly.

Multiple Style Sheets

If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.

Assume that an external style sheet has the following style for the element:

Then, assume that an internal style sheet also has the following style for the element:

Example

If the internal style is defined after the link to the external style sheet, the elements will be «orange»:

Example

However, if the internal style is defined before the link to the external style sheet, the elements will be «navy»:

Cascading Order

What style will be used when there is more than one style specified for an HTML element?

All the styles in a page will «cascade» into a new «virtual» style sheet by the following rules, where number one has the highest priority:

1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default

So, an inline style has the highest priority, and will override external and internal styles and browser defaults.

Ever heard about W3Schools Spaces? Here you can create your own website, or save code snippets for later use, for free.

Источник